The basic layout of a site optimized for smartphones
If the Web we are accustomed to indulge ourselves with endless combination of layout and space, designing web pages for smart phones we review our creative ambitions, or at least resize the limited size of displays intended for viewing of our work.
Note: the video resolution varies, of course, depending on the model, most of the next generation smartphone has a display with a width ranging from a minimum of 240 to a maximum of 480 pixels. The most common resolution can count, in portrait mode, over a width of 320 pixels.
Forget layout then two, three or four columns! From my point of view the only possible solution in order to ensure good usability to content, is the single column design, where all content is organized along a vertical order cascade (ie, one below the other). When you create a web page, remember always, the most important thing is to ensure good usability and, more so when the display is limited to a smartphone, simplicity is always the best way forward.
As you can see, our structure is very simple and consists initially of three portions:
- Header: is the upper portion of the page and is designed to accommodate the site's logo and possibly a few other elements of the first floor;
- Page body: it is designed to accommodate the central portion of the actual content of the pages of our website;
- Footer: This is the final portion, at the bottom, where it is usual to put any credits, legal references, copyright notices, contacts, etc..
The navigation menu
The central portion of the page, in turn, will be used to house other areas (which vary depending on your needs).An essential element, of course, is the navigation menu through which to access other pages / areas of the site. If these are few (first solution) can directly create a toolbar with links needed, otherwise - for reasons of space - it is better to add a single button that, when clicked, shows a list of all pages / areas available (second solution).
The contents
Also, and above all, for the content you need to keep in mind the small screen of your smartphone. Again, therefore, the simplicity and linearity are, in my opinion, the best choice.
Avoid unnecessary frills graphics is a good rule of web design and it is even more in developing web pages for mobile devices and for questions related to the small size of the display and for reasons related to the available bandwidth (as well as having a cost, The 3G bandwidth is not always fast so it is best to focus on what is essential).
Even for the contents, therefore, suggest a cascade where the various layout elements (text, images, video) in a follow each other:
In the next lesson we will see how to build the HTML code on our website starting, of course, by the <head> (title, meta tags and CSS).
- <<Previous Lesson
- Help Index
- Next Lesson>>
 |
ASP (Advanced)
Full course for creating dynamic Web sites. From 39 €. |
 |
HTML (Course)
The markup language for the Web from 29 €. |
 |
Web Marketing (Course)
Site promotion, search engines and marketing. From 39 €. |