Fearless Online Strategies

How Can I Make My Site Mobile-Friendly? | NC Answers

By on Jan 21, 2016 | 3 comments

Six Pack of Spotted Cow Beer to celebrate your mobile-friendly website design

What does this delicious beer have to do with a mobile-friendly site? Read on, my friend!

From Matthew Pantzlaff at Total Real Estate Solutions in Madison, WI. If you want to make some money, talk to this guy. Seriously. He opened my eyes to putting money into apartment buildings – I am now thoroughly convinced I’d be dumb to invest anywhere else.

“NC Answers” is our series of answers to real business owners’ questions about their online presence. Have your own? Send it to us. We’ll talk. =)

Let’s get started on your mobile-friendly journey!

This is a great question. You may have noticed this small phenomenon called “Smart Phones”. They’re those tiny, glowing boxes turning everyone into zombies (myself included).

Mobile browsing is on the rise and continues to grow. If your site gets cut off or otherwise displays wonky on someone’s iPhone, they will probably hit “Back” as quickly as possible and never return. Not to mention it can severely impact your SEO rankings, but that’s a whole other post.

If you’re reading this, I’m assuming you either:

  • Have a website that isn’t mobile friendly, or
  • Are planning to build a website soon

With those assumptions in mind is how I shall write this post. Shall I make an ass of U and Me? Let’s find out together!

We’ll cover:

  • Where should I start?
  • What is a “responsive” website?
  • What’s a theme?
  • Where can you find themes?
  • What to do once you have a responsive theme

Where should I start?

I heartily recommend using WordPress and its many, many, many available responsive themes (I’ll cover what a theme is in a hot minute). As of posting this in early 2016, there are well over 2000 themes available in the “Popular” category just through WordPress itself.

You should think of designing your site “mobile first”. This means as you’re searching for themes, find ones that will optimally show a limited but critical set of information for people browsing your website on their device. Making a fully-featured site with a bunch of shtuff then squishing it into a mobile screen will be cluttered and unreadable.

Mobile-friendly site versus standard site

Nice example by trackerdesigns.com. See a nice post they wrote on the benefits of mobile-optimized design here.

What is a “responsive” website?

A responsive website is one which “responds” to the size of the browser window.

Mobile-friendly display for No Coward's site

A “Vertical” responsive view.

Landscape responsive view of No Coward's website

A “landscape” responsive view.

Try it on our site: resize the window on your desktop to look like the size of your phone screen.

Or, if you’re reading this on your phone/tablet, a) thank you for proving my earlier point and b) turn your screen the “other” way (landscape -> portrait or vice versa). Notice how our layout adjusts based on the size of the window? That’s responsive.

If your site doesn’t move with the window, ya got problems.

“Okay, got it. Now… what’s a theme?”

A theme is like a design template. For WordPress sites, Premium themes – which we recommend – generally range $40-$100 and give you tons of options and features with full customizability. You can certainly find decent free themes, but they don’t offer the same level of customization or support as a Premium theme. In either case, however, they will make designing your “front end” (what visitors see) much faster and more cost-efficient as much of the work is done for you. This is our preferred method for this exact reason; it allows us to save you some money while focusing on what we do best when it comes to your online presence. Spending time building a custom site is something we can do, sure, but it’s only the best option for larger organizations with very specific needs. WordPress can get you up and running much faster so, again, we can all focus on building your online presence as an effective part of your business. Oh, and that saving money thing. That’s cool.

WordPress also has an excellently designed, user-friendly “back end”. This is where you go to post blogs, update merchandise, add new pictures, and more. In the same way Windows makes using a computer relatively simple, WordPress has created a clean, elegant website manager. A huge community of active theme and plugin designers gives the ability for small and medium business to have websites that closely mimic the functions and power of a fully customized site at a fraction of the cost. So go ahead and grab that six-pack – you’re saving money!

Six Pack of Spotted Cow Beer

And there it is. Mmmmmmm…

Where can you find mobile-friendly themes?

We love ThemeForest.net (affiliate link). It has an enormous selection of high-quality themes with excellent search capabilities (a great example of where a custom-built website is appropriate). If the theme is listed as “responsive”, you can feel comfortable upon purchase it will automatically adjust your site to be viewed on mobile devices. Please note I am saying it can be viewed on mobile devices. This is different than optimized. More on that in a second. Each theme has a “Live Demo” option so you can see it in action, though be warned this can be a lot to take in; the designers cram all features and options into the demo to show off what they have to offer. In any case, you will need to tweak the mobile design to make it just right, but a responsive theme will more or less work “out of the box”.

I have a responsive theme installed on WordPress. Now what?

If possible, hire someone who’s a professional designer to handle it from here. There is a lot of minutiae required to truly optimize your site for mobile, tablet, and desktop viewing. We’ll talk to you about your vision and goals, and take it from there.

If you’re going the DIY route, go back to your “mobile-first” mindset and, based on your theme, start to organize your information appropriately. This is know as “Information Architecture” and is very important. Visitors need to find their way to where they’re going as quickly, easily, and logically as possible. Not only is this important for your visitors’ experience, but the way they interact with your site is a large factor in SEO rankings.

Testing once the design is finished is necessary. Visit every page. Click every link. Look at every picture. Make sure it displays how you’d like on every device you can find to test. Call your mom and have her look. Ask your neighbor. Have your friends do a quick once-over on their phones while you’re texting about the latest episode of Game of Thrones.

Once you feel good, it’s ready to go!

IN CONCLUSION! aka TL;DR

WordPress makes mobile-friendly design much simpler. There are many other factors to make your site well-designed for mobile for which we suggest utilizing professionals. To get the best results, you need to create a different experience on mobile versus a desktop. Using responsive themes will help you do this quite efficiently as many smart considerations in design have been made for you.

Using a professional will help answer questions like what to include on mobile versus desktop, user experience / usability, layout, colors, and more. But if you can’t be bothered with all that right now, around $100 or less coupled with some elbow grease will give you the power to be mobile friendly by the end of the week. Sweet.

Love,

Jason

A few other thoughts on building a custom site from scratch…

Building a site from scratch gives way more power and flexibility, but at way more cost. And not only up front. Custom sites require maintenance and updates regularly. You’ll end up paying the person who originally built it, or hiring someone new who not only has to update and fix it, but learn the entire custom-built, one-of-a-kind system. So basically you pay double (or more).

Carefully consider your costs and needs before hiring a developer to build you a completely custom website. Not sure if you need one? Drop us a line with your questions and we’ll be happy to help guide you!