Context
In the past few years, mobile website traffic has increased significantly with sales in smartphones and tablets booming, some would say reaching unexpected of usuage levels.
Web developers must keep up with this (now) very important sector and find design solutions to accommodate all the various online browsing options. Clients need their business seen on any and every screen. What was once solved with a mobile version might not suffice today. We have a lot of operating systems, such as iOS, Android, Widows Phone, Blackberry, Kindle and these are just a few. Don’t get us started on the multiple resolutions.
So we need a solution to keep all the users happy? And this might just be: Responsive Design.
What is it exactly?
As the name itself suggests, a responsive design aims to respond to the user’s platform, screen resolution and behaviour.
How do you do it?
As it is impossible to come up with a specific design to accommodate each new gadget that comes to market the answer lies in using fluid grids, flexible images and CSS media queries, thereby allowing your website to fit perfectly on any screen.
Flexibility is the key!
When we say flexibility we are referring to the sizing in relative units, such as percentages, rather than absolute values (pixels, points etc.) This applies to all elements and their containing images. The smart CSS media queries allow the usage of different styles, based on many characteristics. Developers can crop, hide, scale, you name it, and fit their website on any screen, from small smartphone resolutions to desktop computers.
Beware! The touchscreens are coming!
Although touchscreens are most commonly found on mobile phones or tablets, there are quite a few laptops or notebooks that incorporate this capability. Therefore, your design needs to be touch-friendly. What we mean by this is: Be careful with the cursor actions such as hovers!
___
Follow