Posted By William Johnson On March 14, 2013 @ 11:00 am In Technology Trends | 13 Comments
Smartphone and tablet adoption is accelerating worldwide, and it can be expected that mobile commerce (m-commerce ) sales will also be greater in the years to come, with more retailers interested in building mobile sites to reap additional profits.
Mobile website design is complicated, since one mobile version of a site may not be compatible with every device. The designers have to be aware of best design practices to make your mobile presence meaningful and worthwhile.
There is a continuous debate among Web developers about which way of creating a mobile-optimized website is the best. There are three leading methods for developing a mobile website.
Each method has its pros and cons. A Web developer has to be aware of each technique to implement the best one for the situation.
RWD relies on CSS3 media queries to align the layout of a webpage with the size of the viewing area of a device. The same HTML code is used to present different webpage layouts for tablets, mobile devices, desktops and other gadgets.
It is not possible to separately optimize mobile content. Therefore, a designer using RWD cannot tailor content separately for mobile users.
According to January 2013 data from HTTP archive, an average webpage is about 1.3 MB. However, most RWD sites are comparatively larger. This larger size decreases the performance of mobile sites, making them slower.
Mobile users are more attuned to mobile-specific user interface design patterns. Moreover, mobile users are accustomed to multi-tasking. Unless the navigation structure is customized for specific devices, users can face problems when trying to accomplish several tasks simultaneously.
This method improves the experience of mobile users by creating an entirely separate website.
Sharing a webpage via social media becomes more difficult, since with dedicated mobile sites there are multiple URLs for pages. When desktop users click on mobile URLs shared on social media platforms, they may inadvertently receive the mobile version of the site rather than the desktop version.
In order to avoid duplicate content issues, the Web developer has to use rel=”alternative” and rel=”canonical” meta tags. If a mobile user searches Google and clicks on a desktop URL, the user will either view the desktop version or will be redirected to the mobile version of the webpage. If the mobile version does not exist, the user will receive an error message.
Creating a totally different website for mobile users means that the site will be tailored specifically for mobile users. However, to fulfill that purpose, Web developers have to cut out functionality and content, which turns out to be a nightmare for them.
This method depends on server-side programming to provide custom HTML and CSS for different devices. The code for mobile users will be different from that of desktop users.
The main objective behind this implementation is to improve the website’s performance. This method works well when combined with responsive Web design. Therefore, this implementation can be referred to as Responsive Web Design+ server side components (RESS).
The decision to design a mobile-optimized site depends on the products you sell, your target audience, the investment required, your competition, conversion rates, etc. The design method that will work best depends largely on screen formats, operating systems, browsers and resolutions.
Most responsive Web design sites are not implemented optimally and as a result, these sites take more time to load. Since competition is fierce, you may lose customers if your site performs more slowly. A user will simply switch to another website that takes less time to open. Although it is possible to create websites with shorter load times with dedicated mobile sites, there are various drawbacks attached to this implementation, too.
RESS provides benefits of RWD overcoming its two main drawbacks. The main disadvantage of RESS is that device detection is unreliable. You have to test frequently for new devices to ensure that the process continues to work properly.
There are services like DeviceAtlas, WURFL and others that can detect new devices. It will be a great help to update new devices in your database.
Mobile Web design is successful only when a website is displayed properly on a mobile device. Although it’s a daunting task for designers to represent all the essential parts of a desktop site in a small, mobile window, every day new techniques emerge to make mobile websites better, faster and more fully-featured.
Mobile Website  Photo via Shutterstock
Article printed from Small Business Trends: http://smallbiztrends.com
URL to article: http://smallbiztrends.com/2013/03/design-a-mobile-website.html
URLs in this post:
 m-commerce: http://smallbiztrends.com/2013/03/m-commerce-your-website-needs-mobile.html
 Mobile Website: http://www.shutterstock.com/pic-89211373/stock-photo-raster-illustration-of-a-smart-phone-with-mobile-website-on-it-s-display.html