If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
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
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: 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.
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.
Join over 77,235 Subscribers Today.