A Beginner’s Guide to Mobile Website Development
The correct approach to mobile website development
Building a mobile website starts with determining the approach you will take. Your approach in turn will depend to a great extent on who your audience is. There are three basic ways to approach website development:
- Responsive: On responsive site the page URL, HTML, images and everything remains the same for mobile and desktop devices but the CSS gives different rules based on browser width.
- Adaptive/Dynamic Serving: With these sites the URL remains the same for mobile and desktop devices but the server sends different HTML and CSS based on what type of device is requesting the page.
- Separate Mobile Site: Every desktop URL has an equivalent mobile optimized URL.
Responsive websites are the easiest of the three options to implement and the option that is recommended by Google. As many of those developing mobile websites already had existing site, a big percentage of mobile websites were developed by making the original website responsive. There is a trend now for developers of new websites to make the mobile version first. This is because in general it is easier to adapt a mobile site to a desktop version than the other way around. However this isn’t an option for those with existing sites.
Some basic guidelines for mobile website development
There are some mobile website development guidelines that should generally be followed when creating a mobile website. By adhering to the following guidelines you will make the overall user experience when make a mobile website better:
- Optimize for vertical scrolling: Mobile users are for the most part already familiar with vertical scrolling and it also helps reduce the chance that users will miss content on your site. Use simple formats like lists to display your content. This makes vertical scrolling easier for site visitors and they can quickly scroll through the content on your site.
- Design for touch: When designing for touch keep the following in mind:
- Fingers lack the precision of a mouse and can block what they are tapping from view. Targets should be 30 to 40px in size. Also be sure to leave adequate whitespace around objects to be tapped.
- Provide feedback when the screen is touched: Let users know that a tap has been recorded after an object has been touched. Use highlights, indents on buttons or some method of acknowledging a tap. When the only indication the user has that the tap was recorded is waiting for a page to open, they tend to repeatedly tap a button until something happens.
- Buttons are best: Buttons make it clear to the user where they can click to activate a link as they get no other indication like desktop users do when they hover over a link. As mobile users don’t get this feedback it is important to clearly define where to click.
- Download times are important. Keep download time to a minimum by:
- Removing or replacing large background images.
- Combine smaller images such as icons into one file and position them on the page using CSS to reduce the number of http requests
- Put the most important information at the top of the page: Place things like site search and navigation at the top of pages to create a more user friendly mobile page design
In addition, you are free to look through the wordpress plugin for mobile version for more information, we’ve prepared for you.
One final guideline that should always be kept in mind is that simplicity is usually best.