Moving to a responsive design
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 allows 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.
The 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
Without a responsive design, the user might encounter some difficulties view your site. By default, it will put the site full screen so the user has to zoom in, then if he zooms 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
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 part 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 element.
For example:
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
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
Some Examples
In order to view what exactly responsive design is, I recommend going to mediaqueri.es
Conclusion
Responsive design is a concept every web developer/web designer should put in their "things to do". Mobile and tablets devices traffic increase every day and responsive design is an important step in the development that should not be ignored.