Web Design Tips and Tricks

Taking Your Website Mobile

Taking Your Website Mobile.

You might have tested your website on every computer browser you can find, but nowadays that’s just not enough. Nowadays the web is getting more and more mobile – it’s being used on mobile phones, PDAs, and all sorts of other small devices that can be used on-the-go. You need to allow for these visitors as well, but that’s easier said than done.

So What’s the Problem?

Well, unfortunately, there are dozens of manufacturers of mobile devices, and each one produces hundreds of different models. There has been little standardisation among mobile web browsers: basically, the only real way to check whether your website will work on one or not is to test it. As you can imagine, with all the devices out there, that’s something that you could never really do – especially considering that new devices come out every few months or so.

All you can do, then, is make your site generally suitable for as many mobile browsers as possible, instead of trying to alter it to work perfectly with specific makes and models. When you do this, there are a few basic rules to remember.

Make Things Work Without Images.

Many mobile browsers can’t display images, which means that you’re in trouble if your site uses images to display vital information or to make a form work. You need to test your site with images turned off to make sure everything still works. If you’re using images on a form, you might consider replacing them with Javascript to insert images – as most mobile devices don’t support Javascript, this approach won’t cause any problems for them.

Be Light on Bandwidth.

Most mobile devices are still accessing the web at sub-dialup speeds – that makes your page’s loading time very important to them. Sure, they’re not spending time downloading images, but they still have to download all of your page’s source code before you can display it. You should make sure that your source code is as compact as possible, not repeating itself or using long-winded methods of doing simple things.

This is one of those times when it’s good to know HTML and have written your code yourself, but if you’ve used a WYSIWYG editor then you should at least try running the code through HTML Tidy, to see if you can reduce its size at all that way.

Watch Out for Screen Width.

You’ve got to realise that mobile devices have a much smaller screen width than even the tiniest computer monitor. This makes it very important to make sure that your website (without images) will work on very small screens – the biggest problem here is tables, which never work well. Better compatibility with mobile devices is yet another reason to switch your site over to valid XHTML and CSS, instead of relying on old table hacks for layout.

The Rewards.

If you can take your website mobile successfully, then there’ll be all sorts of rewards. Mobile shopping is still quite new, and there are lots of people trying it out for the first time and starting to build loyalty – you can get a lot of long-term customers if you get into it now. People are also far more likely to pay for small pieces of information or downloads, since they can pay quickly and easily using their phone instead of a credit card.

Of course, even if you’re not selling anything, a mobile website can still be good promotion. Mobile users are especially likely to use your website to try to get your phone number, or directions to where you are – do you really want to let these people down? Anyone who’s taking the time, trouble and expense to look up your site on their phone is likely a loyal (or potentially loyal) customer, and you want to make things easy for them.

 

 

 Article index
 
5-Simple-Steps-to-Accepting-Payments
5-Steps-to-Understanding-HTML
10-Easy-Ways-to-Promote-Your-Website
5-Ways-to-Avoid-the-1998-Look
6-Reasons-Why-You-Need-a-Website
7-Ways-to-Make-Your-Web-Forms-Better
Ads-Under-the-Radar-Linking-to-Affiliates
AJAX-Should-You-Believe-the-Hype
All-About-Design-Principles-and-Elements
An-Introduction-to-Paint-Shop-Pro
An-Issue-of-Width-the-Resolution-Problem
A-Question-of-Scroll-Bars
Avoiding-the-Nuts-and-Bolts-Content-Management-Software
Beware-the-Stock-Photographer-Picking-Your-Pictures.
Building-a-Budget-Website
Building-Online-Communities
Clean-Page-Structure-Headings-and-Lists
ColdFusion-Quicker-Scripting-at-a-Price
Column-Designs-with-CSS
Content-is-King
CSS-and-the-End-of-Tables
Cut-to-the-Chase-How-to-Make-Your-Website-Load-Faster
Designing-for-Sales
Designing-for-Search-Engines
Dont-Be-Scared-Its-Only-Code-HTML-for-Beginners
Dreamweaver-The-Professional-Touch
Encryption-and-Security-with-SSL
Finding-a-Good-HTML-Editor
Focus-on-the-User-Task-Oriented-Websites
Fonts-are-More-Important-Than-You-Think
Free-Graphics-Alternatives
FrontPage-Easy-Pages
Hints-All-the-Way
Hiring-Professionals-5-Things-to-Look-For
How-Databases-Work
How-the-Web-Works
How-to-Get-Your-Website-Talked-About-on-Blogs
How-to-Install-and-Configure-a-Forum
How-to-Make-Visitors-Add-You-to-Their-Favorites
How-to-Run-Ads-Without-Driving-Visitors-Crazy
How-to-Set-Up-Your-Hosting-in-5-Minutes-Flat
IIS-and-ASP-Microsofts-Server
Image-Formats-GIF-JPEG-PNG-and-More
Its-a-World-Wide-Web-Going-International
JSP-Java-on-Your-Server
LAMP-The-Most-Popular-Server-System-Ever
Making-Friends-and-Influencing-People-the-Importance-of-Links
Making-Searches-Simple
Offering-Free-Downloads-on-Your-Website
Opening-a-Web-Shop-with-E-Commerce-Software
Perl-Cryptic-Power
Photoshop-a-Graphic-Designers-Dream
PHP-Easy-Dynamic-Websites
Picking-a-Colour-Scheme
Printing-and-Sending-the-Two-Things-Users-Want-to-Do
Putting-Multimedia-to-Good-Use
Python-and-Ruby-the-Newer-Alternatives
Registering-a-Domain-Name
Registering-Your-Users-by-Stealth
RSS-Really-Simple-Syndication
Setting-Up-a-Mailing-List
Setting-up-a-Test-Server-on-Your-Own-Computer
Some-Places-to-Go-For-More-Information
Taking-HTML-Further
Taking-HTML-Further-with-Javascript
Taking-Your-Website-Mobile
Text-Ads-Unobtrusive-Advertising
The-5-Principles-of-Effective-Navigation
The-Art-of-the-Logo
The-Basics-of-Web-Forms
The-Basics-of-Web-Servers
The-Case-Against-Flash
The-Confusing-World-of-Web-Hosting-Making-Your-Decision
The-Evils-of-PDFs
The-Importance-of-Validation
The-Many-Flavours-of-HTML
Theres-More-than-One-Web-Browser
The-Smaller-the-Better-Avoiding-Graphical-Overload
The-Top-10-Biggest-Web-Design-Mistakes
The-Web-Designers-Toolbox
The-Web-is-Not-Paper
Time-for-User-Testing
Titles-and-Headlines-Its-Not-a-Newspaper
Tracking-Your-Visitors
Understanding-Web-Jargon
Uploading-Your-Website-with-FTP
Using-Flash-Sensibly
Using-Quizzes-and-Games-to-Get-Traffic
VBScript-Javascript-Made-Easy
Websites-and-Weblogs-Whats-the-Difference
What-Do-You-Want-Your-Website-to-Do
What-You-See-Isnt-Always-What-You-Get
Which-Database-is-Right-for-You
Why-Doing-It-Yourself-is-Best
Why-Java-Will-Drive-Your-Visitors-Away
Why-Word-is-Bad-for-the-Web
Why-You-Should-Put-Your-Content-in-a-Weblog-Format
Why-You-Should-Stick-to-Design-Conventions
Working-With-Templates
Writing-for-the-Web
Site Map