Your Website user now using variety of devices like Desktop, mobile, tablets, Multi-screen applications to make your website look good on all devices you need to develop responsive web design. We are going discuss some responsive web design fundamentals so you can take into account when you develop your responsive web design. Responsive web design fundamentals are not really a technology or a standard, but rather a set of design principles that help achieve the result.
Media queries
A media query is very important responsive web design fundamentals Introduced in CSS3, media queries let a responsive web designer to customize the presentation of the content to look good on all devices. Media query first specifies media (like “screen” or “print), then a device width range , and possibly more factors (like device pixel ratio, orientation), and finally a set of braces inside which you place the CSS rules you want to apply to those devices. To implement your own responsive web design, there will be instances where you cannot resize an element with fluid grid. Media query of CSS3 gives your CSS logical conditions based on the browser’s viewport properties, and can render different styles based on the browser’s window properties. The media query can do more than just resizing images. You can use the media query to deliver a much more dynamic web page to your viewers. You can display a responsive menu based on different screen sizes using media queries. CSS3 media queries are the magic ingredient that makes responsive web design possible. A media query is a bit like a conditional statement. If the condition is true, something changes, if not, nothing changes. In the case of webpage layouts, we can make the condition the width of the screen in pixels and then apply a rule to change the default layout if it is true. For example this media query says: if the media is a screen and if that screen is 1024px wide or more, set the font size to 100%. Elsewhere in our style sheet there may be a rule that says font size: 80% as a default value. Meaning that if the screen width is less than 1024px, text will display at 80%. @media screen and (min- width: 1024px) { body { font -size: 100%; } } The media query can do more than just resizing images. You can use the media query to deliver a much more dynamic web page to your viewers. You can display a responsive menu based on different screen sizes using media queries.
Flexible grids
Our next responsive web design fundamentals is flexible grids When using percentages to specify the relative size of elements on a web page, the percentage is always relative to the parent element, or in this case, the context. The context is always 1 (full-size), so if the result you are after is a column with a width of 192px set within a containing element with a width of 960px, the formula gives us: 192 ÷ 960 = 0.2 (or 20%) However, in most cases, our result isn’t a nice round number. Let’s consider a more realistic scenario… When working with grids, the number of pixels in each column is unlikely to be a nice, round number and the blog layout above could be described with the fixed pixel values given in the CSS on the right. #page { margin: 36px auto; width: 960px; } .blog { margin: 0 auto 53px; width: 900px; } .blog .main { float: left; width: 566px; } .blog .other { float: right; width: 331px; } Pixels to Percentages Although the calculated percentage values look a bit ungainly, they work perfectly well don’t be tempted to round the numbers up or down. Now, when the browser window is resized, the columns will also resize proportionally. #page { margin: 36px auto; width: 90%; } .blog { margin: 0 auto 53px; width: 93.75%; } .blog .main { float: left; width: 62.8888889%; } .blog .other { float: right; width: 36.7777778%; }
Viewport
The viewport important factor of responsive web design fundamentals and it is the user’s visible area of a web page. Different device have different viewport. HTML 5 introduced viewport through the <meta> tag and that tells the browser how the page should be rendered.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport <meta> element gives the instructions to browser how to show page and mange page on different devices.
The width=device-width we can sets the width of the page based on the screen-width of the device (different device has different width we can defined based on our need).
The initial-scale=1.0 we can sets this value for initial zoom level when the page is load first time by the browser.
Maximum-scale – If maximum scale set to 1, user will not be able to zoom in at all. If maximum scale set to 2, the user will only be able to zoom in to a ratio of 1 CSS pixel to 2 viewport pixels using maximum scale we can control zoom in on the page.
Minimum-scale – if minimum scale set to 2, the user will be zoomed in by a 1:2 ratio by default and will not be able to zoom out to 1:1 using minimum scale we can control zoom level on page.
User-scalable – If user scalable set to no, the user will not be able to zoom in or out at all.
For better user experience and responsive web design we should also follow some additional rules:
1. we should not used large elements with fixed width –If we set image to display width wider than the viewport going to tell browser to scroll image horizontally so we need to adjust this image to fit within the width of the viewport.
2. We should not defined the content to render for particular viewport width – Since different devices has different dimensions and width in CSS pixels so we should not defined content to render for particular viewport width.
3. We can use CSS media queries to apply different styling for different devices – if we set large absolute CSS widths for page elements then elements will be too wide for the viewport on a smaller device. Instead, consider using relative width values would be great idea. such as width: 100%. Also, when we are using large absolute positioning value we need to make sure element not fall outside of the viewport on small devices.
Based on viewport size we can define media queries
Using media queries we can define specific styles are applied to small screens, large screens, and anywhere in between that. The media query syntax allows for the creation of rules that can be applied depending on device.
@media (query) {
/* Define CSS Rules for different device */
}
One of the key concepts in any responsive design is the change of viewport size. That’s because mobile viewports vary greatly from desktop viewports. To control the viewport size we traditionally use the viewport meta tag. It was originally introduced by Apple in Safari and has since been adopted by other browsers.
Now W3C have introducing the @viewport CSS rule
The CSS rule for view port
Viewport instructions is presentations it’s not data so separate principles for data and presentation. Viewport rules need to in CSS not in HTML that for data.
@viewport{width:device-width;}
We can also set the viewport with a number
@viewport{ width:340px;}
We can use the viewport rule and media queries together and tell browser if viewport is larger than 960 then shrink that viewport to 960px:
@media screen and (min-width: 960px)
{width:960px;}
Flexible images
flexible images is also important part of responsive web design fundamentals. In order to conserve bandwidth, images should only be displayed at their actual size. However,responsive web design requires that we resize images to maintain the integrity of our layouts. In order to create “fluid” image, we must apply the fluid bit (the percentage) to a container. We must then use the max-width rule for the image so that it remains inside its container and is therefore scaled with it. .figure { float: right; margin -bottom: 0.5em; margin -left: 2.53164557%; /* 12px / 474px */ width: 48.7341772%; /* 231px / 474px */ } img { max -width: 100%; } Of course, things are never quite that simple older browsers may cause problems. See this article for more information.
Breakpoints
In responsive web design fundamentals our next point is breakpoints.Different devices will have set screen sizes ( iPhone, iPad, Laptop, Desktop see Chris Coyier ’s Media Queries for Standard Devices), you could target those devices but what happens when they change and resolutions increase (as they inevitably will)? Some designers believe that media queries should be content focused rather than device specific… Another debate. Breakpoints are where the design changes as the viewport gets larger or smaller but should the design change for common viewport sizes (e.g. phone, tablet and desktop) or should it only change when appropriate for the content?. So rules for breakpoints is Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINTS!
IE 8 and lower do not understand media queries
If (as we should) we take a “mobile first” approach to RWD, older browsers that do not understand media queries will see only the “core experience” designed for mobile and not the progressively enhanced desktop version of our designs. To overcome this problem, we can use a conditional comment to provide a fallback CSS file for versions of IE before version 9 except mobile versions. <!–[if (lt IE 9) & (!IEMobile)]> <link rel =”stylesheet” href =”ie.css ” media=”all”> <![endif]–>
Scaling on mobile devices
Mobile device browsers assume that there is no responsive design By default, mobile devices will scale all websites so that they fit on the device screen rather than obeying the media queries you have added to the CSS. We have to tell mobile devices to display a webpage with a scale of 1 in order for them to render our responsive designs as we intended them to be seen. We do this by adding a viewport meta tag to the head of our webpage. Mobile devices are being manufactured these days with some robust features, and while graphics and load capabilities have improved tremendously, you still want to ensure that your website loads quickly on any device.
Responsive web design frameworks
Developing a responsive framework from scratch can be overwhelming. Below are couple of famous frameworks which you can use to develop your websites.
Twitter Bootstrap
Bootstrap is an open source framework built by Twitter which is developed with mobile first approach.
Zurb Foundation
Zurb foundation is another fronted responsive framework which provides out of box mobile first and responsive email template grids. It is semantic, flexible and easily customization framework.