9 Responsive Websites All Online Marketers Should Mimic

9 responsive sites you should mimic

Free Guide: If you’re getting ready to update your site and plan on creating a responsive website, you can use this guide to help identify the key areas to focus on using the 9 examples below. Download the guide here! 

Are you looking to make your website mobile-friendly? We reviewed some of the top websites from some of the top bloggers—but we did it from our mobile phones.

It’s important to know that all of these sites are using responsive websites.

If you’re asking, “Should I be using a responsive website?” We talked about that here.

Now, Each of the blogs was reviewed based on a number of factors some of which include:

  • Readability from a mobile device
  • Ease of navigation
  • Clean and sexy design
  • Quality content
  • Utility
  • Page speed and load time
  • Supporting the businesses goals (these are based off of our assumptions)

Now, the below screenshots we’re all taken using a Samsung Galaxy S4 although these sites were reviewed on an iPhone as well. With each example we’ll point out;

  • Why we love the sites mobile design
  • Key-takeaways for you to think about when making your own site mobile-friendly
  • If needed, we’ll make a recommendation or two as to what sorts of things might make the site better.

When it comes to blogging, podcasting or any content/news based site— we believe the best route to make your website and blog mobile-friendly is using responsive design.

We’ll be reviewing mobile-optimized sites (or as some would say, separate mobile websites such as m.walmart.com) in a future post.

Now, it’s important to keep in mind that having a mobile-friendly blog today is critical. With mobile internet usage recently passing desktop, more and more people will be reading your blog from their phone.

As bloggers, we leverage email and social media (as well as many other tactics) to drive our audience to our site.

Well, 65% of all emails are opened on a mobile device and over 70% of both Facebook and Twitter usage are from a mobile device. Think of how many times you’ve been on Twitter and clicked a link from one of your favorite bloggers and ended up on their site—from your phone! It happened to me this morning (and will a handful more times today)

Social To Mobile

With that in mind here are the top 11 mobile responsive sites you should mimic when making your site responsive.

1. Smart Passive Income with Pat Flynn

Smart Passive Income is Pat Flynn’s site that shows you how to grow your online business and he shares what he’s done, what works, and what doesn’t. First lets look at Pat’s site on a more traditional size screen.

Desktop View: 15” Notebook

SPI 15" Notebook

Samsung Galaxy S4 View

SPI Galaxy S4

