Moving to a responsive design
Posted on Saturday August 25, 2012 by Eric Potvin
The mobile and tablet devices are getting very popular and pretty soon people will prefer lay down on their couch surfing the web.
Therefore, you need to make sure your website is responsive to give me best user experience possible. This new direction of building website is called
Responsive Design. This allow the user to view your website for any type of media without breaking the layout or content.
Building websites for a specific device might consume lots of unwanted hours of development. One for the iPhone, one for the Samsung Galaxy, One for the Nexus, Wait stop! Do not build a version for each mobile devices, unless you want to build something very specific for a specific device.
Responsive Design concept becomes a very popular topic and it is, almost, a standard pattern we have to follow when we are building any websites or web applications.
Without a responsive design, the user might encounters some difficulties view your site. By default, it will put the site full screen so the user has to zoom in, then if he zoom in too much, everything will look disproportional. Here's an example:
This kind of interaction is very annoying to the user and after a little while, the user will just go to another site or close the browser.
Would it be better if we can read the articles without zoom?
Flexibility is very important when you need a responsive design website. It allows the content to resize your content without altering the quality of your site. The fundamentals parts of this flexible concept are:
- flexible grids or fluid grids
- flexible images
The flexible grids or fluid grids is a very simple concept that refers mainly to the layout of the page. When you start building your site, just ask yourself these simple questions:
- How my site will look like in a wide-screen monitor?
- How my site will look like on my smart-phone?
- How my site will look like on my tablet?
Then you can easily cut your layout and figure out where all the pieces goes. Then you can find out easily how to code and define the size, space and aliment of each elements.
In this case, you have 21 columns for desktop, 4 columns for tablets, 2 columns for smart-phones and 1 for other small devices.
What about images? The images can use the same concept as the grids. The major difference here are the size of the image (loading time) and scalability. These images can be resized to match any devices by simply using percentage for widths and heights or using the
background-size CSS property.
This will allow big images to fit in small resolution smart-phone/phone. The important thing you have to consider here is the size. The bigger the image is the longer the user will have to load it, specially on slow network. The key feature here is
optimize. Optimizing images can be a good solution if you need to display high quality images for any devices.
Media queries are what all the responsive design is about. It defines how your website will work for different devices by building multiple layout without changing a single line of HTML code.
To learn more about Media Queries, read my article on how to Learn CSS Media Queries.
In addition, here's another one for the iPad 3
In order to view what exactly responsive design is, I recommend to go to mediaqueri.es
Responsive design is a concept every web developer/web designer should put in their "things to do". Mobile and tablets devices traffic increase everyday and responsive design is an important step in the development that should not be ignored.