Responsive Designs 101 – The Future of the Web is Responsive
What is a responsive design?
What comes to your mind when you hear about responsive designs? To some of us it may seem like a design that interacts with the user/visitor of the site or perhaps a design that responds or talks. (Do they literally talk? ).
image from r2i
Responsive design involves the creation of a single website that automatically adjusts to the user’s needs and the device they are using.
Proliferation of responsive design started when majority of website visitors started using mobile devices to access websites. Different screen resolutions fromdifferent mobile device manufacturers urge web developers to implement responsivedesign.
Being an HTML/CSS developer, I have been coding websites using a fixed width layout that are not compatible with mobile and the result is poor. Thanks to the continuous enhancement of css3 and html5 that supports these devices nowadays. With the help of the code snippets available throughout the web, I am now able to code sites that are useful for mobile devices user. Here are few of the examples:
The @media screen is used for declaring different media devices such as mobile. While the attribute max-width: 320px tells the code to NOT display the sidebar if it detects a 320 pixel screen resolution.
The best responsive design free code that I use a lot came from this site: http://www.getskeleton.com. They provide the base css and the base structure for your website to start with. You can download the files from their site.
Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ.
It also has a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:
Responsive Grid Down to Mobile, Fast to Start and Style Agnostic. For more information about these principles, please visit their website at: http://www.getskeleton.com
One of the examples of a responsive design that uses skeleton framework is: http://www.eleventhedition.com
Why would I implement responsive design?
You should implement responsive design with your html and css codes because of its flexibility in terms of mobile screen. Since the majority of web visitors use mobile devices such as IPad, Samsung Tab, IPhone etc. using this technology could benefit both the developer and the user.
“We’re just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook
PROS and CONS of a Responsive Web Design
PROS of Responsive Web Design
For detailed information about responsive designs, you may visit these links: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://www.labnol.org/internet/responsive-web-design-faq/21361/
Are you looking into mobile and web development as as strategy for your business? Talk to us and let's help you deliver unique compelling web and mobile experiences.