What We Love

  • The site is super clean and maintains it’s branding as you go from desktop to mobile resolutions.
  • As it responds down to smartphone resolutions you’ll notice some items are no longer displaying, which actually creates a better mobile viewing experience. By not displaying last months income report and the photo of Pat, the key elements of the site (navigation (see#3) and call-to-action (see #1/2) can remain above the fold.
  • The navigation responds at smartphone resolutions to go from 7 tabs that run horizontally to a simplified drop down menu (see #3)
  • The two step option (see $4) that allows you to opt-in to his newsletter.
  • The large full-width images for each episode accentuate the episode title.
  • The podcast player runs full-widths as well making it easy to view and tap.

Key Takeaways For You To Think About

  • Don’t display areas that will disrupt the mobile users experience and push key site elements below the fold. Eg: Pat removing his income counter and image.
  • Rollup your navigation into a drop down and use a common icon/button like Pat does. We call this the hamburger button. :)
  • Leverage the screen real estate to get your visitor to take the action you want right up front. Eg: Pat displaying his “Get Started Here” button.
  • His 2 step email opt-in offers an almost full-screen opportunity to opt-in to his email newsletter (a very important asset). He uses LeadPages and their LeadBoxes feature to power this. (See video below, towards the end to see this in action.
  • Make sure your podcast player is easy to tap with a finger.

2. I Will Teach You To Be Rich

The popular blog of Ramit Sethi is one of the best blogs I follow. He has some of the best writing where he covers everything from finance to psychology and how that can help you save more money and ind your dream job. His newsletter is one of the few that I actually subscribe to because I literally learn something new every time he sends an email.

Desktop View: 15” Notebook

IWTY 15" Notebook

Samsung Galaxy S4 View

IWTY Galaxy S4IWTY Galaxy S4 - 2   

What We Love

  • First, Ramit knows his stuff. He has one of the best newsletters hands down and produces quality content.
  • Like we’ve seen with Pat’s site, Ramit uses the hamburger navigation in the top right corner (see #2)
  • His featured products are front and center and he drives you to opt-in with compelling headlines with tappable buttons that drive you right to an amazingly written opt-in page for his course.
  • When you look at some top bloggers like Ramit, you see very, very simple navigation (see #3). He doesn’t want you straying too far from accomplishing exactly what he wants you to do…opt-in.
  • His landing pages and pop-overs that promote things like his book are all extremely mobile friendly and aimed at capturing emails, which is one of his main goals (see #5).
  • If you scroll the to bottom of his site you’ll see an arrow in  yellow that jumps you back to the top. I love this technique for the lazy that won’t scroll back to the top. Super shortcut.
  • He keeps his product page super simple with simple logos, descriptions that drive interested visitors to his high converting sales pages and opt-in pages.

Key Takeaways For You To Think About

  • When you have your focus super dialed in, enhance that focus through simplicity in both featured content and navigation
  • Make all opt-in forms mobile-friendly using something like Opt-in Monster, which I use and is great.
  • Think about adding a jump to top button in your footer to make it easier for visitors to return to the top of your site without having to scroll back to the top.

What Could Be Better

  • You’ll notice if you click “free tools” from his navigation it takes you to a non-mobile page which may be hurting conversions for that particular form…with such simple navigation, I’d guess the that area draws some attention in that it’s “free” and would want to correct that like the other forms.

3. Copyblogger

One of the first blogs I started reading when I got into blogging back in the day was Copyblogger. The reason this site does so well on mobile is because they’ve though pretty much everything through. Copyblogger delivers content, training and software and no matter which path you take from their site you’re delivered a pleasant mobile experience.

Desktop View: 15” Notebook

Copyblogger on 15" Notebook

Samsung Galaxy S4 View

Copyblogger Galaxy S4 - 1 Copyblogger Galaxy S4 - 2

What We Love

  • A super clear call-to-action on the home page welcoming newcomers. You are almost guaranteed to know if you’re in the right place. (See #1)
  • I love the use of a short video on the homepage to better explain what the site is about and the Copyblogger offering.
  • As you can see in #2, the navigation is accessible via the hamburger menu and the navigation buttons are nice and tappable making it easy to get where you want to go.
  • In #3, the blog post uses a nice big headline, large graphic and short, simple sentences making the post easy to read on mobile. The sharing is front and center above the fold making it easy for visitors to quickly and easily share the content with their networks.
  • As you scroll down the homepage you’ll find the topics discussed (see #4) on the site which are nice large tappable buttons.
  • The buttons fem #4 drive readers to pages similar to #5 which begin go into the topic at hand but with strong call to actions in bright green buttons getting people to opt-in.
  • The software and services that they offer all have mobile responsive sites as well as you see in #’s 6, 7 and 8.
  • In their sales page to their free subscription called My Copyblogger, they list out all the benefits and features using easy to read checklist bullets.
  • When it comes to registering and opting-in, you need mobile-friendly forms and Copyblogger knocks it out of the park in #10 when it comes to getting visitors to register.

Key Takeaways For You To Think About

  • If you have software or other properties linked from your site, make sure those destinations are mobile-friendly.
  • Make your navigation buttons large and tappable.
  • Increase your chances for opt-ins with strong call-to-action buttons using colors that stand out.
  • Try using headlines, bullets and numbers to make your content easier to consume.

4. Neil Patel

Neil Patel is one of the co-founders of KISSmetrics and CrazyEgg and writes at QuickSprout. He is a sought after marketer that focuses on SEO and content marketing.

Desktop View: 15” Notebook

Neil Patel on 15" Notebook

Samsung Galaxy S4 View

Neil Patel on Galaxy S4

What We Love

  • The large in your face call-to-action with the language that his audience is bound to be using (#1)
  • In #2 A mobile friendly form with large tappable areas to complete. Additionally, only requiring 3 fields makes it much shorter to complete.
  • A large tappable button that also offers an incentive zed call-to-action for a confidential consultation ( See #3)
  • A subtle hint to create urgency in #4 by mentioning the scarcity of the offer.

Key Takeaways For You To Think About

  • Use your customers language in your primary call-to-action.
  • Make your forms usable and short on mobile making it easy to complete.
  • Use large tappable buttons for people to complete their opt-in
  • Use scarcity to create urgency for visitors to take action.
  • Leverage location to personalize the copy. Notice on mobile he says “in your city” because he didn’t ask permission to get my location, but on desktop it says San Jose.

What Would We Modify

  • I would double check the code is pulling the right locations as I’m nowhere near San Jose. (If this is supposed to be location in the first place)
  • I’d test the site on a few devices to make sure words don’t get cut off awkwardly like in the button promoting the consultation  (See #3)

5. QuickSprout

Surprise, Neil Patel strikes again with his main blog, QuickSprout where he does some great things from a responsive perspective.

Desktop View: 15” Notebook

QuickSprout on 15" Notebook

Samsung Galaxy S4 View

QuickSprout on Galaxy S4 - 1 QuickSprout on Galaxy S4 - 1

What We Love

  • The immediate call-to-action to enter your URL to get customized traffic and SEO insights for your site. (See #2)
  • The use of HelloBar, and that it is tweaked to work on mobile. (See #3)
  • His landing pages that promote his key products are leveraging large bold fonts and bullets to explain the benefits. (See #4)
  • The use of visual checklists to clearly communicate the offering to the reader. (See #5)
  • The options that leverage tappable buttons that stand out and are easy to select. (See #6)

Key Takeaways For You To Think About

  • Use HelloBar as another method of driving clicks to either capture leads or traffic to a specific page or landing page of your site. (Tweak it for mobile as many people have had problems with this) (See #3)
  • Your home page should be a key source of opt-ins (See #2)
  • Make all of your landing pages mobile-responsive. I use LeadPages for this and it works in minutes.
  • Leverage checklists to highlight the benefits of your products and services (See #5)
  • Use larger, tappable and distinguishable buttons to help guide your user in the right direction. (See #6)

What Would We Modify -The only thing I’d really fix would be the navigation. The text is a bit small. If there were ever more navigational options added it might get crowded looking and push the opt-in box below the fold. This can be solved by rolling the navigation into a hamburger menu like the sites above.

6. KISSmetrics

Another one of Neil Patel’s businesses along with Hiten Shah. This is a bit different than the others as KISSmetrics has an amazing blog but they are really a software company so their homepage drives leads to use their software.

Desktop View: 15” Notebook

KISSmetrics on 15" Notebook

Samsung Galaxy S4 View

KISSmetrics on Galaxy S4 - 1 KISSmetrics on Galaxy S4 - 2

What We Love

  • The ease for existing customers to login. This tells me they have people logging in from mobile enough that this is front and center. (See #1)
  • Like the other sites mentioned, they are focused on capturing leads and getting people excited about using their analytics. (See#2)
  • The navigation is at the bottom which is different from the others but effective since the main drive is to get users to enter the URL not explore down to the pricing and blog when visiting the homepage.
  • Having the search bar at the top of the blog page makes it easy for mobile users to search topics of interest without having to do a lot of scrolling and tapping to find what they are looking for.
  • The simplified pricing and plan descriptions (See #6, 7)

 Key Takeaways For You To Think About

  • If existing customers need access to software quickly, make it easy for them with tappable sign in buttons above the fold.
  • Let your main goal capitalize the screen real estate. If that means making navigation secondary, by all means do it.
  • Leverage search when possible for mobile users to lessen the number of taps and swipes to get what they are looking for. (See #4)
  • Use large pricing, toggles and lists to communicate pricing plans clearly. (See #5, 6, 7)

7, 8, 9: Entrepreneur On Fire, OkDork & Videofruit

The last three sites are three that I think do a great job of showcasing their lead magnets, similar to the other sites we’ve talked about. These marketers really want their visitors opt-ing in as you can see by their main focus. Let’s take a peak and see what they are doing well.

Samsung Galaxy S4 View

Responsive Sites with LeadBoxes

What We Love

  • The social proof that John Lee Dumas uses on EntrepreneurOnFire.com helps showcase that others have opt-in as well.
  • Noah Kagan of Okdork.com maximized the screen real estate to get you to opt-in with a compelling call-to-action.
  • Bryan Harris of Videofruit.com shares testimonials from reputable customers (like Noah Kagan from the example of above)

Key Takeaways For You To Think About

  • Leverage social proof when you can to entice users to opt-in (See #1)
  • Maximize your homepage above the fold to get users to take the actions you’re looking for. (See #2)
  • If you have testimonials, use them near your opt-in magnet and accelerate your conversion (See #4)

What Would We Modify

  • The only thing I would modify here is making sure the opt-in field in #3 for Okdork.com goes full width similar to the button below it, making the “enter your email address” instructions more visible.

Download our FREE Responsive Website Guide So You Can Have These Examples Ready When You Start Your Next Web Project

  • Darren O’Connor

    Great read Greg. Thanks.
    2 Questions for you. I’m using Optimize Press 2.0 It works great as a mobile responsive theme.

    Looking at Pat Flynn’s site, he has a big feature image that scales nicely as you reduce the size of the window. But when you get to mobile phone size the image disappears. Is this custom code or do you know of a way to do that as it is awesome?

    Can you recommend a floating social media share bar. I’m using Buffer’s Digg Digg but it is not reacting well with OP 2.0

    Keep up the good work Greg

    • http://www.smartpassiveincome.com/ Pat Flynn

      Hey Darren – my team and I decided to get rid of the image after a certain width because it was too small and distracting at the smaller size, and I believe this is custom-coded. It’s just set in the code to disappear at that point. Wish I could technically share how it’s done, but that’s not my expertise, and why I hired someone to help :P

      • http://greghickman.me Greg Hickman

        Thanks for contributing brotha.

    • http://greghickman.me Greg Hickman

      Thanks Darren, as per Pat’s response, custom code on that execution. Similar to my new site. You’ll notice things are not displayed at certain widths.

      What I would do, is just hire someone on odesk with OP experience and have them add that as a part of your theme. I can’t imagine it would take that much effort as OP is already responsive.

      As for the share bar, I personally don’t like the floating bars and as you’ll see a lot of people don’t use the floating bars even on their desktop site. A lot of people (myself included) are using Flare which has some real nice customizable features.

    • colink

      To make an element appear / hide at various screen widths you use Media Queries. Any competent with CSS3 can easily do this in about 5 lines of code per element.

  • Beth

    Thanks for the takeaways, Greg. This is a great way to figure out what responsive means for your site. Are you aware that the comments for IWT are an exact copy of the comments for Pat Flynn’s site?

    • http://greghickman.me Greg Hickman

      Whoa, that’s weird. Must have got entered into WP wrong. I’ll fix that now! Thanks for catching that!

      • Beth

        No worries. I was about to post to IWT community (as a Ramit student)!

        • http://greghickman.me Greg Hickman

          All fixed! Post away! :)

  • richajn

    Gregg, I gotta love this post! You’ve got all my favorite bloggers up there! It was a bit of deja-vu – as if it’s straight from my RSS feed. I’ve loved the recent (ok, I guess it must be 6 months now) overhaul to both Pat’s site as well as Ramit’s.

    ps: first time visitor to your site.Love the way you use graphics. They are a bit like Neil’s :)

    • http://greghickman.me Greg Hickman

      Thanks Richajn! I appreciate that. My assistant, Nyle is amazing with graphics. :)

  • colink

    I am probably nitpicking so don’t be too offended. You choice of the majority of the 9 was a bit Incestious – within the IM / Online community.

    I am on an iPhone so obviously wanted to see each site live on my mobile. Not only did you not give a link you did not even give a URL. I am sure you were not trying to conserve link juice :-)

    • http://greghickman.me Greg Hickman

      Thanks, I’ll add links. Totally missed that. I’d love some of the sites that you like. Please share.

    • http://greghickman.me Greg Hickman

      Links added. Thanks again.

  • http://themes.3rdwavemedia.com/ HTML5 Templates

    Thanks, Greg! Great article.

    • http://greghickman.me Greg Hickman

      Thanks what was your biggest takeaway?

      • http://themes.3rdwavemedia.com/ HTML5 Templates

        I really liked the case studies you chose! I’ve bookmarked your article so I can use your analysis as inspirations and checklist when I do my next responsive web project! :)

  • http://www.EntrepreneurOnFire.com/ John Lee Dumas

    WOW, great article and thank you for the kind mention…I am honored!

    • http://greghickman.me Greg Hickman

      You bet buddy! Keep rockin’.

  • Pingback: Niche Site UPGRADE – Security Guard Training Headquarters

  • Pingback: Niche Site UPGRADE – Security Guard Training Headquarters | Internet Online

  • Pingback: Niche Site UPGRADE – Security Guard Training Headquarters | Earning Passive Income

  • Pingback: Niche Site UPGRADE – Security Guard Training Headquarters | FireMoney

  • Pingback: Niche Site UPGRADE – Security Guard Training Headquarters | Passive Income Success Made Easy