13 In Blogging

4 Reasons Why Your Blog Needs to be Responsive

Good morning!!

How are you today?? Almost through another week, and a busy week at that! I’m looking forward to our weekend plans, and can’t wait to tell you all about them on Monday!

Yesterday was a rest day, so the hubs and I spent an evening shopping and dating each other. We like to make it a point to have a date night at least once a week, and get out of the house for dinner!

Let’s chat real quick about Tuesday’s workout.

I met up with my friend Erin, and we ran part of the Arkansas River Trail, then up and over the Big Dam Bridge. We intended to just do two leisurely miles, but then decided it was too nice out to not add on a third. Plus, she has a half marathon coming up, and I really need to kick up my training!

running in little rock

We kept our average pace at 8:54, and I felt pretty good! I think I’ve decided that just under 9 minute miles is my comfortable, safe pace, and if I can keep it at that, then I should be in good shape to push it at my upcoming 10k. For upcoming 5k’s though, I’ve got my sights set on a PR. Not sure what 5k will be my next PR, but 24:28 is itching to be beat! I haven’t been feeling very “fast” these days, so that’s going to be my summer goal: get my “fast” back.

Ya’ll, it’s going to be 80 today! I’ve actually got a photo shoot mini session lined up tonight, so a run probably won’t happen, unless I can sneak away before it gets dark! We’ll see. I always hate not running two days in a row, but such is life.

why your blog should be responsive

Ok, time for blog talk! I love sharing tidbits of information I learn and am implementing at my full-time digital marketing job, because I know my fellow bloggers enjoy reading them! So, if you’re not game for some tech-chat, you can go ahead and peace out. Or, buckle up!

4 Reasons Your Website or Blog Needs to be Responsive (In my Opinion)

What exactly does “responsive” mean? If you’ve looked around lately, then you’ve noticed a vast majority of people now days own smart phones and tablets, i.e. iPhones and iPads. And what do they do on their smart phones and tablets? They read websites and blogs. So, as bloggers, and websites owners, we need to cater to our users, and make their experience top priority. If our blog or website isn’t easy or fun to read, I guarantee your traffic will reflect that.

Now, for a website to be responsive, it means that a website on a desktop monitor, looks the same on a laptop, a tablet, a smart phone, etc. It is the same site, one entity. The design elements may not be in the exact same places on each, but they will float and move to where they will fit, and where the template has told them to go. A responsive website has ONE code, and that one code has been written to adapt to all screen sizes. Responsive web design is actually quite a bit of math, but let’s not get into that right now!

responsive

(via)

responsive sites

See how it still looks the same? Same design, same template, same colors, everything is still the same, because it’s still the SAME SITE. The menu may collapse, and certain widgets or modules may float around to a different spot, but it’s the same site. It’s fully viewable and easy to read on every type of device. It is RESPONSIVE to the device’s specified display size and renders itself accordingly. The framework of a responsive site has used lots of math and percentages that I don’t understand to tell itself how to resize.

The StudioPress website will give you a better idea of what I’m talking about. (responsinator.com is a fun one too!) The screenshots below will show you how my blog looks across multiple devices, from iPhone to iPad.

Screen Shot 2014-04-10 at 11.51.17 AM

Screen Shot 2014-04-10 at 11.52.20 AM

It shows my logo not loading correctly in the iPhone slot, but I promise it renders fine 🙂

Now take for example Runner’s World:

Screen Shot 2014-04-10 at 12.01.00 PM

It is not responsive. See how the content gets cut off as you change devices? If you could hover over each image, a scroll bar would appear and you’d see that you have to scroll across to see it all. So, to fix that, they use a Mobile site instead, which I will explain in just a sec!

If you grab the corner of your browser window and drag it down to a smaller size – if a site is responsive you will see everything scale down and move around to fit into your browser window. If it’s not responsive, you will eventually get a scroll bar at the bottom of your browser window and none of the elements will move or shrink down. You will inevitably have to scroll across to see everything. Boo. This is because your template code has defined a fixed position for everything, and that is where everything will stay, regardless of how it’s being viewed.

So, here is my blog on my iPhone:

photo (3)

It has taken everything and scaled it down to a readable size, then stacked the elements of the site, so a user isn’t scrolling from side-to-side, or missing out on parts of the site. It is the same URL, same everything, same look, same feel, same user experience. But, it is less overwhelming because it is not forcing you to zoom in and out to see the content. You aren’t shown a teeny tiny hard-to-read view because the site knows how to scale down to the appropriate screen size. It is responsive to the screen size.

