So many people these days view the Web using multiple devices like smart phones and tablets, laptops and desktops, and it is important for your website to be able to be viewed on these various devices each with their own screen resolution. This is the key to responsive web design, making your website accessible no matter what the viewport.
Discover why responsive web design is so important to your website.
Wikipedia defines "responsive web design" as:
Let’s break this down, viewing a website on an iPhone with a 3.5 inch screen isn’t easy if the website is designed to be view on a large desktop monitor, so responsive design alters the layout to make it easier for viewing websites on smaller screens, no matter what its size.
Here is a screen shot of a responsive web design as viewed on a desktop with a 27" monitor. You can see there is a large slideshow and below that we have the main content area and a right column. Further down you can see the footer is made up of 3 columns.
Now if we shrink the browser window you can see how the slideshow also shrank in size and the right column next to the content has actually fell below the content, and the 3 columns in the footer are now one column. Did you also notice the navigation bar has changed to a simple drop down box?
Using CSS3 media queries is the key to responsive design. It allows your website to tell the browser that if the viewport (screen size) is this dimension or lower, use this style sheet. So essentially you are building multiple versions of your website to fit various viewports.
I know what you are going to say, "You mean I have to build a hundred different versions of my website", and the answer is no, you are building maybe 3 versions at the most and really it is just creating new style sheets if you build your site using a fluid grid-based layout.
Does This Work in All Browsers?
Another important thing to know about responsive web design is that not every browser supports it. Wait let me rephrase that, Internet Explorer before version 9 doesn’t support it, and even IE9 only supports a few aspects of it.
Responsive web design is created using HTML5 and CSS3 and some of the tags in HTML5 have not been adopted by IE9 and older versions, but not to worry, on a normal desktop monitor your site will still function as it should.
Responsive Web Design Resources
This is a simple introduction into responsive web design. To understand every aspect of it would require a novel, and there are plenty of great resources online for learning more about coding with HTML5 and CSS3 for responsive design.
.net Magazine has a great post on responsive design and the tools you need:
50 fantastic tools for responsive web design
I also downloaded the Kindle version of Responsive Web Design with HTML5 and CSS3. This is an amazing book with a real-world example you can build with the author.
Responsive web design is still in its infancy stage, and there are some instances where a dedicated mobile site might be better for you. Responsive design allows your site to accessible no matter what you are viewing it on, for me this seems to make more sense. People can read all your content instead of a scaled down version, but again this is just my opinion.
The post What is Responsive Web Design appeared first on Graphic Web Design.
