Redesigning A Mobile Website: The Essential Planning Process

A fast, engaging, and high-performing mobile website has never been so critical to success for publishers. While achieving a website of this quality can be tough, the redesign process represents a perfect opportunity for you to not only reassess how your mobile website looks, but also how it is built and behaves for your readers.

This redesign process can certainly be daunting, which is why this guide is here to offer you advice and key resources. It will explore exactly why mobile is so critical, and then break apart the redesign process into manageable chunks to help you strategize and achieve mobile success in 2018 and beyond.

Why mobile is critical

2018’s landmark SEO event is going to be mobile-first indexing. Its origins lie back in November 2016, when mobile browsing overtook desktop browsing. That very same month, Google announced its mobile-first indexing initiative in this Webmaster blog post. Now that nearly 60% of Google searches come from mobile devices, this year the search giant is going to make a big shift towards implementing mobile-first indexing.

This shift means that it is the mobile websites of publishers that are going to be indexed and determine the rank that its pages achieve within search engine results pages. What’s more, Google announced in January this year that page speed is going to be a ranking factor for mobile websites.

Together, these two news items really underscore why an engaging and high-performing mobile website are going to be critical to success. But it’s not just about satisfying algorithms and search engines: 53% of mobile users abandon sites that take longer than 3 seconds to load. As users we have quickly grown close to our mobile devices and expect speedy experiences that reflect the convenience of the devices themselves.

Let’s take a look at how the redesign process can help you to make important steps towards creating an amazing mobile website.

Seven key steps to redesigning your mobile website

1. Define your objectives

The key objectives for most publications are generally similar: increase readership, improve engagement with readers, and monetize that traffic. To achieve these objectives, however, publishers have to pull out all the stops to stand out from the crowd and engage with their audiences. We will take a look at the key techniques that publishers can use to put their publication ahead later in this post, but for now, let’s think about what your more specific objectives might be.

It is important to dig deep into all of the data available to you to find your specific goals. Whether that’s audience data from Google Analytics, monetization data from platforms like Marfeel Connect (which aggregates revenue streams to give publishers the ability to track performance in one dashboard), or anecdotal data from readers.

You should ask yourself “what exactly do I intend to achieve by conducting this redesign?”

For example, perhaps your existing mobile website performs poorly in terms of keeping readers engaged and therefore suffers from a high bounce rate. If you have identified this as an issue, you should dig deep into why that is happening. Could it be because of the navigation options that are available to your readers? Perhaps there are specific mobile design decisions you have made that are impacting your performance in this way.

Your list may look something like this:

In later steps, you will be able to consider design decisions that will help to resolve the causes of those issues. In this instance, for example, a publisher might want to rethink their use of lateral menus or navigation levels.

Find out exactly what you want to achieve by conducting the redesign will help you to frame other important decisions that you make throughout the redesign process.

2. Benchmark your current performance

As part of the first step, you will have considered the ways in which your mobile website can be improved. Naturally, by diving into the data, these issues that you have identified will be based on genuine insight.

This is the perfect time to benchmark the current performance of your mobile website. This critical step will help you to accurately measure the impact that your redesigned mobile website has had on key metrics. You will want to dive deep into your Analytics data, and also track your monetization performance.

3. Use critical development techniques

You will most probably decide to work with a partner when it comes to the design and actual construction of your website. Naturally, many of these professionals will have to possess a wealth of knowledge when it comes to creating high-performing mobile websites.

To help you understand which key techniques your team will want to be hitting, here are some of the critical techniques when it comes to building a mobile website in 2018:

I. Eliminate dependency on JavaScript & CSS.

Speed is critical, so you need to make sure that your website is built intelligently from the ground up with optimization in mind. This means that it should be a priority to build your website with code that eliminates dependency on languages such as JavaScript and CSS.

II. Optimize your resources

Another important factor to remember is to optimize your resources. This means using the latest compression algorithms and limiting the size of assets on your mobile website.

III. Remove m. redirection

At one time, using an m. redirection was seen as an intelligent way to accommodate for mobile devices because in offering two versions of their websites, publishers were creating mobile experiences for users. However, this can negatively affect the performance of your website. With mobile-first indexing on the way in 2018, an m. redirection could also mean bad news for your SEO performance. Responsive design will perform much better within Google’s mobile-first index.

IV. Implement lazy loading

Lazy loading essentially means that page assets are loaded in sequence as a reader scrolls through your mobile website. This helps to deliver a fast and smooth experience for your readers.

