Mobile web development – Responsive design

Mobile web development – Responsive design

Being able to deliver a responsive design is the first key challenge on mobile: a website designed for the desktop to also work smoothly on all kinds of mobile handsets.

Fluid design & Viewport

The desktop historically had a fixed screen size – most sites were designed for 1024 by 768 pixels. This however became a problem on mobile where the screen sizes varied widely.

desktop vs mobile screen sizes

Varying screen size on mobile is a key challenge compared to the fixed 1024 by 768 screen on desktop – if designed on mobile as is, the user may either have to either

  • Pan & zoom, if mobile screen is smaller than 1024 by 768
  • Leave white spaces around the content, if mobile screen is bigger
  • Content may only fit on mobile in landscape mode.

Apple introduced the ‘viewport’ tag to let the sites tell the mobile browser how big the screen should act on a particular page. The default was 700 pixels. A fixed width however created many issues – the content is mostly scaled, users have to zoom.

Using a ‘device width’ tag along with the ‘viewport’ tag solved the flexible width requirement – this allows the page to use the actual device width to render on the browser.

The best way to code on mobile and create a fluid flexible design is to use the following tag: <meta name=”viewport” content=”width=device-width, initial-scale=1”> this tells the browser that the site knows how to adjust to the device width and hence the browser does not need to scale.

Viewport + Device width tag

The final bit on this is the viewports units. Instead of defining elements in fixed units e.g. px, it is better to use percentages (%) to define them in relation to the size of the viewport. So for example, 25vw implies 25% of viewport width while 75vh means 75% of viewport height.

Finally, one may end up deciding to build a mobile site exclusively for the desktop. While each approach has its benefits, some additional challenges with building a site exclusive to mobile are

  • Ideally, all features need to be available on the mobile too.
  • With two sites, it is easy to get out of sync.
  • Often it may not be clear to decide when to serve the desktop vs. mobile site. Some tablets have higher screen sizes and resolutions than desktop.

3 simple rules for mobile only sites

  • Lets the user access the full desktop site from the mobile.
  • Put canonical URL in meta info – important from an SEO perspective.
  • Redirect to equivalent page on the mobile site, not to top level page.

On mobile, design should be able to work across various screen sizes.

As you transition a page to a mobile friendly page layout, the core things to look out to fix are – fixed width sizes and lack of percentages or viewport units. Of course, as you do this, you have to keep testing the resized pages.

Also, fluid layouts means, that you reflow to use available space on the screen. One tool that makes reflow easier is { display: flex;} which makes use of flexbox in CSS.

Media Queries

Using % and reflow is often not enough when adapting your site across a wide variety of screen sizes – this is because different form factors have different ‘best user experiences’.

You need fundamentally different designs for different form factors – it is best to divide the various form factors into 3 core types – phones, tablets and desktops and then need to use reflows to manage minor differences between screen sizes for each form factor.

Different form factors - Mobile, Tablet & Desktop

Even the treatment of portrait to landscape alteration can require different designs.

For e.g. from

Mobile - portrait layout

to

Landscape mode

The combination of fluid design along with adapting for the different scenarios is called responsive web design.

The primary tool for adapting to different scenarios is called ‘media queries’.

CSS3 allowed media queries to be added to the stylesheets depending on the environment (e.g. landscape / portrait mode) as shown below

media query: portrait

 

There are a number of properties available within media queries.

Available media query expressions

For e.g. a combination of orientation and width can help divide the breath of form factors into a few buckets..

form factor buckets

The layout below for e.g. changes depending on the available width

mobile portrait view

 

mobile wide portrait view

Or the one below which changes depending on device orientation

landscape mode

portrait view

One key tool to use while playing with various devices is to leverage the ‘device pixel ratio’ – this is the ratio between device independent pixels and the actual physical pixel on the screen.

device pixel ratio

In the image below, for each device, the first number is the number of physical pixels on the device, the second is the device pixel ratio (gives an idea of high resolution the screen is) and the third is the layout pixels actually passed into the viewport. The fourth number is the device independent pixels (for most mobile devices this is typically around 160).

understanding device pixel ratio

 

For e.g. the device pixel ratio, can be used to set the quality of the images to be displayed (e.g. higher pixel ratio calls for higher quality images).

media query: device pixel ratio

I found this great blogpost which brings out in a beautiful visual manner what exactly ‘responsive design’ means. Take a look – it is worth it.

9-basic-principles-of-responsive-web-design

 

Do read the other related posts which cover the notes for the other chapters of this course.

ps: to find all posts related to this post, searching for ‘mobile web development’ should help.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.