Site   Web

February 19, 2015

Six Key Rules for Responsive Web Design

Image courtesy of (Stuart Miles) /
Image courtesy of (Stuart Miles) /

 Over the past decade, the amount of mobile Internet users has more than doubled, skyrocketing from 800 million to 1.9 billion, and one in every four of those Internet users accesses the Web exclusively from a Smartphone device. As this explosive growth continues to transpire, companies need to adjust marketing strategies to ensure survival. According to eMarketer, mCommerce sales are expected to increase by almost 33 percent from 2014-2015, meaning that enhancing the mobile user experience is more important than ever before.

These days, the most popular choice for organizing a mobile site lies in responsive web design, which is the recommended configuration by Google. Responsive design is the term used to describe a website that automatically serves up content in the proper layout and sizing for the device it is being accessed on, saving gobs of time by eliminating the need to update multiple versions of websites when you could be creating great content. It’s not the only solution, but for most small businesses, it’s the best for mobile spaces. This form of configuration works according to units on a grid as opposed to specific measurements, producing website displays that are always proportional despite the size of the screen.

Although having a responsive website is quite crucial, it is not an endgame. There are several other high priority design elements to a successful mobile presence that should not be ignored. Sincere thanks to Austin Paley of Blue Fountain Media for compiling this compelling data.

Do Not Use Flash for Mobile Responsive Designs

If flash is being used on the mobile version of your website, Google may tag the Meta description as not being optimized for small screens, discouraging potential customers from visiting the site and harming a business’s overall reputation. The fact is, largely due to security reasons, flash is on its way out in the mobile world since Web browsers are starting to phase out plugins such as Flash and Java in favor of alternative technologies.

Even with Responsive Design, One Size Does Not Fit All

Even when Flash is not being used, particular aspects of a desktop site are not going to translate well to mobile. Review the site for images, videos, or other multimedia elements that may be bogging down its performance. Remember that speed is the most important factor to a mobile website; small screen users are not patient. They want things at light speed. Shun complexities and fancy media in favor of simplicity and speed. Ensure that you are hosting a version of the site that is conducive to mobile for a first-rate consumer encounter.

Speed Rules

Users aren’t the only ones insisting your mobile site be turbo; Google demands it too. As significant as loading speeds are on desktops, Google is even more stringent when it comes to mobile. Every second it takes for your site to load will can damage your SEO rankings, preventing companies from gaining much needed exposure. Want to help your cause all the more? Host your site on a premium server. Follow stringent best hosting practices; don’t let this be an area where you skimp and save. Hosting is crucial to a healthy, fast-loading website. Choosing a more frugal server could potentially have a larger financial impact on your business than it would to pay for a top notch experience.

Use Schema Tags

 Including schema tags assists search engine crawlers in identifying the content on your website in a more effective manner, ultimately increasing the amount of mobile traffic received from your organic rankings. These tags will also carry through across platforms., Do not assume, however, that this tactic is in any way a black hat SEO trick; that’s a myth. Schema tags are a widely adopted best practice that makes it easier for search engines to understand the information being displayed on a website. Use them; every little bit helps.

Guarantee Your Site is Optimized for Your Mobile Audience

For all the content you create, be sure to have icons that are adjusted to size and easily clickable by fingertips, not a mouse. If your visitors need to zoom in to click a links and images, you’re creating a barrier to entry. Buttons should have a minimum target area of 44 x 44 pixels, as suggested by Apple. Additionally, a customer support phone number should be a clickable option that automatically dials your number, making it is easy to access. Usability is essential to a mobile site.

Standard SEO Practices Still Apply

 An optimized mobile site is not a cure-all, especially when it comes to SEO. Many of the more common SEO tactics still carry through to the mobile side, such as link building, meta data, and keywords (which need to be specifically targeted to your small screen demographic).Some of your SEO priorities from the desktop side will carry over, while others need to be Smartphone specific.

There you have it: The lowdown on responsive design and mobile best practices for 2015.