photo (5)

photo (4)

On the flip side, here is my old photography blog on my desktop:

Screen Shot 2014-04-10 at 10.19.09 AM

and here it is on my iPhone, it is NOT responsive:

photo (8)

photo (6)

See how it looks different?

That’s because this is a MOBILE SITE, instead of a responsive site.

A mobile site is a completely separate site that is built to be viewed on mobile devices. Instead of the site’s elements floating to rearrange themselves and fit in the appropriate screen size, it shows a different site all together. The URL could potentially appear as m.sarahingleblog.com. Now, a lot of times you won’t see m.blogname because the webmaster has chosen to keep the same URL for both the desktop and mobile versions of their sites, but show different content, (dynamically) while others use a completely different mobile URL (separately). (You can read more in-depth about that from Google) Without going into more details, basically a mobile site is a second entity.

Mobile sites are often simpler, lesser versions of the full site. Have you noticed how when you go to Safari on your iPhone to facebook.com, you have the option of viewing mobile or desktop? Same with oldnavy.com. This is because these companies are using Mobile sites.

fb

oldnavy

Does that make sense?

So here is Facebook’s Desktop Site but on an iPhone:

photo (1)

Since full sites are often too small to read on smaller devices, a mobile site is used to bring the most important content to the forefront.

Now don’t get me wrong, a lot of mobile websites are great, function great, and each have their pro’s and con’s. But, Responsive in my opinion, is the way to go! Mainly, for SEO purposes.

So now let’s talk about a few reasons why a responsive blog is the best choice!

1. Consistent user experience – A cohesive look is key to success, and your branding should be the same on everything. If a reader comes to your blog on their desktop one day, then on their phone the next, and they look different, it could be confusing. They might wonder if they came to the right site. Also, if they’ve pin-pointed something on your site and they want to find it again later but maybe on a different device, it’s easier to find things when they’re in the same place each time. Think about your blog as your business – how often do you frequent businesses whose business cards, logo, packaging, and overall vibe don’t coordinate?

2. Google prefers it, and if Google prefers it then it’s good enough for me – Google has clearly stated that a Responsive design is what it prefers. Again, more HERE. Because a responsive design is ONE URL and ONE code, Google has an easier and more efficient way to crawl your site for the search engines. It’s taking one route, one highway. Also, since it’s all ONE entity, it’s easier for your readers to share links – so say when you open up an email on your phone then click on a link to a blog, if that blog is responsive (or mobile-friendly at the very least) it’s going to be easy to access and you will probably stick around to read it. (Think about your email subscriptions!) Not to mention, responsive sites tend to load faster, which is always a good thing for seo! Basically, it’s cleaner, and more streamlined for Google, and when it’s easier for Googlebots to access, your rankings will be better! A Responsive design, being one code, also reduces the chances for errors, and we all know the less errors, the better!

3. Ease of use, you don’t want your readers frustrated with your site – Simply put, zooming is annoying! When a blog pulls up on my iPhone and I have to scroll and zoom all over the place, I am 90% more likely to say “forget this, I’ll pull it up on my computer later…” which I then never do. Think about your readers. You want the ability to read your blog on their phone or iPad or whatever device, to be as easy and quick as possible. If you’re a running blogger, think about all those readers who are sitting on stationary bikes or jogging on a treadmill and want to pull up your blog on their phone real quick, but they have to take one hand off and zoom and scroll around to find what they’re looking for.

4. Everyone and their dog has a mobile device or a tablet, and it’s only going to increase in the future – We all know this is true! We are a society on the GO, and it doesn’t look like we’re slowing down anytime soon. I mean really, how many babies do you see playing on iPads? Pretty soon, your mobile traffic will trump your desktop traffic, if it doesn’t already! Just go into your Analytics and see what % of your users are using non-desktop devices and it might surprise you. As an added bonus, with a responsive design, your blog will work on new devices we don’t even have yet, so it’s like you’re already ahead of the curve. Responsive design is sleek, professional, and makes you look like you know what you’re doing. It is the industry standard, and you should subject your blog, (your baby!) to the same high quality standards as other great websites.

Basically, responsive comes down to having ONE site, that scales to meet the needs of your user no matter what device they are using. Win for Google. Win for your readers.

