Responsive vs Mobile Websites. Design Tips and Best Practices for Business

Just a decade ago it was hard to predict that mobile devices would see such a meteoric rise. The latest research shows that nearly 60% of the time that people spend accessing digital media, they do it using mobile platforms. The major players in the IT industry couldn’t ignore such changes. For example, Google recently announced a special ranking boost for “mobile friendly websites.” This is the reason why “mobile first” and “mobile only” approaches have become so popular. At the same time, most business owners trying to expand their web presence feel that they have to adapt their current websites so that they can be easily accessed both by the desktop and mobile users.

There are two possible ways of solving such a problem: develop a responsive website or create a freestanding full-fledged mobile version of the website. The information presented in this paper will help you to understand which option will suit you better, helping to grow your business.

Responsive website VS mobile website: defining concepts

Let’s highlight the key points, defining what “responsive website” and “mobile website” truly are.

A Responsive website is a website layout that adjusts the page structure to the screen size. Responsive website design means not only resizing blocks but also shifting them both horizontally and vertically.

By choosing a responsive design, you can take advantage of having a single website which looks good on multiple devices, no matter whether visitors open it on a desktop or on a mobile device.

A Mobile website is a website designed and developed specifically for mobile device users (smartphones, tablets, etc.). Sometimes it may have a reduced, ‘light’ structure or some extra features not available on a desktop website.

About different layout types in website design

Apart from the responsive website design, there are several other main layout types. Let’s take a closer look at the definitions of these, so that you can differentiate between them.

Static (fixed) page layout – the page doesn’t change its size no matter what your browser width is. This method is outdated and you may consider it only if you don’t plan to have your website optimized for mobile device.

Liquid page layout – content will fill all available space, regardless of the browser width. It’s not ideal for either small or large-screened devices. Either there won’t be enough space for the website content or a paragraph will turn into a single line running across the screen. It isn’t convenient, either way.

Adaptive page layout – this method uses CSS media queries to detect the browser width. The page structure changes according to the received data. But often the spacing between the explicit breakpoints isn’t perfect, leaving either not enough space or too much “air.”

The main feature of a responsive website layout is the ability to flex like liquid pages and, if necessary, alter the structure of the website.

Responsive website pros and cons

Advantages of responsive website design:

Display of the content and navigation are similar on every device. It allows users to get familiar with the website quickly.
All users have access to the full content of the site.
Cost effectiveness. You develop one website for all devices so that your efforts go toward improvements in efficiency, stability, and the content.
One URL for one page is better for SEO.
Adjustability. A well-developed responsive website will satisfy the needs of both desktop and mobile users, increasing the number of visitors/potential customers.

Some weakness of this method:

Because of the excessive scripts and CSS files and not optimized images, web pages may be too heavy for mobile devices. This may result in extended load time, which will cause the negative impact on user experience and SEO.
Sometimes the desktop and mobile audience may have different needs, therefore an all-in-one approach may not work for a specific website.

Mobile website pros and cons

If you own a desktop website which already has high traffic and an established audience, and the structure is too complicated to fit into a mobile device, it makes sense to develop a stand-alone mobile version.

The pros of this option are:

It’s easier to make changes to an independent mobile version of the site.
Light page weight = high load speed.
A mobile version is optimized for tapping, which is comfortable for users.

On the other hand, there are some disadvantages:

Maintaining both the desktop and mobile versions requires more time and money than upkeeping a single website.
Mobile websites usually don’t have much in common with the desktop versions, so users will have to learn to switch between the two.
If the mobile website is a reduced version of the desktop, it may not satisfy all of the user’s needs.
Two URLs for one page (desktop and mobile) may cause some SEO problems for both versions.
A mobile website may not have the best look on high-resolution tablets or smartphones with retina display.

Making the right choice

The main thing you should know: there’s no one-for-all approach in optimizing your website for mobile. You’ll have to figure out which strategy works the best for your specific business and make the right choice. Here’re some ideas:

For 90% of newly developed websites, the responsive approach will work well. If the website is focused on promoting a brand or offering frequently updated content (for instance, corporate websites and blogs, news websites) and users aren’t expected to make complex actions, it’s better to have a one-size-fits-all website.

Large scale projects that operate in the areas such as online shopping, social media networking or real estate, usually have a fully functional desktop website and a mobile website (very often it duplicates the functionality of a mobile app).

Here are some examples of good responsive & mobile design websites:

An excellent example of a responsive corporate website is AMgrade.com. It performs well both on desktops and mobile devices.

We think many companies could do well with the responsive design. On the other hand, there are some interesting mobile versions developed for corporate websites, too. Check out Caribou Coffee on mobile:

As for the information industry, social networking, and blogging, the top players seem to prefer a responsive design. Take a look at Mashable. Being guided by the leaders isn’t a bad thing.

Still, some companies do well with a separate mobile version of their site, as, for example, News & Record of Greensboro, NC.

In terms of web portals, AMgrade’s team proved that both responsive and mobile websites can work well. For example, our developers implemented up-to-date responsive design for a student life-style website.

On the other hand, the web portal featuring local news from the Montreux area, Switzerland, requested a stand-alone mobile website from AMgrade since they had a desktop version live and didn’t want to change it.

This proves that, if well executed, both strategies can be viable.

These days, responsive websites have become more common for real estate players.

However, a mobile version of a website could also work well for this type of business.

E-commerce remains one of the fast-growing industries and creating mobile websites is an established practice.

Still, a growing number of e-commerce sites consider the responsive design as an alternative.

To summarize: there are general guidelines, which we’ve outlined above, but as always, it’s up to you to decide which strategy to choose for your own website.

AMgrade can design & develop both responsive and mobile websites

Using our extensive experience in mobile web development, a highly professional AMgrade team can create an up-to-date, user-friendly, functional, responsive design or a comfortable, easy-to-use mobile website. Either one will help you to grow your business.

No matter which task you give us and which goals you set, our mission is to bring them to life. So, if you’re about to give your business a new lease on life and are looking for the ultimate mobile solution, contact us. The AMgrade team is at your disposal and ready to help.