Responsive UI

Recently I spent some time on learning and practicing responsive UI design. That basically means “making web site mobile friendly”.

In search for a solution

First I started with Twitter bootstrap. The problem with Twitter bootstrap is that it brings ~100 KB CSS file (and lots of other junk if you are not careful).

Which means that when user’s smartphone opens my Twitter-bootstrap backed web page, it needs to download extra 100 KB. Which makes page load slower. Not surprisingly, Twitter does not use their own Twitter Bootstrap CSS.

Metro UI seems like a bit better alternative (smaller CSS file size at ~10 KB). Still, it is extra file to load.

On the other hand, google’s pages do not plug extra files in but instead inline all CSS and JavaScript code into page HTML.

Less HTTP requests means better performance. It is also easier to maintain inline CSS (no problems with caching of different versions of separate CSS files). So I decided to use the same as Google does: inline all CSS code into page itself and load only CSS code that is needed.

What is needed exactly?

It turned out that only few things are needed to convert page into mobile-friendly responsive UI:

1. Add this line to page head:

   <meta content="width=device-width,minimum-scale=1.0" name="viewport"/>

   That makes page elements aware about actual browser size (that is small on mobile phones) and render accordingly.

2. Do not define fixed width on div table and elements, especially if width is more than ~200px. If defining fixed width cannot be avoided, define width conditionally, depending on the screen width. For example, see how it is used on PostJobFree home page:

   @media screen and (min-width: 47.5em ){
       .leftColumn { margin-right: 10em; }
       .rightColumn { position: absolute; top: 0; right: 0; width: 110pt; }
   }

   In this example, if screen size is more than 47.5em, then it has enough space and we can define fixed sizes for leftColumn and rightColumn CSS classes. Otherwise, the screen is too small (mobile) and should be rendered without these width restrictions.

3. Keep pages simple by removing barely useful elements of UI. That’s a good practice for any UI design.

How to see if your web site is mobile friendly?

• Open web page in Google Chrome
• Press Ctrl-Shift-i.
• Press Esc in order to “Show drawer”.
• Find “Emulation” tab, select your favorite mobile device (e.g. “Google Nexus 4”) and click “Emulate” button.

Read more about mobile emulation: https://developer.chrome.com/devtools/docs/mobile-emulation