Recently, we’ve been focusing a lot on mobile – I just wrote about the fundamentals of mobile marketing, and today we’re tackling mobile websites.

We’ll be exploring different ways to design mobile websites, best practices, and how to easily make your website mobile-friendly! Let’s delve into the realm of mobile web design!

Mobile Website Statistics: Why You Need a Mobile-Friendly Website

If you’re unsure whether investing time in mobile site design is worthwhile, these statistics will convince you!

• Mobile traffic now makes up 15% of all Internet traffic globally
• No single screen size holds over 20% of the market of the market share
• better opinion of brands when businesses provide a good mobile experience
• 60% of mobile shoppers use their smartphones in-store, while another 50% while on their way
• Tablet users tend to spend 50% more compared to PC users
• Searches on mobile devices constitute 25% of all searches
• Each 100ms delay in load time causes decreases sales by 1%

Mobile Website Design’s Top Rule: Simplicity is Key

Your mobile website shouldn’t try to be as flashy or feature-rich as your main website. Large, complex graphics use too much space on small screens and can lead to slow loading times, which mobile users won’t tolerate. Mobile sites should be minimalistic, with a simplified design. Remember, most mobile users visit these sites for specific information, not casual browsing. The goal is to provide what they need efficiently. This means streamlined navigation and layout, making everything as user-friendly as possible. However, this doesn’t mean sacrificing aesthetics! You can still have visually appealing mobile websites. CSS3 allows designers to incorporate attractive elements like gradients and shadows, achieving a polished look without relying on heavy image files. With this emphasis on simplicity, let’s consider how to approach mobile website design. There are two main approaches. Two Ways to Create Mobile Websites: 1. Develop a separate mobile website 2. Design your current website to adjust to various mobile devices (known as “responsive design”) We’ll discuss both methods in detail. Neither is inherently superior, but your business needs may make one more suitable.

Approach #1: A Dedicated Space – Creating a .Mobi Website

.Mobi websites are specifically crafted for mobile devices. While any domain can technically be accessed on mobile, .mobi sites promise superior usability. For users, .mobi is advantageous because all such sites MUST be mobile-optimized. From a business standpoint, there are both pros and cons. Benefits of a .Mobi Website:

• Specifically designed for small mobile screens
• Minimizes bandwidth usage for faster loading
• Simple, lightweight, and streamlined
• More likely to appear in mobile search results than .com sites
• Separate website allows content optimization for specific mobile search terms, which often differ from desktop searches Drawbacks of a .Mobi Website:
• Two separate websites to manage (.com and .mobi)
• SEO efforts for .mobi start from scratch
• Increased risk of duplicate content across domains, potentially leading to search engine penalties

Approach #2: Adapting to the Device – Responsive Web Design

Responsive web design enables a website to automatically resize and rearrange its layout for different mobile devices. Technologies like CSS3 and HTML5 make it easy to create a site that adapts to any screen size, providing an optimal viewing experience. With the increasing diversity of devices accessing the web, responsive design is gaining popularity. Mashable highlighted that last year they were accessed on over 2,000 different mobile devices! Responsive design aims to make your site look great on every device. Naturally, there are pros and cons. Benefits of Responsive Design:

• Manage a single website that adapts, rather than separate sites
• Abundant responsive web design themes available from WordPress for under $100
• Considered the Google-recommended method in the mobile website design field Drawbacks of Responsive Design:
• Sites using responsive design might load slower than .mobi sites
• Website ads can display incorrectly when resized
• Challenges in maintaining consistent information architecture and functionality can get screwy Is your website optimized for mobile? for Google? Find out fast with the free LOCALiQ website grader.

Choosing Between .Mobi and Responsive Design

The debate between .mobi and responsive design is a classic one, like Coke vs. Pepsi or Mac vs. PC! Okay, maybe not that intense, but many web experts have strong opinions. So, which is right for you?

Image from Google Mobile Ads Blog There’s no definitive answer. Responsive design is generally easier to manage due to having a single website. However, mobile-specific sites allow you to experiment with features like GPS and cameras, typically reserved for apps. Integrating such functionalities into mobile websites can create highly engaging experiences. As Bryson Meunnier of Search Engine Land points out, this app-like behavior on websites should become more prevalent, citing examples like Answers.com have found great success. Some suggest that businesses with fewer mobile visitors should opt for responsive design, while those with a large mobile user base should consider a dedicated mobile site. Ultimately, the decision is yours. Note: You can create a mobile-specific site without using a .mobi domain. Simply set up a subdomain like “http://m.domain.com” to host your mobile site.

Mobile Websites vs. Apps: We Haven’t Forgotten!

You might be thinking, “What about apps? There’s an app for everything!” Apple has done a fantastic job promoting mobile apps. While valuable, they’re not suitable for every business. Apps are software applications written in a specific platform’s language, like Apple iOS or Google Android. They offer unique advantages, but for most small to medium-sized businesses, they aren’t worth the investment. Benefits of Building an App:

• Potentially better performance due to platform-specific code
• Increased visibility and attention through app store distribution
• Access to mobile device features like cameras and accelerometers Drawbacks of Building an App:
• Costly development and maintenance
• Requires more user effort (downloading app stores, apps, updates, etc.)
• Separate apps required for each platform
• Fees associated with app store promotion The reality is, most businesses don’t need a dedicated app. Mobile websites reach a wider audience, and consumers generally prefer them for searching, browsing, and shopping. For instance, According to the Pew Research Center of tablet users prefer reading news on the mobile web over apps. Who Benefits from Apps? As highlighted by Adaptistration, businesses with specific content delivery requirements, such as streaming HD video for subscribers (Netflix, HBO GO, etc.), benefit most from apps. Apps are also suitable for specialized tools, like finding nearby gluten-free restaurants. Don’t jump on the app bandwagon without a clear purpose. If you’re investing in an app, it needs to serve a specific need.

Mobile Website Examples: Learning From the Best

Let’s examine some of the best mobile website designs: Abercrombie & Fitch

What They Do Well: Collapsible navigation and a clean, streamlined design. Caribou Coffee

What They Do Well: Collapsible navigation, focus on local intent with location finders and offers, key information without clutter. Hyundai

What They Do Well: Simple, user-friendly, and easy to understand.

These sites demonstrate that you can be engaging and creative while maintaining mobile-friendly simplicity.

Examples of Effective Responsive Mobile Design

Home Depot

Home Depot excels in its responsive mobile web design:

• Prioritizes local experiences with a prominent “Store Locator” at the top
• Consistent and easy navigation across devices
• Vertical, collapsible navigation for simplicity on mobile Starbucks

• Similar to Home Depot, Starbucks emphasizes the “Store Locator”
• Consistent main image across devices, appropriately sized for each screen
• User-friendly navigation

Mobile Website Ads: Don’t Let Them Break Your Design

Mobile website ads can be tricky with responsive design. Ads displayed across various screen sizes can become distorted or stretched. And nobody wants a stretched-out ad!

Fortunately, Google has provided a solution. They’ve updated the AdSense policy, allowing advertisers to modify the ad code for proper display across devices. Previously, ads were fixed in size. Now, AdSense users can format ads to fit any screen with a simple change in the javascript code. Very cool! Want to analyze your mobile ad performance? Our free AdWords Grader tool can help.

Mobile Website Design Tips & Best Practices

• Stick to One Column – Single-column designs are easier to manage on smaller screens and adapt better from horizontal to vertical layouts.
• Plan Content Stacking – Determine how your content will rearrange and stack when transitioning from desktop to mobile.

• Use Collapsible Navigation – This keeps your mobile design clean and organized. Tapping on menu items expands to reveal more options.
• From Clicks to Taps – Desktop users can easily handle precise clicking. However, mobile users rely on finger taps, requiring larger, less precise buttons. The same applies to hover elements – replace them with tap-to-expand menus.
• Visual Feedback is Crucial – While common in desktop browsers, progress indicators like loading symbols are less prevalent on mobile. Provide your own visual feedback. For instance, change a button’s appearance upon tapping or use spinning icons for loading.
• Test Extensively – Use testing tools and device emulators to ensure your site looks great across different mobile devices (we provide recommendations below!).
• Stay Focused – Most mobile users are looking for quick information. Keep things simple, concise, and to the point.
• Maintain Consistency – While design adjustments and content tailoring are expected, maintain a consistent brand identity and message across devices. Your mobile site shouldn’t feel completely disjointed from your main site.
• Know Your Audience – Understand your target audience and their needs on mobile. Their intent likely differs from desktop users.
• Minimize Text Input – Although improving, text input on mobile devices is still cumbersome. Limit it to essential situations.

Testing Your Mobile Site

We’ve compiled a list of free mobile site testing tools to ensure your site looks great on any device. Testing is crucial!

• MobiReady:: Evaluates your site’s mobile optimization based on best practices, providing a score and detailed analysis.
• The Responsinator:: Tests your responsive design across popular mobile devices.
• GoMoMeer:: Shows your site’s appearance on a smartphone and offers a free report with personalized recommendations.
• Screenfly:: View your website on various devices by simply entering your URL.
• Mobile Phone Emulator:: A popular emulator for testing across numerous mobile devices.
• iPad Peek:: Specifically designed to preview your site on iPads and iPhones. And there you have it – your comprehensive guide to mobile websites and design! Now go forth and embrace the mobile world! Remember, you can always check your site’s mobile-friendliness and SEO using the free LOCALiQ website grader.