It’s no secret that today’s Internet demands that your website is mobile friendly. With the majority of time spent on the Internet being from either a smartphone or tablet, your website needs to present users the same experience they would come to expect while on a traditional desktop or laptop. Otherwise, you risk losing them to frustration and to your competitors who are only a Google search away. In this guide, you’ll learn the three fundamental steps you need to take in order to provide an awesome mobile experience.
Choose a responsive framework
In the early days of mobile Web design, website teams would build adaptive websites. This meant the team would create a large screen PC version and a separate, simplified mobile version. The mobile version would be drastically reduced, offering the bare essentials — like contact information and a company overview — to the user. If a user wanted the full experience, he or she would have to access the website from a PC to purchase products or see things like image galleries, movies, tools, etc. Additionally, extra work was created for the website administrators because now a PC and mobile version of the website had to be updated each time new content was added.
Eventually, responsive websites entered the scene and life got a lot easier. Responsive websites use code frameworks that allow one website to be designed that is intelligent and morphs to fit any size screen a person might be using. This new technique also helps save content teams time by removing the necessity of having to update two or more websites with each new post. It also cuts down on the initial design time since only one overall website style needs to be defined instead of creating fixed width layouts for each screen size.
Implementing a responsive website can be accomplished in one of two ways. Your website design team can use a framework and build a template from scratch. This is the best method when your design aesthetics are your highest priority in order to communicate your brand’s quality. Using a framework will allow you to tweak your website design in any way you need to accomplish your brand’s goals. Some of the most popular frameworks on the market today, which are available under open source licenses, are Twitter Bootstrap,Foundation and HTML5 boilerplate. The second way you can implement a responsive theme is to look for themes for WordPress, Magento, Drupal and other popular content management systems that are based on the frameworks just mentioned. There are numerous theme marketplaces on the Web where you can purchase these. This solution is best when trying to save on costs and your aesthetics are not the highest priority for a given project.
Keep your image sizes small
A long load time on a mobile device equals a bad user experience. If using a program like Adobe Photoshop or Adobe Illustrator be sure to use the “Save for Web” feature when saving files. Simple graphics typically tend to have the best file sizes using GIF or PNG formats. Graphic files like your photos from high-end digital cameras tend to do best using JPG. You can also squeeze a little extra file size out of your PNG images by using online compression tools like www.tinypng.com, which reduce the file size even more without losing visual quality.
Use a good Web hosting company
Your website can only be as fast as the web host serving it to the Internet. Many small businesses opt for cheap hosting from companies like GoDaddy, HostMonster and HostGator, but pay for it in site load time. According to a study by Forrester Research, users expect a website to load in 2 seconds or less, yet most mobile websites loaded in an average of 6.2 seconds. Compounding the situation further, every second of additional load time also resulted in a conversion rate loss of 7 percent. For many companies, this problem can be easily remedied by switching to a more robust hosting platform offered by multi-platform companies like www.rackspace.com and www.mediatemple.com or CMS-specific platforms likewww.wpengine.com and www.websynthesis.com for WordPress and www.nexcess.com for Magento. To see if you have a potential website load time problem, Google provides a free tool to help analyze your website at http://developers.google.com/speed/pagespeed/insights/.
By focusing on these three core areas of your website, you are sure to offer a great mobile experience to your visitors. Ultimately, the faster and simpler you can make your website for user to accomplish your desired business goals the more likely you will be rewarded in return.
Frank Spohr is the founder of Clicked Studios, a responsive website design and online marketing company offering a new way to design websites that converts more visitors into customers and turns poorly performing websites into valuable revenue generators by using integrated knowledge of design, sales, marketing and human psychology.
