Having a mobile-friendly website is vital. 80% of internet users own a smartphone, and the vast majority of those people will turn to their phones when they choosing a product to purchase or brainstorming.
Unfortunately, if your website isn’t optimized for mobile, you could be losing all of those potential customers.
The good news is…
Redesigning your website for mobile platforms doesn’t have to be overwhelming.
The simplest and most effective way to make your site mobile-friendly is to use a responsive site design.
A responsive website uses CSS to alter the rendering of a webpage so that it fits the resolution of the device your viewer is using. It uses the same links and HTML code for the mobile and desktop versions of your site. That way, you don’t have to use too many redirects to link users between your mobile and desktop sites, and you don’t accidentally serve someone the wrong HTML.
That’s why responsive design is Google’s recommended site pattern.
This checklist will give you an idea of how the pros at Grow Design and Development build and market a responsive website. You can use these points to create the ultimate responsive website of your own.
Grow Design and Development’s Responsive Website Design Checklist
#1: Define your audience.
When you’re deciding how to optimize your site for mobile users, start by painting a picture of who your users will be.
- What will your site’s visitors needs and wants be?
- Will those desires be different for mobile users and desktop users?
You can use a variety of tools to help you get an idea of what your audience’s interests are:
- Analytics
- E-commerce tracking
- Persona Development
These tools will give you a better idea of what your visitors are shopping for, what they’re interested in, what their problems are, and other key demographic information.
#2: Analyze the competition.
Another great way to get ideas for your website redesign is to take a look at the competition.
- What features do your competitors’ websites include?
- What are they doing well?
- What features do you feel they’re missing?
This research can give you an idea of what might your customers expect from your website.
#3: Build from the bottom up.
Mobile has changed the design game. You’ll notice that Grow’s site and the other sites we’ve built have clean, simple layouts. This style rose from the impact of mobile devices on internet use. Modern, professional websites are clean and elegant because they’re designed for both large desktops and smaller mobile devices that can’t display complicated layouts.
At Grow, we think about mobile experience first and design from that perspective, rather than building a website for desktop and treating mobile as an afterthought. By thinking of design this way, your viewers get an exceptional user experience regardless of the device they’re using.
#4: Decide what breakpoints you need.
A responsive website works by sensing the resolution of the device accessing your site, and adapting the site to fit that screen. For example, say someone is accessing your design from a smartphone. Your site will adapt to fit their screen differently than it would a tablet or a desktop computer.
To do this, you will use CSS to define different breakpoints. Breakpoints allow you to choose where you’ll change your site’s layout for a different device. Basically, it tells your site, “if a screen is this big, use this layout. If it’s bigger, use this layout.”
You may be tempted to base your website design on the size of the device, but that’s actually not the best way to go. Remember, you’re catering to a market of smartphones, tablets, notebooks, and desktop computers which come in a wide variety of sizes.
Instead, base your breakpoints on your content by resizing different elements on a page for screens with more pixels, or less. Start with a small screen, and expand the layout until the site doesn’t look good anymore. That’s where you put your breakpoint and move things around.
#5: Optimize for thumbs, not mice.
When you’re designing your website and thinking of how your content will appear at different breakpoints, remember- the smaller the screen, the better the chance people will be navigating using their fingers instead of their mouse.
Make sure your links and interactive elements are large and spaced out well.
Nothing will drive a user to your competitor’s site faster than a bitty little link smushed between two other site elements that they can’t click.
#6: Mind your site speed.
Speed matters, especially on mobile-friendly sites.
Mobile users using their smartphones to access your site don’t want to waste their precious data waiting for your page to load. If your site doesn’t load in two seconds or less, you’ll start to lose people.
Plus, there are other benefits to having a speedy mobile site. Search engine crawlers don’t want to wait forever for your site to load, either. Search engines like Google factor site speed into their ranking algorithms. That means having a quick website boosts your SEO.
Good news: having a responsive design will make your site faster!
A responsive site means that your users only have to download the images and content best suited for their devices. So users with low-resolution devices don’t have to wait for huge images to load.
#7: Use visuals that will work on mobile devices.
Certain videos and other formats for animated content won’t work on all devices.
Part of designing from the bottom up means making sure your content will work on both smartphones and desktops. This will improve user experience, and can improve your SEO. If Google discovers that your site contains content that won’t work on a searchers phone, they’ll note that it isn’t mobile friendly in search results, which can lose you business.
Make sure your videos aren’t license-constrained. If something is taken off of YouTube for a copyright violation and you link to it, for example, it won’t show up on your site. You can use HTML5 tags instead of Flash video players to make sure your content is smartphone friendly.
#8: Decide if you need a native app.
When you think of an app, do the apps you’ve downloaded to your phone from Google Play or the App Store come to mind? Those are native apps.
When you’re optimizing your website for mobile you may wonder whether or not you need a special app for smartphones and tablets.
A native app can be useful, but because it isn’t a website it makes it harder to link to and share your content. It’s also more challenging to make apps widely available because you have to design them so that they’re compatible with a specific device. If you want to be available to all of your potential clients, you may need one app for Apple devices, one for Android, one for Blackberry, and another for Windows. They’re also much more expensive to develop than responsive websites.
Because of this, we recommend a responsive website as your first step towards mobile optimization.
That said, consider a native app if you need and of the following:
- Allow your users to access your information offline.
- Send users push notifications.
- Access to physical features such as a phone’s camera or GPS.
#9: Update your SEO strategy for mobile.
Search engines like Google and Bing factor whether or not your site is mobile-friendly into their search engine rankings. As we mentioned earlier, Google even favors responsive designs over other mobile-optimization techniques.
This means tailoring your SEO strategy for mobile users is an important part of a good marketing plan.
Your analytics software will be a big help here. Using analytics to track which devices your customers are using will help you understand which elements of your SEO strategy are working best for viewers on mobile devices. That way you can adapt it to bring in traffic from smartphone and tablet users.
#10: Update your content strategy for mobile.
You can help your website rank better in search engines by keeping in mind that many readers will be viewing your content on their mobile devices.
You can keep your readers happy by offering a variety of content- longer content will entertain desktop viewers, and shorter reads will go over better with the smartphone crowd. Your smartphone readers won’t want to wade through long, nuanced paragraphs on a four-inch screen.
A content strategist can use techniques such as persona development to help you visualize how your target audience uses your mobile website. This will allow you make an educated decision on the type of content you publish.
#11: Make sure you incorporate social media.
When you pick up your phone in the morning, I’ll bet Facebook is one of the first things you check.
That’s true for your customers, too. Social media use takes up a lot of mobile users total time on their devices.
When you’re designing your responsive website, make sure you integrate social media sharing into it. This will let more people find your content, and thus, your website.
Buttons linking to your company’s social media pages should be easy to find. You also want to make sure viewers can easily share your blog posts and content on their social media pages- incorporating an option to share content into your blog template is a great way to do this.
#12: Testing, Testing, 123.
Before you go live don’t forget to thoroughly test your site. This is a key part of optimizing your website for user experience.
Try techniques such as:
- Usability testing: this tests how usable your website is.
- A/B testing: this test shows two different versions of the same website to similar viewers to see which one brings in more visitors.
- Quality testing: this tests for bugs, typos, and other details.
#13: Set goals for your mobile-friendly site.
Are the KPIs (Key Performance Indicators) on your analytics software set for the unique goals for the mobile version of your site? For example, you may want to track total mobile visitors, mobile bounce rate, or app downloads.
Setting goals for your mobile-friendly site will help you measure your site’s success and grow your business.
Having a professional, responsive website design will help you modernize your business. A website redesign can seem like an insurmountable task, but it doesn’t have to be. Grow’s team of experts have spent years learning the best way to help small businesses build their websites. This checklist allows you to learn from our experience and take your site to the next level.
If you have any questions, or would like to learn more about our services, don’t hesitate to contact our team of design and development professionals.
Guest blog by GROW.
