The process of a web redesign has become a whole different beast since the advent of RWD (responsive web design). In the old days you could slap together some HTML, a simple CSS file and a bit of custom imagery (logo, banners, product photos) and then simply integrate a few forms or a shopping cart. Build web traffic and, Boom! Your business is growing. There was no need to customize for experience and device. Everyone was viewing on about the same resolution screen and there was much less room for error.
With the challenges of adapting to the new norm of the responsive web, come opportunities to explore, experiment and get the creative juices flowing in a new way. That said, it is always important to have a good workflow. A process that allows you to experiment but provides a structure to ensure that your project still hits the mark where it’s important. We thought we would share some the workflows we use on as one of the top San Diego web design resources when going from a static to a responsive web design while also ensuring low risk to existing SEO rankings throughout the migration. Hope that this info helps you in your next project!
Content Architecture Mapping & Analytic Data Benchmarking:
Before creating a responsive website, the important thing to consider is what is going into the website and what content has been performing well in the past. An assessment of the top landing pages, topics, categories and purpose of the content should be considered when preparing to wireframe. Important content categories should be given a higher priority than the less important content. When we look at importance and page priority, we consider a few analytics metrics:
- Backlink profile of separate pages
- Traffic generated as a landing page
- Page visits in the content drilldown
- Overall rankings for top impression and traffic keywords
- Engagement metrics like time on page, conversion rate or other tracked events
- Geographic traffic data
We also pull ranking data on top impression and traffic keywords from for future use with our redirects, performance monitoring and SEO content strategy.
From there we have a relatively concrete idea of what the content priorities are and we can begin mapping. Create a hierarchy of the content visually using a sitemap creator like Creately or SlickMap CSS. The content with the lowest priority may be discarded if it is no longer current and doesn’t meet any of the standards for the metrics above. We subscribe to the age old content silo architecture that was innovated by Bruce Clay and is tried and true.
Understanding the client goals and having everything documented is also of high importance. First, take note of the nature of the website and make a list of the items needed. This may include graphic assets, themes, plugins features, and capabilities. Before beginning creation of the website, make sure to complete this to-do list. Blindly getting into a responsive web design project may end in disaster. Planning through a valid workflow ensures that the client expectations are realistic and that everyone is happy with the end result.
User engagement and scope:
The most important thing to consider before creating a website is getting to know the type of users who will visit the website. It’s important to implement effective site engagement strategies. But first, getting to know the audience, or personas, of users makes it easy to understand how to design the website and what content to use. Creating a website with very limited scope can make users bounce, or exit the site quickly and without visiting another page. This is especially true with sites that fail to deliver the expected content or use poor copywriting. Engaging content will deliver a continuous message, clear calls to action and offering multiple methods for users to consume the information. This includes video, downloads, images, concise professional copywriting and a reasonably well-designed layout. Any user who visits the site should feel like they received the information that they needed, made a decision on the call to action or will visit again.
Audience Location
It is also always important to consider the scope of website. This is a digital asset that will be available all around the world. The number and type of users may vary depending on the place and time. Creating a dynamic environment with respect to region, languages and area can be a good start. Disney has done this on their website, making the site more local rather than global that it speaks to users in order to create a dream that resonates with them personally. However, while Disney made the right decisions here, they still missed the mark on other essential usability features for their responsive design.
Website Layout Design:
Web design is as important as scope. Any site with a poor layout or low quality imagery will not keep visitors or convert as many users as it should. The fact is that you can’t stop users from judging a book from it’s cover when it comes to a website.
When you are designing a logo, you are creating a face for your business and you need the design to elicit a proper psychological response from your user. It needs to create the trust required for them to feel comfortable taking an action. Even if the data and the content used are not even up to par, a good design always attracts attention. Consider using a dynamic design flow. Use of colors and special fonts on different occasions according to the content can be a good approach if it fits. However, stick to your branding guide and make sure to not over design it. That is as disastrous and distracting as under designing something.
Cross Device Compatibility:
The driving force behind the innovation of responsive website design is the need for compatibility across an ever expanding variation of devices used to access content. A website needs to be able to accommodate the flow content on any sort of device including multiple phone screen sizes, tablets, laptops and desktops. This means using proper image scaling and changing columns structure strategically. Customizing spacing should be thoroughly researched when being implemented.
Overlapping of content is a common issue. Luckily there are great tools to test prior to launch including the Google responsive testing tool, when testing remember that extra spacing sometimes helps the compression of content. There will be client preferences that may not fit with your eye as a designer so allow a bit of extra time in your bid to ensure that they have a chance to review different device variations in the design approval process. Always be humble when listening to the client 😉 They may actually teach you something about design even though it is not their speciality.
Testing:
It goes without saying but before launching the website, test it. Testing phase should be a long and hectic one because once launched, it may not be possible to test the site depending on the flow of users visiting. Testing should be done thoroughly. Things that should be considered while checking are the things that matter the most. Site speed, mobile friendliness and mobile performance are all great tools to use in this process. Also check for dead links, Java script errors or other technical issues.
Check whether the content is lining up correctly with a manual eye test. Check to see if any design flaws occur while visiting the site. Click everything on the page while testing. Anything that works or looks bad, omit it and redesign. Test, test and test, and make sure the site is flawless before it goes live. After launching you want to work on improving search traffic and conversion rates, not on getting the design to “fit correctly”.
SEO Technical Optimization Code Optimization:
Back-end code is every bit as important as the front-end design and in terms of marketing channels like SEO it can be even more important. The first thing is to make sure that you avoid “code bloat” by keeping the site code as clean and simple as possible during the development phase. The next step is to ensure that you are not running into the web redesign SEO nightmares that occur too often with people who believe that “SEO is dead”. That is a surefire way to end up with a redesign that causes huge traffic drops and other unforeseen issues.
Ensuring that the site is accessible, avoids duplicate or thin content has a well-optimized sitemap and robots.txt file is vital. Getting the site set up with google tag manager, analytics and webmaster tools (search console) so that you can see the site the same way that Google does is imperative. This way you can take the next step to implement the redirects that you needed by adjusting the .htaccess file. While your at it, make sure that you have your canonicalization in place. This will ensure that you avoid duplicate domains or duplicate language versions of the site. Now you can monitor for 404’s in webmaster tools. We have processes in place for all of these potential issues and always recommend an SEO planning phase and technical optimization prior to launch.
Site peed is also a known SEO factor now. Once you have run the site through the speed test on the server that it will be launched on, begin taken the recommendations and implementing changes until your site is getting to below 3 seconds page load time ideally. Consider implementing AMP mobile technology in order to ensure almost immediate delivery of content. Finally, look at your server settings and see if there are opportunities to improve that for security, deliverability and uptime including the consideration of utilizing a CDN like AWS or Cloudflare. Assuming keyword research and on page optimization has been conducted, consider a refresh on old content, site-wide meta data and on page optimization for any pages that are low hanging fruit or are completely new.
The site should be monitored for these things by a professional SEO to ensure that you retain traffic that you have gained over the years. Running your benchmark tests and producing post launch data sets for comparisons will help the SEO to diagnose any issues that may be occurring.
Final Thoughts
It is easy to underestimate what goes into the modernization of a site. Especially if you have a website that is currently driving high volume of traffic and has much to lose. Going into this without considering every angle and preparing from the start is a sure way to end up in a redesign disaster. Using some of the tips here can help you to refine your process and get your responsive web redesign launched properly, turning your clients into brand advocates.
Research and Data Provide By Kevin Fleming and TLD Agency