Guide To Mobile Web Sites

Recently I was honored to speak for my first time at the annual BlogHer conference. I participated in the Geek Bar, which focused on technology and, personally, I focused on getting blogs and web sites mobile-ready in light of the recent changes Google made regarding being responsive to both search engines and our readers.

Here is a synopsis of my talk. Please feel free to ask any other questions you may have in the comments!

What does “Mobile-Ready” even mean?

• Can scale from desktop to smartphone easily
• Can be read by Google and other search engines
• Has the most important elements that your users need on smaller screens

What screens are we talking about?

• Desktop (your computer)
• Tablet (iPad, Surface)
• Phone (iPhone, Android, Windows Phone)

Always think about your users first.

• How are they using your site?
• Where are they using your site?
• What do you want them to do on your site?
• How is each environment different for them?
• How long does your site take to load?
• Always check and recheck your stats, use this information to guide the way.
• Content is king. Always. Mobile-ready means getting the right content where and when your users need it.

If you are starting a site from scratch…

• Write down your goals.
• Decide if you can do this, or if you need to hire out.
• Research themes
  • ONLY select a theme that is fast and responsive
  • ONLY select a theme that gets good reviews
  • READ the comments and ask questions
  • FOLLOW the documentation

 What does “Responsive” mean?

• The server sends the same code but CSS alters it for whatever environment the site is being viewed on.
• @media calls in CSS is what are used to adjust the styling.
• Drag the browser in from the right side to test various sizes.

Why do I want my site responsive, as opposed to other ways of making it “mobile”?

• Only one URL (so you don’t have to change content on two sites).
• Helps Google index site, only has to crawl once
• Do not have to maintain different sites
• Less load time
• Ability to customize content per mobile size

Always think about “Big Thumbs” when making your mobile site.

• Content placement is different
• Navigation is larger, possibly shortened
• Buttons are larger
• Forms and shortened or eliminated
• Ads are smaller or placed differently

How do I retrofit my web site or blog?

• Using a Content Management System (CMS) like WordPress or Squarespace is half the battle
• Check if your site is mobile friendly via Google’s free checker:
  • www.google.com/webmasters/tools/mobile-friendly/
• Use Plugins (examples):
  • WP Touch
  • Mobile Press
  • Jetpack
• Use a new responsive theme
• Add @Media CSS to existing theme

The web changes all the time! How do I keep up?

• Keep reading, searching the web – there are warning signs!
• Plan on updating monthly and revamping every 1-2 years
• Don’t be afraid to invest in a web developer; it’s worth it.
• Test, test, test. Look at your on different platforms every chance you get.

I hope that you found this post about
mobile websites and blogging helpful!

Now get in there and make everything responsive!