Does Your Website Design work on Smartphones and Tablets?
The iPhone in 2007, Android in 2009 and the iPad last year has led to rapid growth in the mobile market. Everyday these devices are bringing new visitors to your website and this trend will continue to grow. But …
Is your website ready for these visitors?
The New Constraints
When you design a website you face a number of constraints affecting how your site displays. The important ones for computers are
- Computer Screen Resolutions
- Operating Systems and their various versions
- Browsers and their various versions
The tablets and Smartphones add some more
- Device Screen Resolutions
- Flash support
- How the devices are held, as portrait or landscape.
The Solution – Responsive Web Design
The current approach is a series of workarounds depending on devices, browsers and screen resolutions. There is a better way with Responsive Web Design as articulated by Ethan Marcotte.
http://www.alistapart.com/articles/responsive-web-design/
Responsive Web design is the approach that suggests that the website should be designed and developed to respond to the user’s behavior and environment based on screen size, platform and orientation.
The website is a single flexible design which adjusts itself to the above factors using Flexible grids and Layouts, Flexible images and CSS3 Media queries.
How does it work?
There are 3 key elements for a truly responsive web design. These are
- Flexible grids and Layouts: This helps easy and fluent readjustment of the various elements in a design and their positions dependant on the resolution.
- Flexible images: These are images which naturally resize depending on the size of the display device.
One concept is to create optimized images for the smallest device and present larger, richer images for larger devices. - CSS3 Media queries : These are conditions which enable or disable display criteria based on the height and width of the display device.
In an ideal situation it works as follows. A visitor comes to a website using a smart device with a 400 px screen width.
- The CSS Media query elements apply the width condition which is a match for the above and chooses a layout.
- The flexible layout adjusts the flow of elements while the CSS sets criteria for showing, hiding or replacing display of certain elements
- The images ideal for that resolution are displayed
See these examples http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/
In reality there is a lot more work due to issues like browser support for media queries and more experimentation going on regarding flexible images. But this is the right direction to go in for long term success of your web designs.
What are the benefits?
- Your visitors get a good user experience no matter what device they use.
- You don’t waste time and money creating multiple versions of your website.
- Your site is future proof and ready for any new device with any resolution.
For successful website an important factor is making the site visible across all types of devices its visitors use. The second factor is making their visit pleasant and giving them a good experience. Responsive web design is a logical solution to incorporate in your design plans.
Related Posts
- 7 Website Design Tips to help Your Business Succeed Online
- Mobile friendly websites: How they can help your business grow
This post is brought to you by Dharne & Company offering web design, development and marketing services for small and medium businesses in Irvine and the Greater Los Angeles area.