Responsive Design vs Mobile-Targeted Website Layouts



Many advocates towards mobile web design recommend starting with a smaller layout and scaling up through responsive design. This is a popular set of techniques which have been adopted over the past couple of years. However I would argue there is still room for mobile-specific websites in some particular instances.

In this article I’d like to look over the major differences between a single responsive design and two separate desktop/mobile layouts. There are some obvious benefits to both methods but I think the best solution ultimately depends on the type of website. This means freelancers should understand the needs of their clients and which solution works best on any particular project. The design process isn’t always straightforward and usually requires time for introspection.

Handling Mobile-Sensitive Data

When you manage a smaller website it’s a lot easier to scale this into a responsive design. You can plan ahead to build your images and videos with flexible CSS properties so they will scale for any resolution. Handling data on mobile screens should be your #1 priority when it comes to deciding your form factor.

Mobile Twitter layout on iPhone Safari

Image Source

I feel that websites with fairly static content can do better running a responsive layout. There isn’t as much interactivity and you’ll be handling just the frontend interface. But with web applications often a mobile version is the best solution.

I say this because sensitive data over the web is easy to manipulate and even easier to accidentally screw up. Users who access Twitter or Facebook via Safari Mobile are handling a much smaller interface of the web version. Although there are native apps for Android and iPhone you’ll still get people who want to access the mobile website.

Target for a Select Audience

You should think about not just your own needs as a web designer, but the needs of each visitor accessing your webpage. What are these people trying to accomplish and what do they need? What age group does your typical audience member comprise? Younger kids and early 20s-30s adults often understand technology very well. The older generation may struggle but there are also knowledgeable people in that range, too.

Mobile MySpace website layout design iPhone Safari

Image Source

I really love the MySpace redesign and give the staff credit for still pushing through with newer updates. That community still gets a lot of attention for profiles and from bands, music, and video media. You can see this exemplified on their mobile layout which has some previews and further exploration buttons.

This is one good instance of MySpace targeting their audience with a mobile platform. It would take a lot of work to redo the entire layout for responsive capabilities – and honestly it wouldn’t even be worth the effort. The current MySpace homepage looks great just as it is. So without touching any of that code it’s easier to scale out a 100% mobile-centric layout as an alternative.

Native App Solutions

Not every website you launch will also have a matching app within the mobile app stores. So obviously this isn’t a great solution to replace mobile browsing. But if you have an app or plan on building one you better provide some type of link on your mobile site!

Mobile StumbleUpon on iPhone - download the native app

Image Source

StumbleUpon has a completely limited mobile interface which promotes their mobile application. iPhone and Android users will have a better browsing experience by accessing the native app hands-down. So creating a mobile interface is almost counter-productive. You could imagine a similar scenario unfolding with applications such as Instagram and Pinterest.

The Responsive Effect

Let me now go into a solid example behind responsive design trends. If you are building a social network or web application from the ground up you’ll have the opportunity to build the layout with responsive traits in mind. There are dozens of great examples on the web and one in particular which stands out is Stury.

Stury responsive social networking website mobile design

Image Source

You can swap books and titles with others online and signup for a whole account through Facebook. As you access the website try resizing your browser window and notice how all the page elements realign themselves. Media queries are the most popular CSS solution aside from building your own custom mobile layout.

What I like so much about Stury is how they haven’t been stifled by user interaction. If anything their mobile layout allows users to quickly access important areas of the website with just a few taps. And because it’s all one single layout the Stury team can produce updates much more quickly. However the downside to this method is that it’ll require more time fixing bugs and kinks in the code.

Businesses and Small Companies

When it comes to web design trends for a company website I would recommend one single responsive layout every time. You can usually build any type of functionality into responsive layouts, even including image sliders and galleries. jQuery offers dozens of plugins which perform very well on Android devices and iPhones.

Modo Design Group responsive layout design

Image Source

The Modo Design Group is just one example of many corporate-style responsive website layouts. They include a whole set of extra features on the homepage which pull images from Instagram and have access to recent blog articles. Understand that you won’t always need this level of in-depth customization for your websites.

But it is really fascinating that we live in a time where development techniques allow for so much flexibility. Even other similar webpages which offer mostly static data can utilize these effects. If you’re looking for some good open source solutions I recommend this awesome collection of responsive jQuery plugins.

Replicating Mobile Interfaces

This last idea comes from developers who simply adore iOS/Android and have worked tirelessly to emulate native app interfaces in website layouts. Ordered lists, top toolbars, tab navigation, and anything else you may expect within a native app can be duplicated for the web. But it obviously does not have the same experience as running natively.

For an example I am looking towards Mashable which uses a very minimalist layout for the most popular social media blog. When you visit their website on desktop you won’t get any mobile responsive effects. However accessing the website on mobile will offer a totally unique template without redirecting to a subdomain or subfolder.

Mobile Safari iPhone Mashable social media blog website

Image Source

I think the designers have done an excellent job with the mobile redesign. You can quickly access popular categories from the top navigation or scroll through the latest publications just like any other iPhone app. If you do plan on building a mobile-targeted layout this may be a logical and coherent solution.

Users who are already familiar with iOS will feel comfortable on your mobile interface. It’s a much more natural solution for keeping attention focused onto your website from mobile users. But honestly I feel the redesign process requires a sense of good UI/UX practices to churn out anything successful. There’s a lot of room for failure but over time you can learn from these mistakes and improve your skills as a mobile web developer.

Final Thoughts

It is my hope these ideas can benefit web designers and developers who are in-between ideas for mobile platforms. It is clear that many popular websites do support their own mobile version for smartphones and tablets. But it’s also true that businesses and social networks are adopting the responsive trend.

Ultimately it does boil down to your own preferences and how the project is built. If you’re working with an existing website then it may be too much work to go back and recode the whole layout as responsive. When building new projects in the future you should be thinking ahead and planning your best method for mobile support. Similarly if you have any questions or ideas on the article you can share with us in the post discussion area below.



Author:


Advertisement