Overview on Designing Websites for Smartphones
Designing Websites for Smartphones – Part 1
Forward: In this part of the series, I give you an overview on the designing of smartphone websites.
By: Chrysanthus Date Published: 1 Aug 2012
Languages for Coding Smartphone Websites
There is an old smartphone language called, WML, and there is a new one called, XHTML Mobile Profiles. Also, there is HTML5 for smartphone coding. This series uses HTML5 because it is what is used for desktop websites, today. HTML5 works with the languages, CSS3 and MCMAScript. So, if you are already a professional with HTML5, CSS3 and MCMAScript, then it is not necessary that you learn a new language in order to design websites for smartphones.
You should have good knowledge in desktop website design before reading this series. If you do not have that knowledge, then as a minimum, read the following first three series; as a maximum read the next three series as well.
Like with the desktop computer, the smartphone has an operating system. Some companies have written their own individual operating systems, for smartphones. To design a website for a smartphone, you assume that the user (owner of smartphone) already has his/her smartphone with an operating system already installed. If he/she has any problem with the operating system, he/she has to consult his/her dealer (shop) or a technician.
In order for a smartphone user to browse a website, a browser should be installed in the smartphone, just as with desktop computers. Again, that is a problem he/she has to solve with his/her dealer (shop) or technician. Some of these browsers can be got free from the Internet. An example of a free browser for the Android Operating System of the Andriod smartphones, is Mozilla Firefox 4. Smartphone browsers are different from desktop browsers; however, they may have similar names and similar features.
Just as the desktop computer has the memory (RAM) and the hard drive (disk), the smartphone also has corresponding components, but their capacities (sizes) are very small.
The microprocessor power of a smartphone is smaller (slower) than that of a desktop computer.
The speed at which the smartphone receives and sends out signals is very small compared to that of the desktop that is connected to a standard Internet line. The word, signal, here refers to web pages received by a smartphone in electrical form (waves) and data sent out by the phone still in electrical form (waves). We say a smartphone (or mobile phone) line has a smaller bandwidth than the normal desktop (broadband) line.
A typical desktop display screen size is 1024x768 pixels. A typical smartphone display screen size is 320 X 480 pixels.
Summary of Content
As you can see, the essential features of a desktop computer are available in a smartphone, but they are small. So the smartphone content (user information) has to be a summary of the corresponding desktop content.
Smartphone users normally use their smartphones when they are in a vehicle, sitting or standing temporary in a place or even walking. That is, they normally use their smartphones when they are in transit, not when they are steady in their homes or offices. Warning: Do not use your smartphone when you are driving. So, smartphone users do not have the patient for long-time browsing. It is not as convenient to input data into a smartphone as it is with the desktop computer, as the user has to input data with his/her finger on a very small device.
So the number of web pages for the smartphone website should be small, compared to the number of pages for the corresponding desktop website. Also, the content of a smartphone web page should be much smaller than the content of the corresponding desktop web page. Some desktop web pages should be omitted or combined and summarized for the smartphone page.
So, only the very most important information are hosted in a smartphone website.
Less is more on a mobile (smartphone) device; less content equals more likely to read.
Users of smartphones, use their mobile smart phones to do similar things that desktop computer users use their computers to do on the web. So, today, you should have two websites for any important business (organization): One large website for the desktop computer and a corresponding one for the smartphone. The website address for a desktop website is typically, www.mywebsite.com . The corresponding website address for the smartphone website should be, mobile.mywebsite.com ; only the subdomain name changes (from www to mobile). These two sites can be hosted in the same old web server (and even in the same disk). URLs for desktop websites and smartphones are the same in construction.
The desktop website should have a smartphone website hyperlink in the home page to indicate to the client that a smartphone website exist, for him/her to use when he/she wants quick access to the site information.
The desktop site and mobile (smartphone) site can have the same database.
The term, viewport, means the display screen area of your smartphone screen or desktop computer screen.
Portrait and Landscape View
A smartphone is normally held in the portrait form where it is taller than it is wide. The other form is called the landscape form (wider than tall). Some smartphones have the capacity that, when you rotate them from the portrait to the landscape form, you see the right hand side of the web page that was not displayed at the portrait form. Of course, with such features, you loose the information that was lower down in the portrait form, everything being equal. Not every smartphone implements such rotating capabilities.
If the content of your website is essentially text (most websites are), then design the mobile (smartphone) website in a portrait form. It is convenient for the smartphone user to hold his/her phone in the portrait form. So design a fundamentally text smartphone website in portrait form as it suits the convenient handling position of the user.
Such a smartphone site should not have many images and should not have large images as many images and large images take long to download (move from server to phone). Such a site should have few and short sound files as these also take long to download, in the same way that images do. If a smartphone website (like many websites) do not need any sound file. Do not place any sound file there.
The content of most websites are essentially text and this suits the smartphone in its normal portrait position.
All videos are landscape in nature. So a video gallery website suits a smartphone in its rotated landscape position. The hope here is that all smartphone manufacturers will implement the new rotating landscape feature. So a video gallery website intended for smartphones is a landscape website. Note: videos take long to download (move from server to client device) on a desktop computer and too long to download on a smartphone. So, if you want to watch a video on a smartphone from a smartphone website, you have to be patient in the download process. After downloading, watching the video should not pose a problem. To be sure that the video would not pose a problem when playing, it should be of low definition (low resolution). High definition videos take longer to download and need more device resources to play. So, today, your smartphone videos should be of low definition with small size (bytes), so that they download faster and they play conveniently.
Some images are portrait in nature and others are landscape in nature. If all images were portrait in nature then an image gallery would suit a smartphone in its normal portrait position. If all images were landscape in nature, then an image gallery would suit a smartphone when rotated into the landscape position. In this case, if the user’s smartphone does not have the rotating landscape feature, then the user would have to scroll to the right to see the right side of an image. Since an image gallery website would have both portrait and landscape images, you cannot conclude that an image gallery website suits a smartphone in its normal portrait position or in its rotated landscape position.
As a hint on what to choose, if your image gallery has more portrait pictures than landscape pictures, use portrait web pages; for the opposite, use landscape web pages.
A song takes long to download into a smartphone. However, there are users who are patient. You can have a smartphone music website. A smartphone music website is actually a good thing despite the slow download time; this is because people like to listen to music when they are in transit. Apart from the music, the rest of the information in the website should be essentially text. So, a smartphone music website should have portrait web pages to suit a smartphone in its normal portrait position.
Users generally do not really like scrolling on the desktop computer screen. The situation is worse with the smartphone. So, avoid scrolling, especially horizontal scrolling, for a smartphone web page. The ordinary user would tolerate some vertical scrolling on a smartphone web page, but not horizontal scrolling.
Audio, image and video
Audio (sound), image and video are good things for people, but they take long to download. So, avoid using them in smartphone text content websites. However, whether or not you use them in smartphone text content website or in their own (image or video) smartphone websites, they have to be small in storage capacity (bytes).
Reduced Levels of Hierarchy for Content
People normally use smartphones for quick access of the web. So, your hyperlinks should not really lead the user more than 3 pages deep. So, a user can click a link at the home page, for a new page to open. In the opened page, the user can click another link to open another page. You design should not really go beyond that. So all the pages in the hierarchy of a desktop website should not be in the hierarchy of the corresponding smartphone website. You either omit some pages in the hierarchy or you combine some into one and still summarize greatly. Well, nothing stops you from going more than 3 pages deep, but avoid that whenever possible.
A smartphone is like a small computer; so its website content should be small (summarized) and its coding (HTML5, CSS3, ECMAScript) should also be small.
Well, we stop here and continue in the next part of the series.
Related LinksMajor in Website Design
Web Development Course