8 Easy Steps to Design Responsive Websites

Information about 8 Easy Steps to Design Responsive Websites

Published on July 8, 2014

Author: anupriya26

Source: authorstream.com


8 Easy Steps to Design Responsive Websites: 8 Easy Steps to Design Responsive Websites Web Designing Course Introduction: Introduction In today’s internet world, browsing is not limited to desktop alone. Due to the increasing usage of Smartphone and tablets, with varying screen resolutions, Responsive design has become very essential. It requires cross browser responsive web design using HTML5 and CSS3. Let’s see how to use it! Define Viewport Meta Tag: Define Viewport Meta Tag First step to responsive web design. This modifies the browser viewing area. Disabling the default scale and using tag to tell browser to use device width as viewport width. This tag can be used in the <head> section: < meta name= "viewport" content ="width=device-width, initial-scale=1.0" > Create HTML Structure: Create HTML Structure Next is to define structure of your website. Set page layouts with header height, width of the content container and side bar, footer columns, etc. If required you can also include navigation elements and images in HTML structure. Setting Features of Style Sheet: Setting Features of Style Sheet This is necessary because you want your site to have same basic features in all device screens. Determining typeface, contrast, color, icons, etc for varying screen sizes. Media Queries for Small Screen: Media Queries for Small Screen CSS3 media queries makes the magic. Start with small widths to include only essential content, say, 320-480 pixels. Set up to 480px or less and fix the header heights and fonts accordingly. Media Queries for Large Screens: Media Queries for Large Screens For the screen of a tablet, you can set the media query i.e., for a relatively large screen. Use a minimum width of 480px. @media only screen and ( min-width: 481px ) { ... } Whereas for large screen like desktop set the maximum width as 769px to 1100px! Making Flexible Images and Videos: Making Flexible Images and Videos While you reduced all, don’t forget to make the images and videos flexible! Define the height and width in the media query according to the relevant screen sizes. View Finalized Demo: View Finalized Demo So you have made it all. Now its time to view the final demo. View it resizing your browser. Check it on other devices like iPad , iPhone , Android devices, Tablets, Blackberry, etc/ Thank You: Thank You Hope if you follow these tips, you will definitely become an RWD expert! These tips are brought to you by Web Designing Course offering HTML Training in Chennai .

Related presentations

Other presentations created by anupriya26