Introduction: Make Your HTML-Website Suitable for Mobile Devices

By plus.google.com/1042583010234944
About: Nowadays attempting creating small apps to dive into the world of programming and Software Development

First I was not satisfied when I visited a desktop optimized Website on a smartphone.
The fonts are too tiny, you have pan and zoom in/out all the time, the links are always hard to target. So I had to do some research how to make a website mobile suitable in relation to the display size.
Responsive (Web)Design is one possible solution.

The Good:
-Only basic HTML/CSS knowledge is required
-No additional App Programming/Installation


The Bad:
-You can't make (easily) a CMS created Website into a responsive site.
-I haven't tried it yet, but there is a CMS OS Project with responsive functionality, take a look at: http://www.fork-cms.com/ 

Step 1: Some Illustration

A responsive website behaves like a spring that fits in any size of space. You can stretch and compress it. If you change the structure, the spring itself doesn't affect on number of foldings or windings (threads). The 'information' remains the same.

You don't have to write everything new. A HTML-file contains information of a website, the CSS file defines the layout structure.  
That means you only have to add a new tag in an existing HTML file and extend the CSS Stylesheet.

Step 2: Tools You Need

Special software is not required. You can work with the included Windows/Linux Text Editor or use a Freeware Editior (eg. Notepad++, gedit....)
For this tutorial I reused a HTML design layout provided by SelfHTML (a HTML learning Site, unfortunately only in German).
http://de.selfhtml.org/layouts/nr10/index.htm
So I asked and got the permission from the author, big thanks to him!




Step 3: Add One Code Line in the HTML-File

At first you add a meta tag into your HTML-File between the <head></head> tags:
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

This codeline defines the default zoom for mobile devices.

Step 4: Media Query for Mobile Devices

A media query has the structure like:
<code>
@media screen and (max-width: 481px){


  /*write your CSS-Code here*/


}
</code>


'@media screen and (max-width: 481px)' defines the CSS layout for screen sizes with 481px max. (CSS Resolution) and below.
For example a FullHD smartphone (portrait view) has a width of 1080 pixels, but it's not the same like the CSS-resolution.
To convert the "smartphone pixels" into "CSS pixels" you have to consider the pixel ratio.
A 1080p smartphone has a pixel ratio of 3 => 1080/3 = 360px (CSS-resolution)
At wikipedia, there is a list of the most common mobile devices that shows the resolution + pixel ratio:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Thanks to the testers!

So we take a look at 'screen.css' (located at .../CSS/screen.css) and add a media query with new structure definitions after the existing CSS definitions.
The other css files are for older browser versions and for printing purposes.



Step 5: Use Dynamic Units to Keep the Site Responsive

In some cases it's better to use percent units or avoid static px, inch, em...etc.
Percent statements allow to keep the site flexible in relation to the screen size.


In this case I've deleted/commented the static 640px width in the "#body" element. 

Step 6: Define a New CSS-Structure for the Navigation Links

To ease targeting the links I have added some margin and padding spaces between them.
The borders (border: 1px solid white;) around the link-elements give the look of buttons.   


You can align the navigation elements to the left, right or center, like shown in the second image.  

Step 7: Summarize All Textcolumns Into One Single Column

In portrait view a smartphone has not much horizontal space. So you have to stack the columns into one column vertically.  In this example we have two textcolumns "#main" and "#subnav".

If you "float" both columns to the left, the "#subnav" column stacks on the top of the "#main".
I have defined the two columns with the same structure definitions, so that they have the same width, alignment and margin spaces.


~2.7% margin space seems to be visually more accurate (compare the border space on the left and right). Unfortunately I don't know where the ~0.6% have gone. Sometimes you have to estimate and experiment with the values.


Step 8: Test and Finalize Your Website

Testing is important, every (mobile) browser has a slightly different behaviour.


Testing Methods:

-The best way to test a responsive website is to use real mobile devices. You can go to an electronics store to check out your site with several kinds of smartphones and tablets. 


-You can use an emulator to test a website,  take a look at:
http://www.mobilexweb.com/emulators


-Firefox/Chrome has a built-in Development-Tool, so you can check out the  look of a website in various screen-sizes, but it doesn't simulate a real mobile device.

FF: start the tool by pressing Ctrl+Shift+M and select the screen size
Chrome: First you start the developer tools by pressing Ctrl+Shift+I. A cog-wheel appears right-below of the dev-screen. Click on the Cog Icon and goto the overrides tab. Select User Agent and Device Type.


Sometimes CSS definitions have to be written in a seperate CSS File for a certain (mostly older) browser. My tutorial is not perfect, it doesn't probably work perfectly on some browsers. So it's your turn to improve the code.

At last here is the edited html-layout of this tut attached as zip.   


Attachments