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!

Make Your Site Mobile Ready

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

Google Friendly Web Site Layout

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:
  • 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!

This article has 6 comments

  1. Amy Evans

    Wow, I really had no idea.

    • Jeff

      This is really great information. Thanks so much for sharing. It’s a bit overwhelming, but I am going to keep this as a guide!

  2. Ben

    Great post! So many people do not think this through!

  3. Elmo Donez

    Well, OK, it may not be quite that intense, but many web experts really do have some pretty strong feelings about which is the preferred method of mobile site design. So which method is right for you?

    • Aimee

      Hi! Not sure what you mean? There are many methods, but do you perhaps mean platform like WordPress vs Squarespace?

  4. Deivide

    Tab key to mobile sites. Today is very important sites adapt to all mobile devices

Comments are now closed.

Send this to a friend