4. Find the right partners

There is truly no substitute for getting professional assistance. Even if you believe that you possess the necessary skills, you will be more effective as a project manager that has a complete overview of the process and can direct stakeholders.

You will want to find talented designers and web developers to work on your project and according to your budget, there are a variety of options available to you. You can consider freelancers on platforms like UpWork, a digital marketing agency, all the way to enterprise scale web development companies.

5. Define your design choices

The first step of this process may have given you an indication of the design elements that could be responsible for the issues your mobile website is facing. You may already have an idea of how you would like to make those adjustments, and this part of the process will help you to formalize those ideas.

Best practice

As readers spend more time on mobile devices and familiarize themselves with UI and UX conventions, a series of expectations are developed that your mobile website must adhere to.

This is known as “Jakob’s Law of Internet User Experience”. Essentially, the principle dictates that readers will spend more time on websites that are not yours. It is during this time that they are developing their understanding of what to expect from a mobile experience, and it is therefore very important that you abide by those conventions rather than attempting to reinvent the wheel.

You can find out more about the principle from Jakob himself in this YouTube video:

To conduct this research, you should spend time browsing your favorite mobile websites and paying close attention to the UI and UX decisions that have been made. Sometimes these decisions are the most difficult to detect, given how natural they feel. Consider, for example, the way that menus are treated across different mobile websites.

User research

Your readers are the life of your publication, so you should make efforts to conduct rigorous research to understand their preferences, expectations, and behaviors. You could consider conducting surveys and leveraging your mailing list to get insights into their preferences and feedback.

Given that they will continue to come back to your website, you will want to remain attentive to their feedback and experiences. There are fantastic examples of many websites that adopt an iterative approach to design, constantly tweaking and adjusting according to developments in these three categories (best practice, user behaviors, and competitor research). Take, for instance, The Guardian’s recent redesign that blends old and new elements together.

Competitor research

Your competitors might be defined as those in a similar niche or location, and their design choices can provide you with interesting guidance and elements to consider.

Now that you have started to compile a collection of data and insights, it is important to combine those design choices with the measures that you identified to tackle your specific challenges. Conducting this step in coordination with your design partner will help you to put together winning ideas.

6. Define your approach to key features

In 2018, there is a selection of UX and UI elements that publishers need to consider their approach towards. You should make sure that your new mobile website is properly targeting the key features that you need to look at. For example:

• Navigation levels
  • You will want to consider the way that your readers will be navigating the various sections and categories on your website, from a series of different areas.
• Social sharing
  • Social sharing can have big benefits for your publication in terms of recirculation and traffic acquisition, and it can be a great UX feature for your readers. You should consider how you will implement this feature.
• Lateral menus
  • Lateral menus are becoming more and more popular in 2018. There are different approaches taken to them, such as the example below.
• Theming & styling
  • This is perhaps what most people consider traditional design, the way in which your brand is presented coherently throughout your website and other platforms.
• Ads
  • Your website should accommodate for different ad formats so that your design and loading patterns, and their impact on UX, are easily predictable.
• Responsive design across devices

Responsive design is great for mobile-first indexing, giving you the option to be able to push the same HTML to different devices which are then organized by CSS. You will naturally want to consider how your mobile website looks across devices.

7. Create sitemaps, mockups, and wireframes

This step will be conducted in coordination with your design partner, and it is a very exciting part of the process to see your mobile website begin to take form. Remember to let your previous decisions guide and inform this process as you continue to review and discuss wireframes in more depth.

8. Make the necessary SEO Considerations

Your partners will be able to advise on the various ways in which the design and UX choices you make will have an impact on your SEO. At this point in the process, it can be good to bring in a specialized SEO professional to give you insights into how, for example, your menu decisions might impact key metrics which may impact your ranking in search engines.

Changes to elements such as the structure of pages, navigation paths between articles, and sharing options can all have impacts, so it’s important to predict those changes.

8. Use the best resources

I hope that this guide has given you an effective overview of the process, and given you ideas on how you can deep dive into each of the steps in this process.

To help you further with your redesign journey, here are some excellent resources that can help you:

• The complete guide to launching a new website – Search Engine Journal
• 27 things to check before you go live – Link Assistant
• Website redesign victory – Crazy Egg

I hope that this guide has helped you and if you would like any clarification on certain points, please let me know in the comments below! All the best with your mobile redesign journey.

Correction: This article has been revised to include links to Marfeel and Online Marketing Gurus.