Smartphone Layout
Designing Websites for Smartphones – Part 2
Forward: In this part of the series, we look at smartphone page layout.
By: Chrysanthus Date Published: 1 Aug 2012
Introduction
Header-Content-Footer
Most mobile (smartphone) websites have mainly text information. Such websites should be portrait to suit the natural way of holding the smartphone. The major layout for such a website is header-content-Footer. Of course you can modify this a bit; for example, by having two headers, and two footers. With HTML 5, the header is the header section element; the content is the article section element and the footer is the footer section element.
For a landscape website, you can float an aside element to the right of the header and/or another aside element to the right of the content and/or another aside element to the right of the footer. The floated information to the right should be less important than the information on the left. In this way, users, who can only view pages in portrait form would not loose much when they do not see the floated information.
Links and Buttons for Smartphones
The user touches the hyperlink or a button with his/her finger on the touch screen smartphone. So the height and/or width of a link or button should be at least the diameter of the tip of the average user finger.
The Home Page
The home page can consist mainly of links to other pages. Such links (displayed names) should indicate the purpose of the website. If there are few links, then the home page should have the links and some text, and maybe a small image. Alternatively, the home page can have several images (120px X 120px), each accompanied by text, where each image is a link.
The home page can also have a very small form. The ordinary desktop website does not have a form at the home page. If your website is such that you expect the user to send a message to the server or must login, then you should have a mini form in the home page, to quicken the user’s access to your server information. It is not very convenient to be clinking with the finger over and over on a smartphone website before reaching a form. So, a mini form of a frequently access FORM (<form></form>) should be at the home page.
The other pages should have mainly text, unless you are dealing with image or video gallery websites. Each page should have a link back to the home page. Any illustrative image or video will have to take a large part of the screen. You can still use smaller size image; however, the user may not appreciate that.
Small Number of Links
Everything being equal, the number of links for each page should be smaller than the corresponding number in the desktop website pages. This is because of the following reasons: a smartphone website is a summary of the desktop website; a link on a smartphone page is normally larger (taller) than a link in a desktop page as on the smartpohone, you use the finger, while on the desktop, you use the mouse pointer.
Coding
You normally will design your smartphone website using a desktop computer. You cannot use a smartphone to design the website because of the inconvenience of inputting data into the smartphone. The inconvenience comes because the buttons are close together; the user would probably use only one finger to type; and it may be difficult for the user to quickly identify the buttons.
Most smartphone screens are 320px X 480px. Now that you would not design your smartphone website on a smartphone, a good solution is to design the website on a desktop browser document page whose width is 320px and whose height is 480px. You use the body element of the desktop web page to fix these dimensions. Read and try (display) the following code that illustrates this; use your desktop computer and desktop browser.
<!DOCTYPE HTML>
<html>
<head>
<title>
My Smartphone Website
</title>
</head>
<body style="width:320px;height:480px; border:1px solid red">
<header>
<h3>The Header</h3>
</header>
<article>
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</article>
<footer>
<small>The Footer</small>
</footer>
</body>
</html>
In your design, do not use any HTML element whose width is more than 320px, the width of the smartphone; in order to avoid vertical scrolling at the smartphone.
With this scheme, horizontal overflowing (and hence horizontal scrolling at the smartphone is avoided).
The red border in the above code is to enable you see the size of the smartphone on the desktop computer. When you finish designing the pages for your smartphone, you can remove the border for the pages. You should remove the dimensions (width:320px;height:480px;) from the body element. It is the code (above) that will be sent to the smartphone as smartphone web page from a web server.
Similar design rules above, apply to the landscape websites, where width is 480px and height is 320px. Remember, the hope for landscape websites, now, is that most manufacturers will soon implement the portrait to landscape rotating feature.
A table (<table></table>) for a smartphone should be a smaller version (summary) of the corresponding table of the desktop web page. The reason is the same as for the other elements: there is little space for a large table; this means that the number of rows and columns in the smartphone table should be smaller than the number of rows and columns in the desktop table. This means that you have to omit some of the rows and columns of the desktop table. Again, avoid a resulting vertical scrolling.
A nested table (table inside a table) takes long to download for a desktop website. So for a smartphone, it would take even longer. So, avoid nested tables for smartphones.
Scrolling Downwards
For a desktop web page, scrolling is not really a convenient activity. So, for a smartphone, avoid pages that are more than 3 viewports (screens) long (tall).
That is it for this part of the series. We stop here and continue on the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT