Website Design for Tablets and Mobile

Share this article

Recently I went through a redesign, and as part of the effort, I reviewed how best to support tablets and mobile visitors. If you haven’t been researching this topic recently, no one could blame you for dismissing mobile/tablets as a novelty that won’t have much impact on your web presence. But if that’s where you’re at, consider this: It was recently estimated (as of early 2012), that 10% of all Internet traffic
is now coming from mobile devices and mobile traffic will be as high as 36% by 2016. And compared to this time last year, mobile traffic is up 131% … in a single year. We are clearly in a secular trend toward personal mobility in computing. Proliferation of mobile devices now is accelerating and sales of internet enabled mobile and tablet devices now exceeds that of traditional desktop devices; tablets alone will exceed desktop sales as early as next year! So there is a compelling need to support mobile and tablet users with any new web design moving forward. But how do you do that? First let’s talk about our objectives and we can look at a couple possible strategies from there: Objectives: Consider the use pattern of these devices. When using a desktop computer, they’re typically at the office and either researching work-related information, or procrastinating between projects (yes, ahem, at work). Tablet users meanwhile are typically sitting on the couch in front of the television during evenings and weekends. Mobile users meanwhile are trying to squeeze in activity while waiting in the doctors office or at a red light in their car (sad to say). So what is going to be a meaningful and satisfying user experience for these three users? The desktop and tablet users are going to be more receptive to alternative suggestions for content (upsell eCommerce and related posts links, etc). Tablet users will enjoy media and rich images more. And all of this rich user experience is actually an impediment for mobile users who are fighting against time constraints, a small screen, and slow load times. They just want to get to the critical information such as contact information as quickly as possible. So sticking with the traditional web design only, which is geared for the desktop user, is not going to well represent the other two new classes of users (table & mobile) that you need to start thinking about. To facilitate these new users, there are a few options: Native Application:
The first thing that comes to most people’s minds with mobile content, are the native applications for iOS and Android that you download and install on your mobile and tablet devices. These provide very rich user experiences but require that you develop a separate application for each device that you want to support. That can get expensive. And let’s be honest, how many websites are users going to want to take the effort to download an app for? So does all that extra expense justify developing for a use case that users likely won’t even engage? There are exceptions to this rule of course. If you’re a gaming company or you are a cloud software application that provides a productivity tool that the user will need to access on a regular basis, then a native app is certainly a possibility and probably even a superior user experience. For the majority for corporate and marketing websites though, this just isn’t a reasonable option, since a user is merely looking for some quick information about your site. Separate Mobile Design: The next reasonable consideration is creating a separate website to support tablets and mobile phones. This is relatively easy to accomplish. It is relatively straightforward to detect the device type (e.g. HTTPUserAgent) and redirect users to alternative content accordingly. If you use your phone to browse web content frequently, you’ve likely come across a few sites that will redirect you to a separate subdomain of their website. xyz.com for example might redirect you to m.xyz.com. And there you serve the simplified version of the website that better applies to mobile devices. But this gets complicated when you begin to consider all the various permutations. What about tablets for example that actually benefit from richer user experience? Responsive Web Design: There is a quiet movement in the design community that began with an article by Ethan Marcotte, describing the possibility of Responsive Web Design (RWD). The idea provides a technical framework for implementing a “mobile first” web design, in which you start by designing the constrained mobile experience and layer on the richer user experience based on capability from there. By working backwards, you ensure you’ve accounted for all the various permutations such as all the different screen sizes (media ports), landscape versus portrait layout, etc. Responsive Web design is possible primarily because of the introduction of media queries with the new stylesheets standard in CSS3. Media queries enable the website author to encapsulate CSS classes within conditional statements that evaluate the media type of the user such as window size (viewport) and orientation. RWD also addresses use of flexible design grids and context-aware images that adapt the size and quality of the image also based upon device type. A Hybrid Approach: After evaluating these different options, I ultimately concluded a hybrid approach was in order. The philosophy of responsive web design is elegant, I naturally gravitate to it, and it worked wonders for optimizing the desktop version of the website for tablet devices. At the end of the day though, I did not feel it was appropriate for mobile devices. As mentioned earlier in this post, mobile users have fundamentally different goals and needs, and are simply not looking for a more elegant representation of my website; they want to get the information and get it quiclkly, period. I think about my mobile experiences and when I look up a business online, its typically because I just want to find their address or contact information. Thus, there is a lot of information on the primary website that does not belong there for the mobile version, and it really should be treated separately. An Example:
If you check out Enlogica.com on your smart phone, you’ll see that there are only 5 pages and the first is the contact link. If you click on this, it is a very simple page with the address and three buttons that allow the user to: click to call, click to email, and click to get directions on their phone. That’s it. There are a few other pages below that for the sake of completeness (the blog section is accessible at the bottom), but I’m really trying to create a simplified user experience, based upon the assumed use pattern of the user. And this is fundamentally a different prerogative than Responsive web design, which is focused on adaptive aesthetics, not user experience. Because I’m using WordPress as the CMS framework for the site, I was able to easily setup a secondary mobile template that is only delivered to mobile devices, based upon the device type (HTTPuserAgent). This provided an elegant solution, since I was able to and optimize the content for mobile devices without having to create a separate mobile site to maintain. In summary, I determined a hybrid approach to mobile accessibility that married the benefits of responsive web design with the practicality of a separately mobile theme was preferable. Responsive (RWD) techniques were used to adapt to a reasonable tablet experience, but mobile devices receive a separate theme, with limited navigation, and the content of those pages is also minimized. The mobile experience is greatly simplified and models the native device interface (using JQuery Mobile). This approach provides an optimal user experience on all three device classes (desktop, table, and mobile).

Frequently Asked Questions on Website Design for Tablets and Mobile

What is the importance of responsive web design for mobile and tablet devices?

Responsive web design is crucial in today’s digital age where users access websites from a variety of devices, including mobile phones and tablets. It ensures that your website adjusts to the screen size, resolution, and orientation of the user’s device, providing a seamless and consistent user experience. This not only enhances user engagement but also improves your website’s search engine ranking as Google prioritizes mobile-friendly websites.

How does responsive web design improve user experience?

Responsive web design improves user experience by ensuring that your website is easily navigable and readable on any device. It eliminates the need for users to zoom in or scroll horizontally to view content, thus reducing user frustration and increasing the likelihood of them staying on your site longer and engaging with your content.

What are the key elements of responsive web design?

The key elements of responsive web design include a flexible grid-based layout, images that are scalable and resizable, and media queries that allow CSS to apply different styling rules based on the characteristics of the device. These elements work together to ensure that your website adapts to the user’s device, providing an optimal viewing experience.

How does responsive web design affect SEO?

Responsive web design can significantly impact your website’s SEO. Google has stated that it prioritizes mobile-friendly websites in its search results. Therefore, having a responsive website can improve your site’s visibility in search engine results, leading to increased traffic and conversions.

What are some best practices for responsive web design?

Some best practices for responsive web design include designing for mobile first, keeping your design simple and clean, using a flexible grid-based layout, making images and media scalable, and testing your design on various devices and screen sizes to ensure it works well across all platforms.

How can I test if my website is responsive?

You can test your website’s responsiveness using various online tools such as Google’s Mobile-Friendly Test. This tool allows you to enter your website’s URL to check if it’s mobile-friendly. Additionally, you can manually test your website by resizing your browser window to see how your site adjusts to different screen sizes.

What is the difference between adaptive and responsive design?

While both adaptive and responsive design aim to optimize the user experience across different devices, they do so in different ways. Responsive design uses flexible and fluid grids to adjust the layout based on the screen size, while adaptive design uses static layouts that are designed for specific screen resolutions.

Can I use templates for responsive web design?

Yes, you can use templates for responsive web design. Many website builders and content management systems offer responsive templates that you can customize to suit your needs. However, it’s important to ensure that the template you choose is truly responsive and works well across all devices.

How does responsive web design impact website speed?

Responsive web design can impact website speed, especially on mobile devices. If your website is not optimized for mobile, it may take longer to load, which can frustrate users and lead to higher bounce rates. Therefore, it’s important to optimize your responsive design for speed by compressing images, minifying CSS and JavaScript, and using a content delivery network.

What is the future of responsive web design?

The future of responsive web design lies in the continued evolution of devices and screen sizes. As technology continues to advance, designers will need to adapt their strategies to cater to new devices and user behaviors. This includes designing for wearable devices, incorporating voice user interface, and leveraging artificial intelligence to create personalized user experiences.

Neal CabageNeal Cabage
View Author

Neal Cabage is the Managing Director of Enlogica, a digital agency focused on the development of web and mobile applications, analytics-driven insights and optimization.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week