Tutorials Web Design

How to Make a Mobile Website – 6 Easy Tips

4.5/5 (2)

Accessing the web through mobile handheld devices is a usual practice these days. It's apparent that people hooked to the Internet via their phones are on the huge rise. Furthermore, lots of consumer-focused companies have already realized how promising the mobile platform is and have by now equipped themselves with a mobile-friendly alternatives to their primary websites so that they will as well provide an accessible user experience on mobile devices.

In fact mobile web browsing is not a passing fad, it has actually become an absolute necessity, even the new Internet standard. So if you haven't yet set up your own mobile site, we'll today focus on how you can create a mobile version of your site running through various important options and basic techniques you can employ to make your mobile site work successfully. Besides, you might be interested to explore the most conspicuous mobile web design trends for 2011 and find some graphic approaches to consider for your custom mobile designs.

Now having got some of the theory out of the way, let's turn our attention to more practical matters. There is a special procedure involved in designing a mobile website. The easiest way to build your mobile site is to modify your existing website to make it compatible for mobile handsets. If you decide to do so, expect that there will be big changes in terms of layout, design and construction. Here are some principles you should take note of before proceeding to build one of your own:

1. Layout

It can be time consuming to browse through a mobile site, so remember to put all of the most important information you want mobile users to see on the top of the page. And don't forget to include your company logo being customized for a mobile site. Make sure to minimize left/right navigation, which is difficult on a phone, and instead arrange your content in a single column layout. Also you should minimize the use of tables, but if you do need to incorporate them, use no more than 2 columns, and avoid row and column merging.

2. Content

You should make sure that the information on your website is easy to read and navigate, and doesn't take the visitors much to figure out, since they're probably on the go while looking at your mobile site. Having finally selected what part of the content should be displayed on mobile, tailor your site menu adjusting text to avoid zooming. As for the typography used to render the content, consider using headings to control font sizing.

3. Coding

There is no really any special coding required for your actual mobile site. It is much easier if your mobile site is coded using either XML or XHTML. You may also build your site with the most basic HTML and CSS coding possible. Title tags, description meta tags, heading tags and filenames should be carefully crafted with target keywords to maximize the little optimizable content available.

4. Images

Most mobile phones would take forever to load heavy images. So use images and graphics as little as possible, only where contextually relevant. And if you do wish to put images on your mobile website, it should be in .jpeg or .gif or .png format as these files are pretty much light-weight. Plus make sure to compress your pictures to avoid zooming. And one more, today nearly all current devices display images, however, users may browse with the images turned off. So always use the alt text which is a recommended practice.

5. Page Size

When assigning a style for a mobile website, it's very essential to keep it all simple and page sizes small. Mind that the maximum page size for a mobile page is only 20 Kb, so make everything fit and if possibly use less than 10 Kb. Keep in mind that the users usually get charged per KB of mobile web data.

6. Page Links

A good mobile website design provides back buttons and links. While it is rather difficult to get around on a mobile phone and many phones are not equipped with back buttons, try to provide them to escape dead ends. Plus make sure that all pages are linked to other pages. And one more, if it is actually a phone site why not invite to a call making it a link.

Few more tips:

  • Your URL says much about your mobile website. So think of using the better .mobi domain which indicates a mobile experience instead of .com, .edu, .org, etc. that stand for a desktop web experience.
    Plus, you may also want to think on having your mobile version on a subdomain - that's the way many websites do it. For example mobile version of Digg is http://m.digg.com/ (the ordinary is http://digg.com/)
  • Test the mobile version of your site on multiple devices (and preferably of different platforms) since it is the only way to be really sure that your site provides a good mobile experience. IF you do not have an access to multiple devices (which is a common thing) you may use one of these web-based emulators, such as the iPhoneTester.com for example.
  • Make sure that you have one of the refreshingly updated site, otherwise your mobile website won't catch up with the growing amount of mobile web surfers.
  • Since most mobile browsers aren't compatible with Flash, most video and audio players, JavaScript, frames, pop-ups, and other things that people like to use to spice up their sites, they are completely unusable for those who come to your website through their mobile phones.
  • It would be also very convenient to have variable screen sizes and resolutions of your mobile website to scale page elements by screen size, rather than setting fixed pixel widths for page elements. Do consider that different mobile phones have different screen sizes.

If you follow the foregoing standards carefully, there is a pretty good chance that your mobile website will be able to render all essential information in a manner that is basically usable and efficient for your customers. Thanks for being involved, and let us know what you think about the increasing role of mobile Internet by commenting below.

And don't forget to check out Designing and Building a Mobile Website.

  • Bill

    Nice overview of mobile web design. It can be overwhelming for small businesses or organizations with low budgets so using a template is a great idea to get on board sooner rather than later.

    The screen size norm is changing for the average cell phones (getting better from 176px to 240/320px wide) so desgning for the iPhone/Blackberry layout like your selection of mobile templates makes sense as the easy way to go.

    Having a mobile website on a .mobi domain is a good choice. It’s the new alternative to the m., /mobile, /wap, /etc different mobile content conventions out there. Probably the smartest move is to use many/all of them for at least a landing page/redirect to quickly catch future guesses/typeins.

    Mobile web use is bursting onto the scene and will surpass desktop use because so many people will have a mobile device with them 24/7. It’s just so convenient and a great extension of the web and in some cases replaces the standard web for some new applicatuions but in most cases it complements the standard website.

  • Bob

    Good information, however several sites I have authored, include video and javascript Navigation buttons and they all work fine on iPhone and iPad plus Motrola Droid. Have not tried on other phones.

    Is there code to put on the site so it directs browser to the iPhone/iPad section of the website?

  • Anto

    Pls can some tell me how creat a site while using my phone browser

  • Eduardo Riveros

    Very good information. Other languages compatible for the mobile sites is html5 code , but not extended in the “world webmaster”. Very important is the plugin that write Jay.

  • Herbert

    Excellent tips. Thanks for the information

  • Tom

    Thanks for the information. I also find interesting website that might help you with the design part http://www.mobilewebshowcase.com

  • Gazzayaz278

    to much info

  • website for mobiles

    Extra ordinary features are added in this blog, every time new and useful article are published in this blog. Really supportable to the future, i would like to subscribe this blog.

  • portland transmission repair

    Templates makes sense especially a for a business with little development budget. Since the already sketchy “standard” for mobile site design is changing rapidly it makes sense to design for what was the “latest and greatest” six months ago.

    I wonder how these templates stack up against the W3C Mobile validator? I was able, after many hours, to get a page 100% validated… for Portland transmission repair

  • Cfreema7

    This was nice, but nothing new here. To make this useful, how about listing screen resolutions? What about screen rotation, what happens when the user turns the phones sideways and layout expands. Tips to accomodate or prevent changing layout would be helpful. Also, how to direct users from desktop viewing to mobile viewing, and vice versa? A scaled down mobile site may look great on the phone, but awful on screen.

  • Csdrfgderfge

    Nice tips, really usefull s***

  • ben chaplin

    cfreema7 is a twat 🙁

  • BenChaplin

    @Csdrfgderge is an absolute dickhead, this is no place for abuse you prick