Issuu on Google+

Techniques Of RWD ~ Responsive Web Design


Basics of responsive web design In todays web design scenario the responsive web design new york is no doubt a big thing. If you are not habituated with RWD then in reading these slides you can get a clear idea about the RWD. We illustrate the basic logic of the responsive design and media queries in 3 steps. We illustrate these steps in serial numbers. These are

 Meta tag  HTML structure  Media queries


Meta Tag Most mobile browser scales HTML pages in wide viewport so it fits to the screen. You can reset this using viewport meta tag. Below viewport tag tells the browser viewport width and disable the initial scale point of the device. In the HTML code include the meta tag in the head tag. <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

IE 8 or older version doesn’t support this query. You can use media-queries.js or respond.js


HTML Structure In this example we use the basic page layout using header, footer, content and sidebar. Header has 180px, content 600px and sidebar is 300px. Header

Sidebar

Content

Footer


Media Queries CSS means cascading style sheet. We use the CSS3 for media query. It is the main trick of the responsive design. We use the following example for the 980px or less. We set the container width to pixel value to the percentage value.


What Next â&#x20AC;Ś?? For viewport 700px or more specify the #content #sidebar for autuwidth and remove the float.


You can write many media query as you like. In these slides we only shown only 3 queries. Purpose of these media queries is apply to different CSS for the different layouts. It can be in a same stylesheet or in a different stylesheet. If it is in the same sheet then it is called internal CSS or if it is imported from outside then it is called external CSS.


Contact New York Web Design 391 Sutter Street 2nd Floor San Francisco, CA 94108, USA

Phone: (415) 234-3018 Email Address: smb@verecom.com Office Hours: Monday - Friday: 9am - 6pm Saturday: 10am - 2pm



Techniques Of RWD ~ Responsive Web Design