Partner Article

Mobile Design First Approach-Technical View

In previous article we discussed about the “mobile first” approach and how it is beneficial for designers as well as users. It is always easy to start with simple and go on adding complexities- start with small screens first and eventually target for larger screen sizes. In this article, let’s see how to achieve best results by following this approach.

Defining Breakpoints –

There are two different perspectives to defining breakpoints for your design layout. The first one says that you should have breakpoints defined at the different viewport (viewable screen area on any device) sizes, such as, smartphones at 320 to 480 pixel, tablets, kinder,ipads at 768px to 1024 px and desktops, laptops at anything larger 1024. It says you decide breakpoints at specific sizes for viewports. But problem here is that new devices are coming in the market everyday and they all have different viewport widths. So deciding breakpoint based on device width is totally impractical. But still if your client has asked you to target only specific devices then you can find their width on this link and set your breakpoints accordingly.

Another way is to test your design on different scales. Take the smallest design layout and stretch it to the point at which it starts breaking. This will be your first breakpoint. Repeat this process with gradually bigger layouts and define all your breakpoints. It is time consuming but it assures better user experience as it is not dependent on the device screen size and this is what we mean by the term “responsive”.

One point to note here is that while designing for smaller viewports you should not ignore the bigger sizes. Today we can have a television set with internet browsing facility with 42inch screen size. You should not hesitate to define breakpoints for larger screens and can have something like –

#container {

margin: 0 auto;

max-width: 18000px; /* A really big width */

}

in your CSS styles. Here you are addressing the large screen with around 18000px width and your design will spread wisely to cover the whole screen.

What happens to images?

People have already given thought to serve proper images that suits the viewport size. Matt Wilcox has devised method of Adaptive Images which detects the user’s screen size and then creates, catches and delivers the image to the user. All the images referred inside the HTML code can become adaptive to user’s environment to give him best possible experience. Adaptive Images utility is available on GitHub and you can easily integrate it inside your next PHP project with responsive design.

This is how it works –

1. You receive request from user’s browser. A javascript file creates a cookie and records user’s screen size in pixel.
2. When a request for image, tag, encounters, a request is sent to server for loading the image. Server then checks for any special instructions written in .htaccess file.
3. The .htaccess file has an instruction to redirect to adaptive-images.php on request to load any image with .jpg, .gif or .png extention.
4. Adaptive-images.php has code to create a new image that matches user’s screen size and resolutions. Before creating such image, server is instructed to look into the cache folder /ai-cache/480/ if image with specified size already exists. If yes then it is sent to user’s browser. If not, then new image is created with the original one present in the /images folder.
5. Images with different sizes that suits varied screen sizes are stored inside the cache and used as required. It is not required to create new image every time.

Retina Images is another such utility to take care of serving high resolution images on retina display. Currently, all smartphones or tablets has retina display screen with high pixel density- around 300 pixels per inch. Images with normal resolution might look blurred or distorted on such screens. You have to use high density or HD images for such screens. Retina Images utility is also developed by Matt Wilcox to address high pixel density of devices.

You steel have hunger to know more about Outsource Web Development do get in touch with us, We are web Development Company in India with proven competencies in outsourcing ecommerce development. The company has achieved expertise in design and development of robust and scalable websites.

This was posted in Bdaily's Members' News section by Helios Solutions .