The Responsive Web And You
SEO often isn’t the top priority on the mind of many designers. Ensuring their designs have proper vertical rhythm, beautiful typography, property application of white space ranks much more highly in the minds of most designers.
As we head full steam into the mobile future, designers can no longer ignore the necessitating of design websites that are responsive and look good on every device. The days of creating a website intended for pixel perfect display based on a desktop screen size are over.
Mobile traffic now surpasses desktop traffic. Any website still holding onto to the good ole days of Flash based content, or non-responsive sites that require pinching and zooming in order to be functional are now going the way of the DoDo bird.
What does this all have to do with SEO?
It’s simple. The responsive design movement isn’t simply the latest web trend. It’s the industry standard and has been for the past few years. Google recognizes that responsive design is the best solution to the problem of a thousand viewport sizes and is actively working to enforce the new standard through leveraging it’s share of the search market.
Google has taken the following actions,
- Gave a search ranking boost to sites that deliver a mobile friendly version.
- Notify users which SERP results are mobile friendly.
- Send out mobile usability warnings to site owners via Webmaster Tools
- Incorporate mobile usability testing in PageSpeed Insights as well as in a separate Mobile Friendly test.
- Actively teaching developers how to adopt responsive design principles on their own sites.
Google along with other proponents of responsive design rightfully argue that responsive websites provide a better user experience across all devices.
When visiting a non responsive website it becomes unmanageable and difficult to use on a small screen like an iPhone. Pinching and zooming to click buttons, and having to navigate horizontally to read text creates a poor user experience and hurts the website’s conversion rate.
Well designed, and well coded responsive sites are more profitable than sites that were designed for desktops only.
An early adopter of mobile friendly design, ProFlowers increased conversions by 20 – 30% after improving user experience through responsive design principles.
Below are the three different versions of the current ProFlowers site.
These are the 3 primary breakpoints that the site adapts to. As it progresses from a small screen size to a larger screen size more features are added to the header, navigation, and footer. The flowers are arranged in a 2 or 4 grid per row grid pattern that adjust depending on the viewport width.
Designing a site with mobile first in mind and then adding new features as the viewport grows forces designers to make smarter choices about what design features effectively communicate and guide the user through their customer journey.
Thinking in terms of mobile really forces you to design with purpose and effectively communicate your clients message anywhere from the smallest smart phones to the largest projector screens.
Compress Your Images For Better SEO
Let’s pretend Bob’s Pizza is fighting for the top spot in the SERP for “pizza delivery” in Las Vegas, NV against Joey’s Tasty Pies.
If both sites had the similar quality of backlink profiles, and similar on site optimizations – page speed will likely be the factor that determines which of these two sites come out on top.
There are many factors behind page speed, but one common culprit and perhaps the easiest to fix is not compressing your images. If you’re curious to see whether or not your images are compressed visit GTMetrix.com and enter your URL to run the speed test.
If you’ve got anything less than an A for the “Optimize Image” metric roll up your sleeves there’s work to do.
It can be tempting to use images where well written CSS will suffice. Often times complicated design features can’t easily be reproduced in CSS forcing the developer to add more images, thus more http requests, and slower page speed.
It’s a good idea for non-coding designers to familiarize themselves with CSS and HTML to understand the limitations of the browser compared to what can be accomplished in Photoshop.
For the graphic assets that can’t be coded as CSS, it’s important to reduce the file size as much as possible without sacrificing the quality of the image.
There are a number of WordPress plugins such as Kraken.io or WP Smush It. It’s possible to reduce the file size of an image by up to 75% or more with these plugins.
If you’ve got an image on your site that’s nearly 1 mb in size you can trim it down to nearly 250kb with virtually no noticeable loss in quality to the untrained eye.
Installing and using Kraken.io as a WordPress plugin is a breeze. Simply since up for the monthly service, connect to the API and watch every image you upload compress into a reasonable file size.