Flexible Web Design for Mobile, iPad & Other Devices

Advertisement
Advertise with Us

Almost every other client in the market is looking for a mobile version of their web design nowadays. It has become practically important after all: one design for the iPad, another for the BB (BlackBerry), the iPhone, Kindle, notebook – along with compatible screen sizes. In the coming years there will definitely be a need to design for more inventions. If you are thinking when will it all stop? It won’t.

In the competitive world of web design and development, we are rapidly approaching a point where it will be very difficult to keep up with the endless new devices and resolutions. Creating a mobile version for different resolutions and every new device coming up would be next to impossible, or impractical to say the least. The question here is, should we just sit and watch the client and users leave? Or is there a solution?

Responsive Web Design is a design that responds to the behavior of the user and works well on different screen sizes, orientations and platforms. It is a mixture of images, flexible grids, sensible and intelligent use of CSS media queries and layouts. For instance, if a user switches from a desktop to a mobile phone, the web design should automatically adjust to the different screen size, resolution and scripting. In short, website should have the ability and be technologically advanced enough to respond to the preferences of the user. This would automatically eradicate the requirement for different developments and designs for every new gadget introduced in the market.

Responsive Web Design: Concept

Ethan Marcotte, wrote an article for A List Apart which discusses the approach on “Responsive Web Design“.

The question arises, why should there be a need for creating custom web designs for different users? For instance, if we look at different architectures, they are not built for different types and sizes. Web designs should also automatically adjust like responsive architectures do. There should not be a need for numerous customized solutions for every different user out there.

It is obvious, that same techniques and technology can’t be applied to web designing. For instance there is no way that we can make use of robotics and sensors the way buildings do. Abstract way of thinking is required when it comes to responsive web designs. Having said that, some ideas are being practiced already, like, scripts that have the ability to reformat, media queries and fluid layouts.

It should be remembered that responsive web designs are not merely about automatically adjustable images and screen sizes. It is about a completely different and new way of thinking about web designing. In this article we will be discussing the new ideas and features in the making.

Adjustable Screen Resolution

With different devices come different screen orientations, resolutions and definitions. Most of these devices come with the ability to take care of variation in functionality, resolutions, and even color. Websites are created in different formats and sizes, some are portrait, others in landscape and some even square. Since devices such as iPhone, smartphones and iPad are on the rise, many new devices are built accordingly. The question is how should one design?

Adjustable Screen Resolution

It is not just about enabling orientations to switch instantly for both portrait and landscape, innumerable different screen sizes should also be considered. It is definitely possible to categorize them into different major categories and make the designs as flexible as required. But that can end up being overwhelming, and one can never know what the figures will be in the coming years. Apart from that, a lot of users do not maximize their browsers, which in itself leave too much room for variations in screen sizes.

Morten Hjerde with his colleagues analyzed and identified statistics on around more than 400 devices that were sold between 2005 till 2008. Below we present some of the commonly used ones:

Even more devices have been created since those statistics came out. Practically, we can’t come up with customized solutions for every device. So the big question is how to deal with it?

Flexibility

Not too long ago, flexible layouts were a “luxury” for web designs; few things amongst them were the text and layout columns. The designs were considered flexible but they really weren’t good enough to adjust from a computer to a notebook.

Things have changed now as the designs are a lot more flexible. They are capable of automatically adjusting the images, and have alternative methods so the layout does not break. It’s definitely not a long term solution, but gives more options. It’s absolutely perfect for the devices that change over from portrait to landscape in a jiffy, and for users that switch from a computer to an iPad.

Ethan Marcotte in his article has created a very nice web design sample that features a much better layout:

If the image is reduced to a very small size, it would not look good and would appear to be of really low quality. So to solve this issue, image is separated in to two parts: one is the illustration, used as a background.

It is cropped so it still looks good, and the other option is to resize it proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

The function of the code above is to set the illustration as the background, and align the image according to the heading.

This is one of the examples that shows responsive web design can be really effective. Even after these quick fixes, a layout can still have problems; it can look too small or narrow. The example given above works, but is not perfect. The ideal scenario would be when there is no need to crop the illustration or reduce the size of the logo.

