Creating a mobile version of your website is essential if you want it to appeal to a wide audience. Not all visitors will access your website from their computers. Many people are now using mobile phones to access information on the go. Statistics show that mobile access to the Internet is growing faster that any other market segment. Consumer-driven companies now offer mobile-friendly alternatives to their main websites.
Top 7 Mobile Web Design Principles to Consider
Your current website may look fine on desktop computers but will not display correctly on mobile phones. The simplest way is to create a mobile version of your existing website. If you want to start from scatch a mobile web design requires big changes in layout, design and construction. Here are some basic mobile web design principles to consider before building your own:
1. Create a simple layout
Mobile users want their information fast. They don’t want to spend a lot of time scrolling vertically and horizontally to access information. Place all your most important information at the top of the page e.g. Logo, contact info, navigation. Mobile screens are much smaller than computer screens so arrange your content in a single column layout. This can easily be done with cascading style sheets.
The most common phones can be categorized according these screen sizes:
* 128 x 160 pixels
* 176 x 220 pixels
* 240 x 320 pixels
* 320 x 480 pixels
Mobile phones don’t use a mouse so try to minimize the amount of scrolling.
2. Edit your content
Mobile users want to access information quickly therefore your content should be easy to read and navigate. Consider using headlines and suitable font for easy viewing. Edit your content so you only display your most important information.
3. Create clean code
A mobile website can easily be designed using XHTML and CSS. Make sure your pages are also optimized for the search engine spiders by including appropriate keywords in the title tags, description meta tags, heading tags and file names.
4. Reduce number and size of images
Keep in mind smart phone users are paying for bandwidth. The longer they wait for images to load the more money they’ll have to spend. Limit the use of images and graphics. If you do use images they should be in .jpeg or .gif or .png format because these tend to have small file sizes. Compress your images to avoid zooming. Some mobile users may surf the Net with images turned off so make sure you include alt text.
5. Minimize page size
Mobile users usually get charged per KB of mobile web data therefore page sizes should be kept simple and small. The maximum page size for a mobile page is only 20 Kb, so try to fit within this size and consider using less than 10 Kb.
6. Link pages
Mobile phones make it much harder to navigate websites so make use of back buttons and links. Make sure all pages are linked together so there are no dead ends.
7. Create a subdomain
Registering a separate domain name is not necessary for creating a mobile web design. It can hurt your site’s overall branding and confuse users. You’ll make it difficult for people to remember both your main website URL plus your mobile URL. You’ll also have to invest more time and effort promoting both sites.
Consider creating a subdomain such as m.domain.com then use php redirect code to automatically detect what application your visitor is using to access your main website. If it’s a mobile phone they will be redirected to your mobile site. If it’s a computer browser they’ll access your primary website.
Test
Before releasing your mobile website to the public validate your code and test how it displays on various phones by asking your friends. You can also run it through an online emulator to give you a basic idea of how it will appear to mobile users.
If you follow these 7 principles you’ll be able to build a successful and usable mobile web design. If you currently don’t have a mobile website, you’re losing out on extra business.
Consider building one today!
Related articles
Top 7 Reasons to Create a Mobile-Friendly Website
7 Ways To Create A Mobile Version Of Your Website
************************
If you need help creating a a mobile version of your website please visit:
Mobile Web Design
Herman Drost is the CEO of Website Design Maryland
Hey great post- I definitely agree with you there.
Fantastically beneficial thank you, It is my opinion your readers may very well want further writing like this carry on the good hard work.
Truly entertaining bless you, It looks like your followers could quite possibly want a good deal more content similar to this continue the great hard work.