Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

The site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

• Avoid scaling to be able to read text
• Avoid scrolling back and forth to read every line
• Move the right column down, it is better to use the space for the main content.
• Hide the quick links to the individual letters
• Shrink unused space in the header.

What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup. I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result. Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

<link rel="stylesheet" href="./responsive.css" type="text/css">

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

@media all and (max-width: 1016px) {
  .art-sheet {
    width: 100%;
  }
  div.art-header {
    width: 100%;
  }
}

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

@media all and (max-width: 675px) {
  div.art-content-layout-row {
    display: block;
  }
  div.art-content-layout div.art-layout-cell {
    display: block;
  }
  div.art-content-layout-row {
    display: block;
  }
}

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

<div id="responsive-menu" onclick="toggleMenu()">
  ☰
</div>

I also added this css style and hid this div for bigger resolutions:

#responsive-menu {
  position: absolute;
  right: 5px;
  top: 15px;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
@media all and (max-width: 399px) {
  #responsive-menu {
    display: block;
  }
}

Here is the tiny javascript click event listener:

(function () {
  var menuOpen = false, menu, langSwitcher;
  window.toggleMenu = function () {
    menu = menu || document.getElementsByTagName("center")[0];
    menu.style.display = menuOpen ? "none" : "block";
    menuOpen = !menuOpen;
  }
})();

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
2. In the page markup I added this line inside the head element:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

That’s it. So now when someone saves the website as a bookmark, it looks like this:

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.

<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Prevent text size adjustment on orientation change. -->
<style>
  html {
    -webkit-text-size-adjust: 100%;
  }
</style>

• Chuvash
• Css
• Css3
• Javascript
• Pragmatic
• Responsive