Designing for Mobile brings in some interesting problems. Some of these problems are true regardless of if you are trying to develop via a fixed or a flexible size page. We’ll look at overcoming a couple of common problems, and then building a basic template to use.
Auto Scaling of Web Pages
For example, most modern, high-end mobile devices will attempt to show you the entire page, even if the width of the page is larger than the device you are on. It will simply scale the website to fit. This makes the text much smaller and harder to read.
Luckily this scaling issue has an easy fix. Make sure the following meta tag is included in the head tag to force the web browser to not scale the pixels.
This tells the viewport, the screen we view on, that we want the first scale to be 1, or 100%. The user can scale larger or smaller after the initial page draw, but a little bit at least, we are making sure that our site loads appropriately.
What is interesting is if we do not use this, and the mobile browser scales the content, it will not adjust for responsive layouts.
So your start of your HTML document should look something like:
....
Of course, you could have extra tags for linking to your style sheet, other meta tags, etc. This is just to make sure you know where this tag should go. (All meta tags should go between the head tags of your document.)
Navigation Menus
In many websites you will see navigation on the left side of the page. Sometimes it is a sub navigation, sometimes it is the main navigation. You usually see it as the main navigation if there are a lot of links.
However, this can cause a problem. If you have a responsive site, or flexible, it will make the navigation get narrower and narrower. A responsive site will eventually move it to its own row (you hope) however you cannot know.
Therefore, the most common solution is to place the navigation on the top. This can provide other problems if you are using a flexible layout. Your navigation can move to multiple rows and/or get narrower as the screen sizes get smaller.
Too keep the buttons from getting too small, a designer can always use the min-width attribute. This way, you can keep the buttons from getting too small. For example:
.nav a {
/* rules for navigation links */
min-width: 120px;
}
In a responsive design, you have more control, as you can move to a separate row, and hide secondary menu options that are not relevant for mobile users. Of course, that is one thing that designers must decide, how can we determine what a mobile vs a desktop user will need – and should we segregate our menu options by device type?
One option that fixed and mobile designers often move to is having a site map page that serves as a central hub for the navigation. Each page has a menu button on it, that just takes the user to this page. This page is simple, and would therefore load fast for the end-user, as it is just simple stylized buttons, maybe some basic JavaScript if you want to have stylized sub menus.
Code for end pages:
Menu
Code for menu.htm:
- Top Menu
- Sample Page
- Sample Page
- Top Page2
Mobile Design Problems Browser Pretending & Usability was originally found on Access 2 Learn