Working with Flexible Images

One big problem when it comes to responsive web designs is dealing with the images that need to be taken care of. There are a number of methods and techniques that can be used to resize images, and many of these methods are easy. The best part in Ethan Marcotte’s article is on fluid images, but it was Richard Rutter who experimented with it first – to use CSS’s max-width for a quick fix.

img { max-width: 100%; }

As long as this rule is not overridden by other “width-based” image styles, all images will load in their original sizes, unless the area where images are viewed becomes smaller or narrower than the width of original image. An image’s maximum width is set to 100% by default, so if the size becomes narrower for some reason so does the image. As Jason Grigsby once said, “The idea is to use the images at the max possible size and just let the browsers adjust the size of the images with the user not having to declare the size of the image in the code”. This is a very simple and a great technique for resizing images.

It should be noted that Internet Explorer (IE) does not support max-width. But it’s not a big issue, because if the width is set to 100%, then it would very nicely resolve the issue in a very neat and clean manner. Another issue arises when resizing the image to very small in some older Window browsers, the image rendering is not crisp as one would expect. JavaScript can be utilized to resolve this issue, found in the article by Ethan Marcotte.

While the solution presented is a very quick fix to responsive images, download time and image resolution should be of main consideration. Scaling down an image for a mobile can be pretty easy, if the original size is intended for larger devices, but the drawback is that it can significantly slow down the download time and take up unnecessary space.

Responsive Images from Filament Group

Filament Group presents a technique which considers this issue to resizes images proportionally, as well as shrinks the resolution of the image for smaller devices, therefore bigger images don’t waste unnecessary space on small screens. The demo page can be checked here.

All files required for this technique are available at Github. File includes are JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then, a little bit of HTML can be utilized to reference both high and low resolution images: first, the smaller image, with an .r prefix to define that it should be responsive, and then the bigger image making use of data-fullsrc.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Data-fullsrc is a custom attribute of HTML5, very well defined in the files linked above. For a screen that is more than 480 pixels in width, larger-resolution image (largeRes.jpg) will be loaded. For smaller screens, there is no need to load bigger image, so the smaller image (smallRes.jpg) will be loaded.

The function of the JavaScript file is to insert base element that separates responsive images from the page and redirect as and when necessary. Once the page loads, files are rewritten to the original form, and only the larger or smaller images are loaded as required. If this technique is not used, all images with higher resolution would be downloaded, even if they are not needed. This method can be of great use for websites with numerous images, as it can save a lot of loading time and bandwidth.

All the modern browsers, Internet Explorer (IE8), Opera, Safari, Google Chrome, including mobile devices such as iPhone and iPad that use these modern browsers fully support this technique. Older browsers along with Mozilla Firefox degrade quite well and resize as one would expect of a responsive image. The only exception is that both the resolutions are downloaded at the same time, so in the end the advantage of saving space which is a part of this technique becomes void.

iPhone Simulator and Image Resizing

One good feature of iPod and iPhone is that the websites automatically resize to fit the smaller screens. A web design of full size would shrink proportionally according to the small browser, without a need to scroll. Then, it would also allow the user to zoom in and out accordingly.

But there was an issue with this particular stimulator. In the very beginning of responsive web designs, it was noticed that there were a lot of images still changing proportionally, even these images were specifically created for the small screens. This, in turn resized text and other elements used.

Because it only works with Apple’s simulator, Apple-specific meta tag can be utilized to resolve this issue, by placing it under website’s <head> section. Below is a very useful meta tag, courtesy of an article on resizing of image by Think Vitamin.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

If the initial scale is set to 1, it will override the default size to resize the images proportionally. The code will leave the images as if their width was the same as the width of the device, either landscape or portrait. It you are looking for more information then Apple’s documentation has plenty of information on viewport meta tag.

About Khurram Alvi

Khurram Alvi is a person full of ideas and insights, who does not fear to try new things. He is a multi-talented professional having more than 7 years of experience in web design, development, multimedia authoring and project management. He is a computer freak, loves cars, loves nature, and loves to share his vast experience to educate the community.