Web design is a dynamic field and it adapts new technologies very quickly. For the past few years, we saw a boom in the smartphone market and lots of new tablets have been introduced in the consumer market as well. These devices are internet enabled and they have changed the way we used to view websites. These portable devices have various screen size and orientation. Some even offer both portrait and landscape view of a webpage.
To accommodate these devices, a new website design trend called ‘Responsive Design’ has evolved. The responsive design allows users to view websites on mobile devices. It also made the web design more user-friendly to suit small screen space and multiple OS.
Clients often ask the designers to make the same website for Windows, BlackBerry, iOS, Android and various other OS compatible. They even want a mobile version of their website – one for the Blackberry, another for the iPhone, the iPad etc. The problem for the designer is how he can accommodate so many different platforms and the solution is responsive design.
Responsive web design, what is the big deal? – Responsive web design suggests that design and development should act in response to the user’s actions and environment based on screen size, platform and orientation of the mobile device.
Responsive web design has a combination of flexible grids and layouts, images and a clever use of CSS media queries. This trend has three main designing goals – the website should be flexible with resolution, image size and scripting abilities.
Here is a list of the things you should pay attention to while implementing responsive design.
- Accommodate the user’s device– A responsive website should accommodate iPhone, iPad, BlackBerry, and other portable devices. To make the site flexible, you should use a flexible grid foundation. While designing the site and images that are incorporated into the design should be flexible as well. Use media queries to enable the website for landscape and portrait view.
- Flexible grids– To suit a variety of mobile browsers, you should define your own parameters for columns, spacing and containers in the web design. Give special attention to size and spacing to create flexible grid system. For web page measurement purpose, use ems and percentages instead of pixels.
- Customize images– A major feature of flexible web design is that images move and scale with the flexible grid. For a fast loading time, use small size images. Don’t use the width and height attributes to scale them; it may hamper the usability factor.
Instead of scaling, you can crop the images using the CSS
overflow property. It crops images automatically as the containers around them shift to accommodate new display orientation. You can have multiple size of the same image and offer them according to the user’s screen space and orientation. If it’s needed, then you can completely hide the images as well, using the media queries.
- Importance of media queries– Media queries permit designers to create multiple layouts using the same HTML document. It allows the web designer to accommodate different window size of the browser. Media queries also handle the screen orientation, screen resolution and color related issues. It’s extremely important in responsive web design as you can build websites that fit different devices.
In conclusion, responsive web design is a great trend for mobile websites. But while using this style, understand that it’s helpful for those sites that have a number of mobile based users.
Many people visit Facebook and Twitter from their smartphones and tablets but the visitors of a corporate website mainly access the site from their desktop or laptop. However, designing a site for both normal PC and mobile devices is a good idea as you can capture an untapped market of these portable device users.