If you have set up a responsive site, how has effected your business; both positively and negatively? Please share your pros and cons with the process.


Conscious online marketer, web executive, and multi-faceted writer Tina Courtney has been creating and fostering online innovations since 1996. Tina has assisted many clients in maximizing online production and marketing efforts, and is a staff writer for SiteProNews, one of the Web’s foremost webmaster and tech news blogs. She’s produced and marketed innovative content for major players like Disney and JDate, as well as boutique startups galore, with fortes including social media, SEO, influencer marketing, community management, lead generation, and project management. Tina is also a certified Reiki practitioner, herbalist, and accomplished life coach.  Learn more on LinkedIn, Facebook and Google+.

16 Responses to “Six Key Rules for Responsive Web Design

    avatar Christopher Pontine says:

    Hi Tina,

    Great article, and your dead on right when you state ” Including schema tags assists search engine crawlers in identifying the content on your website in a more effective manner, ultimately increasing the amount of mobile traffic received from your organic rankings.”

    Sometimes what we think are the smallest touches in SEO are actually a huge part of what the search engines actually see.


    Christopher Pontine

    avatar Ed Wade says:

    Another great article from Tina Courtney-Brown. The best argument to convince businesses they need mobile: “If your visitors need to zoom in to click links and images, you’re creating a barrier to entry.”

    avatar Luke says:

    i absolutely hate responsive design, trouble is in increases potential issues and a lot of responsive sites follow the same damned trend in design, template website frameworks that work well with mobiles. I find a lot of customers dislike the Jquery drop down menus in responsive sites.
    True, they shouldn’t have to zoom in to view a page properly – it’s fine on my iPad. Seriously, who is seriously browsing on a phone anyway?
    I find I have to use larger images on a responsive site, to scale smaller screens when the columns collapse. So unless you got a decent iphone, you’ll rarely get good speed anyhow :/ great article though.
    Flash is nuts – ipads and iPhones just don’t/won’t use it. Use Jquery galleries always.

    avatar ProWeb365 says:

    Thanks for informative article. These are great rules for all responsive web designers.

    Also, take a good care on its overall accessibility, including link texts, sometimes I hardly find and click links on a site because their colors are “intriguing” and their sizes are too small for a finger tip to touch.

    avatar da day says:

    Another great article from Tina Courtney-Brown

    avatar Jeremy Thompson says:

    Great article and you are right on! We now know that a responsive design website is a must if one want to rank their mobile site.


    avatar Anna P. says:

    I think any site now need to be all devices optimized and responsive for all devices, so all users will enjoy visiting the site.

    I really like this with these tips make it easy for me to continue to learn to make a website that is quite interesting especially for readers who need a information

    avatar Denik says:

    Good article. Very useful and informative.

    avatar John Smith says:

    Great article, nice information, especially about “do not flash in mobile website” otherwise it will reduce your
    potential customers.


    avatar adam sammy says:

    Responsive web design are the necessity of this world because some of people are using laptops, some using mobiles, some using tablet or ipad and some are using phablets so if your design is not responsive then you are loosing your potential customers and some one commented above that only responsive design is not enough you need to make a good combination of colors and size so that person who is visiting your website will not get confused.

    avatar John Cornar says:

    Standard SEO practice,
    I think SEO practice is really important because without SEO, maybe you can do your work but it might be possible you are missing your potential customer because nowadays people do not have time to search websites to solve their problems they just write the problems on Google and Google will show them the best results. So if your website is SEO-friendly then Google will consider you, otherwise it will just leave you.

    Anyways thanks for such a wonderful information hope to see more articles.

    Thanks for listing it out. As after the google update it has become very important a site to have responsive design.

    I will follow this key rules to make adjustment into my sites.

    avatar Angelos says:

    Hi there! Someone in my Facebook group shared this website with us so I
    came to take a look. I’m definitely loving the information. I’m
    bookmarking and will be tweeting this to my followers!

    Nice content, and awesome article.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 3,948,653 bad guys.