Responsive Web Design using HTML and CSS
Responsive web design is like a new shiny toy for designers and developers. It is hard to overestimate the importance of responsive design because it guarantees that any website will look good in different screen resolutions. I think everyone will agree with me that the first thing that every self-respecting designer should do is to familiarize oneself with responsive web design.
With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. The industry response to this question has become responsive web design, also known as RWD.
Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Using HTML and CSS we achieve what we want.
Food Sense has a beautiful website, responsive to all different viewport sizes. No matter how large or small the viewport may be the Food Sense website adjust, creating a natural user experience.
Responsive vs. Adaptive vs. Mobile
Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change, while Adaptive websites are built to a groups of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites.
Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users usually build using JQuery Platform.
Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.
The Three main components of Responsive web design are: flexible layouts, media queries, and flexible media.
1. Flexible Layouts
- is the practice of building the layout of a website with a flexible grid, capable of dynamically re-sizing to any width. Flexible grids are built using relative length units, most commonly percentages or
em units. These relative lengths are then used to declare common grid property values such as
Relative Viewport Lengths
CSS3 introduced some new relative length units, specifically related to the viewport size of the browser or device. These new units include
vmax. Overall support for these new units isn’t great, but it is growing. In time they are useful in building responsive websites.
vminMinimum of the viewport’s height and width
vmaxMaximum of the viewport’s height and width
Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints. Fortunately, Ethan pointed out an easy formula to help identify the proportions of a flexible layout using relative values.
The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.
target ÷ context = result
- will work in a column based layout. Below we have a parent division with the class of
container wrapping both the
aside elements. The goal is to have have the
section on the left and the
aside on the right, with equal margins between the two. HTML and CSS for this layout would look a bit like the following.
Fixed Grid Demo
Using the flexible grid formula we can take all of the fixed units of length and turn them into relative units. In this example we’ll use percentages but
em units would work equally as well. Notice, no matter how wide the parent
container becomes, the
aside margins and widths scale proportionally.
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 63.63636363%; /* 420px ÷ 660px = .63636363 */
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 30.30303030%; /* 200px ÷ 660px = .30303030 */
Flexible Grid Demo
Taking the flexible layout concept, and formula, and reapplying it to all parts of a grid will create a completely dynamic website, scaling to every viewport size. For even more control within a flexible layout, you can also leverage the min-width, max-width, min-height, and max-height properties, as done with the parent container above.
The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.
2. Media Queries
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.
Initializing Media Queries
There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.
For the Complete Guide of Responsive Web Design using HTML and CSS please visit the URL: Advanced Guide to HTML and CSS