There for two basic ideas when it comes to working with presenting information for a mobile device. First, should it be an app, or a mobile website. If it is a mobile website, then users start wondering: should they Mobile Specific, Flexible, or Responsive Design to layout the website.
Mobile App vs Mobile Website
Of course, one of the aspects you have to consider is should you have a mobile app, or a mobile website.
A mobile app is specifically designed to run on a specific type of mobile device. Some are so specific that they may run on the phone or tablet version of the OS, but not that other format.
Mobile apps tend to be accessed more often. However, you have to design a mobile app for each system that needs it. This includes Apple, Android, and Windows. Additionally, depending upon your market, you may have to consider Blackberry – but get left out of “feature phones” which can’t do apps.
Mobile websites however are designed to run a browser that comes with the mobile device. All “smart” devices (tablets & phones) come with a web browser. However, it is more challenging for most users to bookmark and return to a mobile site. However, it is currently, generally easier to be found in search engines.
With mobile websites you also have to concern yourself with browser capabilities, sizes, and comparability between browsers.
Mobile Specific vs. Flexible vs. Responsive Design
Obviously, we are going to look at mobile web examples. But there are three different ideas as to how to best make a website that is mobile friendly.
Mobile Specific
A Mobile Specific design means that you are creating a second site, that isn’t designed for regular desktop web users. This means duplicating your content most likely.
If you’ve ever been to a site, and seen that instead of it starting www., it starts m., then you are most likely looking at a mobile version of the site. It offers both advantages and disadvantages.
For example, it means you can tailor what your users see by removing elements that may impeded the user’s experience. This could include rich media, drop down menus, etc. You can also split long articles up over multiple “pages” so they download faster, especially if you are using images, or other content that might take a while to load.
If you have a content management system (CMS) then many times you will be able to apply a second theme for the mobile users. This makes it easier, so you don’t have to build two sites.
A downside however is that if a user shares a link to the site, often desktop users won’t see your full site, only the mobile site. Usually sites like this will redirect mobile users who go to the desktop site, but often not the other way around.
Additionally, sometimes, you will also see sites that are of fixed dimensions, assuming that all mobile users will be the same. However, if you look at the image to the right, you will see a screenshot taken from a tablet, that was clearly designed for someone using a mobile phone. That made the site too small for the screen.
Flexible Design
Flexible designs work using percentages to layout the site. Since they are a percentage, as the screen size changes. This works well for some types of content, as it prevents the user from having to scroll left and right, and allows the layout to use the most screen space as possible.
Additionally, flexible layouts may use the CSS properties such as min- and max- widths, to make sure there is some control over the layout. You might see this in a section like below:
.container {
width: 90%;
min-width: 360px;
max-width: 960px;
margin : auto;
}
The use of the min- and max-, especially with width, means that the designer to make sure a design doesn’t move out to 1400 pixels if the user has a wide high resolution monitor, nor does it re-size down to one work on a line, utterly destroying the look of their site.
As you can image, it does make it a bit more difficult to layout the site effectively. Especially if you have images that won’t scale well, as part of the design.
Responsive Design
Responsive design has become more popular due to some of the problems found with flexible and fixed mobile only designs.
With responsive designs, the designer uses CSS media queries to offer up different sets of rules based upon what the browser know about itself. This means that multiple layout of the CSS of the site are needed, for each size you wish to support, however, the content stays the same.
An additional down side is you will sometimes need to hide info that you have downloaded, because it can’t be used on a mobile device. This can be inconvenient, but is not the end of the world.
However, the positive is that you can have two or three different layouts depending upon if the user has a old smart phone, new smart phone, new smart phone landscape/tablet, or tablet landscape/desktop – all by using the media query.
Using a media query can be as simple as something like below:
@media (min-width: 481px) and (max-width: 768px) {
/**** CSS Rules - Phone .../
}
@media (min-width: 768px) and (max-width: 1024px) {
/**** CSS Rules - Tablet .../
}
@media (min-width: 1024px) {
/**** CSS Rules - Desktop .../
}
Mobile Web Design Options was originally found on Access 2 Learn
