Total Followers 132,503
The ever-changing landscape of the web and the technologies that access it demand for shifts in how we view websites. Most recently a trend called ‘Responsive Design’ has emerged, which allow for users viewing websites on mobile devices to access them in a user-friendly manner. Accommodating these users is something everyone should take into account for their web strategies in the future, as it enhances the overall viewing experience for mobile visitors.
Many clients may demand a mobile version of their website – one for the Blackberry, another for the iPhone, the iPad, netbook, and even the Kindle. How does one accommodate this growing population? In this article I will describe the growing prevalence of Responsive Design and factors you should consider when designing for mobile visitors.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. The website should accommodate for:
In short, a website should have the technology to respond to the user’s preferences.
“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”
“Web design is responsive design, Responsive Web Design is web design, done right.”
Responsive Website Design E-Book is a product of 1stwebdesigner to get people who are interested in responsive design started in this amazing new trend. The e-book covers the basics of responsive design, great examples, resources, and advice on how to create the perfect responsive website.
In creating a Responsive Website, your goal is to accommodate the user’s viewing device, such as the iPhone. A Responsive Website can be achieved through these short features:
A responsive web design will usually use CSS @media queries to style the page according to specific rules, such as min-width.
Part of any good web design in these modern times is a flexible grid. This practice will accommodate a variety of browsers already that demand the design be flexible and fluid.
Tiny Fluid Grid is a great tool for creating fluid grids. It lets you make grids with up to 1200px maximum widths, and is based on 1kb grid.
70+ essential resources for creating liquid and elastic layouts has everything you need to get started creating your own flexible layouts.
This sample website is on a flexible grid that changes the layout depending on the size of the browser’s viewport.
Another feature of Responsive Web Design is images that move and scale with your flexible grid.
overflow property (e.g. overflow: hidden) gives us the ability to crop images dynamically as the containers around them shift to fit new display environments.Unstoppable Robot Ninja has a simple script that automatically resizes your images.
Zomigi allows you to selectively hide parts of your image dynamically.
Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent’s features, such as the browser window’s size.
Other parameters Media Queries deal with:
Media queries and responsive design allow us to think outside of the constraints of a screen size or resolution and start building websites that flexibly adapts to all mediums.
Adaptive Layouts with Media Queries:
NET magazine offer some insightful info on the history of responsive or adaptive website designs and the introduction of the media query module along with tips on how to implement such features yourself.
Working with Media Queries
Nathan Staines has written a great guide to the basics of responsive web design with usable code samples.
How to use CSS3 Orientation Media Queries
1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query in particular can be used to change the colour of an image based on the orientation of the device or browser.
There are obviously a lot of benefits towards getting behind Responsive Design as the number of mobile users continues to rise. It’s important to note, however, that before you go redesigning your website to first evaluate who the current users are that are coming to your site and what they’re using to access it. Responsive Design may not really be needed for some sites than others, and is best to address the topic on a case-by-case basis.
Responsive Web Design by Ethan Marcotte
Media Queries – a collection of sites using media queries
People who browse the web undoubtedly have different wants and needs depending on the device they’re using. As we see this become more common, designers will have the possibility of expanding their skills in creating mobile-ready design solutions for their clients. The web is growing and with it comes a world of possibility of designers and developers who wish to pursue it.
Get The Only Freelancer crash course you will ever need to read!
Thursday, March 8th, 2012 16:37
This is another fine article to add to the collection.
I have to say that it’s becoming increasingly more important to design websites that are fluid enough to be viewed and optimized for a variety of devices. Responsive design is definitely gaining the much needed attention that it deserves. I’m looking forward to seeing this area of design evolve.
Wednesday, February 22nd, 2012 21:31
Thanks a lot Stephanie for this overview of responsive design on a new project of mine and now thinking of making it with a responsive design so that I don’t have to make any separately for small screens..!!
Thursday, February 23rd, 2012 03:20
http://www.responsivedesign.co.nz/
I have developed a responsive website UI that generates the almighty Skeleton code. Check it out. Great post by the way
Monday, January 2nd, 2012 10:11
Great article. Responsive Web Design will be a BIG trend in 2012
Sunday, August 7th, 2011 21:34
Great article about having to constantly adapt to the amazing technology which we have available to us. Website which were designed several years ago – which at that time would have had cutting edge scripts/coding are now sadly not adaptable to these technologies so it is important for business owners to kep their web coding up to date.
Thursday, July 14th, 2011 00:39
Phonegap is pretty cool.
Wednesday, July 13th, 2011 20:32
Very nice article!
The link to “70+ essential resources for creating liquid and elastic layouts” still does not work and I tried to search the article and it seems that the search box you have up there is not working either.
Friday, July 8th, 2011 23:12
This article came handy when I’m in the process of my blog redesign and I’ll adapt it to mobiles devices as well. Alot of information about it. I’m sure it will help me at least understand the core principale to a better user experience on mobiles. :)
Thursday, July 7th, 2011 18:54
Great article, I’m looking to create bespoke versions of my site for all mobile devices soon so this is a useful bookmark!
Thursday, July 7th, 2011 08:50
Thanks for the article. The idea that websites should respond and adapt to all devices and situations – smart phones, tablets… is game changing. Designer Ethan Marcotte, in his book Responsive Design explored the concept in architecture. In architecture responsive design looks at how physical spaces respond to the people passing through them and calls on the designer to re-imagine what a space can do.
Thursday, July 7th, 2011 04:29
I heard someone said that to design a website, one should begin to think for mobile platform instead of PC.
I agree with this. This is new challenge and opportunity.
Thursday, July 7th, 2011 06:46
the link ’70+ essential resources for creating liquid and elastic layouts’ leads to a 404 page. Great article btw.
Friday, July 8th, 2011 10:30
summer reading thank you for the tip
Wednesday, July 6th, 2011 20:01
Thank you for a great article! YUI3 Grids (http://developer.yahoo.com/yui/3/cssgrids/) uses percentage based measurements for column sizes and would be easy to use for flexible/fluid layouts.
Wednesday, July 6th, 2011 16:08
Great article. As we’re making our site design/building tools platform-independent, this info comes in handy.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
Just enter your name and email below and click Get Updates!
Flavio Mester
Wednesday, July 6th, 2011 16:08
Great article. As we’re making our site design/building tools platform-independent, this info comes in handy.
Renato Alves
Friday, July 8th, 2011 23:12
This article came handy when I’m in the process of my blog redesign and I’ll adapt it to mobiles devices as well. Alot of information about it. I’m sure it will help me at least understand the core principale to a better user experience on mobiles. :)
Sohail Amir
Thursday, July 7th, 2011 18:54
Great article, I’m looking to create bespoke versions of my site for all mobile devices soon so this is a useful bookmark!
Debbie
Thursday, July 7th, 2011 08:50
Thanks for the article. The idea that websites should respond and adapt to all devices and situations – smart phones, tablets… is game changing. Designer Ethan Marcotte, in his book Responsive Design explored the concept in architecture. In architecture responsive design looks at how physical spaces respond to the people passing through them and calls on the designer to re-imagine what a space can do.
apipkin
Wednesday, July 6th, 2011 20:01
Thank you for a great article! YUI3 Grids (http://developer.yahoo.com/yui/3/cssgrids/) uses percentage based measurements for column sizes and would be easy to use for flexible/fluid layouts.
Ryan
Thursday, July 7th, 2011 06:46
the link ’70+ essential resources for creating liquid and elastic layouts’ leads to a 404 page. Great article btw.
mia
Friday, July 8th, 2011 10:30
summer reading thank you for the tip
Randy
Thursday, July 7th, 2011 04:29
I heard someone said that to design a website, one should begin to think for mobile platform instead of PC.
I agree with this. This is new challenge and opportunity.
Vanessa G.
Wednesday, July 13th, 2011 20:32
Very nice article!
The link to “70+ essential resources for creating liquid and elastic layouts” still does not work and I tried to search the article and it seems that the search box you have up there is not working either.
dewex
Thursday, July 14th, 2011 00:39
Phonegap is pretty cool.
TJ
Thursday, March 8th, 2012 16:37
This is another fine article to add to the collection.
I have to say that it’s becoming increasingly more important to design websites that are fluid enough to be viewed and optimized for a variety of devices. Responsive design is definitely gaining the much needed attention that it deserves. I’m looking forward to seeing this area of design evolve.
Christina Cruz
Thursday, April 12th, 2012 16:43
This is a great article. Thank you for sharing.
Saket Jajodia
Wednesday, February 22nd, 2012 21:31
Thanks a lot Stephanie for this overview of responsive design on a new project of mine and now thinking of making it with a responsive design so that I don’t have to make any separately for small screens..!!
James
Thursday, February 23rd, 2012 03:20
http://www.responsivedesign.co.nz/
I have developed a responsive website UI that generates the almighty Skeleton code. Check it out. Great post by the way
Jayne
Sunday, August 7th, 2011 21:34
Great article about having to constantly adapt to the amazing technology which we have available to us. Website which were designed several years ago – which at that time would have had cutting edge scripts/coding are now sadly not adaptable to these technologies so it is important for business owners to kep their web coding up to date.
Craig
Monday, January 2nd, 2012 10:11
Great article. Responsive Web Design will be a BIG trend in 2012
Joseph Buarao
Wednesday, January 18th, 2012 09:17
I never this. thanks for sharing..