If you’re looking for great responsive blog themes, check out StudioPress, and my specific theme is Foodie Pro.

Is this something you’ve thought about? Have you heard about Responsive design? Do you care what your blog looks like on different devices, or had you not thought about it before?

13 Comments

  • Reply
    Ganeeban
    April 10, 2014 at 4:57 pm

    Thanks for sharing. This is awesome, especially for a newbie blogger such as myself. Now if I can get motivated enough to invest in my own personal design (for my blog), I can work on cool stuff like this you are so nicely sharing with us!!
    Ganeeban recently posted…Every girl dreams of…My Profile

  • Reply
    Jen@milesandblessings
    April 10, 2014 at 9:39 pm

    I am jealous of all your computer knowledge 🙂
    Jen@milesandblessings recently posted…Throwback Thursday- birthday #2My Profile

  • Reply
    Christine@ Apple of My Eye
    April 11, 2014 at 12:20 am

    SUCH an interesting post and so incredibly helpful for me! When I got my blog facelift, I had her do it with a responsive design, but didn’t really know what that meant. Thanks for the explanation!

  • Reply
    Meranda@fairytalesandfitness
    April 11, 2014 at 7:54 am

    Oh, so this explains why some blogs are easier to read on my phone and some are not! I always read blogs on my phone. My blog looks good and easy to read on my phone from my point of view so I am really hoping others feel the same way! I would hate to be frustrating people cus my blog format is off! Thanks for the tips!
    Meranda@fairytalesandfitness recently posted…How to Determine the Right Running Shoe For You!My Profile

  • Reply
    Carson
    April 11, 2014 at 9:31 am

    Love your posts about improving the blog! I have learned so much from reading them 🙂
    Carson recently posted…7 benefits of positive emotionsMy Profile

  • Reply
    Katie
    April 11, 2014 at 9:36 am

    WOAH! MIND BLOWN! I skimmed this last night in feedly, but will definitely be pinning. I love responsive sites, and get so frustrated on mobile sites! Have you ever spoke at a conference? Is the healthy living summit on your radar? Cause you would be a wonderful fit there (this September in Madison, WI!)
    Katie recently posted…Yogatta Try This: Part 2 of 6, Types of Yoga!My Profile

  • Reply
    Jaclyn @ BumpSweat
    April 11, 2014 at 9:57 am

    Thank you, thank you for helping us not-so-techy people. Since I’m brand new to the blogging world, there’s so much for me to figure out, which is why I so appreciate getting insight from you and others!
    Jaclyn @ BumpSweat recently posted…Fit Friday: My ‘Relationship’ with Pull-ups + How to Perform them During PregnancyMy Profile

  • Reply
    Stephanie @ Whole Health Dork
    April 11, 2014 at 1:23 pm

    Thanks for sharing! I didn’t realize there was something other than mobile friendly!
    Stephanie @ Whole Health Dork recently posted…Friday Favorite: National Pet DayMy Profile

  • Reply
    Madison @ Running Shoes and Sunshine
    April 12, 2014 at 4:33 pm

    I love the distance shorts. I also have the rogas (which are my favorite)! But I do love all of the pockets of the distance shorts. You really can’t go wrong with either.
    Madison @ Running Shoes and Sunshine recently posted…Running for BeginnersMy Profile

    • Reply
      Sweet Miles
      April 15, 2014 at 9:25 am

      They look super comfy, and like they won’t ride up! I’ll have to check out the rogas!

  • Reply
    Matilda
    April 13, 2014 at 3:00 am

    Responsive sites are still relatively new, but when you are a regular reader it makes it so much easier when you access blogs via your desktop, ipad and phone.
    It’s one of the reasons we upgraded the local running club website to a responsive site. It’s so much better now (it was also 10 years old and very outdated).
    Matilda recently posted…Trailblazers 10km – You YangsMy Profile

    • Reply
      Sweet Miles
      April 15, 2014 at 9:24 am

      So true! Yikes, 10 years old?? Whew, in the web world that’s almost archaic 🙂

  • Reply
    Ashley
    April 15, 2014 at 4:31 pm

    love this info! I know I need to update my site to a responsive theme but just haven’t done it yet… thanks for the reminder!!! 🙂
    Ashley recently posted…24 hours of roadtrippin’My Profile

  • Leave a Reply

    CommentLuv badge