Responsive design

Let's start talking

With more and more people using several different devices to browse the internet—smartphones, tablets and virtual assistants—it’s more important than ever to be using a responsive design on your website.

For the last few years, responsive design has been a hot topic amongst web developers and digital marketers, and for good reason. It is so important today in 2018 that it has become the accepted industry standard for all websites of all types.

In short, responsive website design means that you don’t have to create or deploy separate mobile-friendly websites for the mobile, tablet and regular PC versions of your website. With responsive design, your website adapts itself to whatever size screen it is being displayed on.

It doesn’t matter whether a visitor has come to your site from their phone, tablet or PlayStation, they will see a version of your site which displays all your content in a readable and aesthetically pleasing way.

Given that the number of smartphone users alone is expected to reach almost 3 billion by 2020, it has never been more important to ensure that your website has a fully-fledged responsive design.

Because Google prioritises mobile optimised sites over all others, if yours isn’t responsive then you will simply fail to rank highly in search results, and visitors to your website from devices other than a laptop or PC will have a bad experience.

Personally, I have spent almost a decade working with hundreds of companies to create, edit and manage responsive websites. I have seen first-hand the growing trend of responsive web design and now is the best time to get on board with one so that you can remain competitive and ahead of the curve..

If you would like to learn more about responsive website design, why it matters and how you can carry out certain elements of it yourself, carry on reading!

Who Am I?

I have worked with hundreds of people over my ten years in professional digital marketing and website design. These people have ranged from individuals all the way up to huge international corporations operating over all industries imaginable.

When my experience with website design is combined with my knowledge of digital marketing and search engine optimisation, I can help you achieve the production of a website which not only meets your needs, but will stand the test of time—I provide a fully-comprehensive service which takes care of everything needed to deliver measurable results.

With my help, many of my clients have established themselves as leaders in their respective industries and have grown from strength-to-strength. Along with the help of my team, I utilise my experience to deliver the best results for all my clients by building a tailored service which meets their needs.

Here, I am going to touch upon responsive design—one of the key essential areas of good website design—and discuss what it is, why it’s important and how you can incorporate responsive design factors into your own side right now. A lot of what you are about to read can be implemented onto your own website by you, and you probably have a lot of the requisite skills to do it yourself.

If you would like any help with anything you read on this page, though, feel free to contact me for an obligation-free discussion.

Additional Useful Resources

Website design is a huge area and there is plenty that you need to know about and be aware of, and this is true even if your website design is outsourced to a third-party; it’s always helpful as a webmaster to have a basic understanding of web design and its latest developments.

To that end, I am always posting fresh content on my blog. I encourage you to visit it and read the latest website development articles as these can help you learn about website design, development and other areas such as digital marketing, and then used to grow your own website.

Most of what you will read on my website can be done by you—as a digital marketing professional, my only goal is to enable your website to become the success it can be by helping you reach its potential.

How Does Responsive Design Work?

Responsive design began back in 2010 as a mere theory, and today it is implemented on virtually every website you visit.

Instead of one single webpage being created which is a pre-defined number of pixels wide centred on the screen, responsive designs are made of several different elements, the sizes, shapes and placement of which vary depending on the width of your screen. This is made possible with CSS media queries which take the size of the screen and use this value to modify a website’s various elements.

For example, you could have four elements on your website—A, B, C and D—which, on a normal computer screen, display as a square, with each element occupying 25% of the screen’s real estate.

On a smartphone—say an iPhone 8—it would not be possible to display these elements as one large square split into four, with each element occupying 25% of your phone’s screen in a way which wouldn’t require lots of zooming in and out in-order to read content.

Nobody wants to do this, so instead responsive design comes into play. Your website’s code recognises that it’s being visited from an iPhone 8 and your website’s elements—A, B, C and D—are displayed in a way which better fits the screen.

On an iPhone, for example, where the screen is narrower these elements would likely be stacked on top one another with each one occupying the entire screen, switching from A to B to C to D as the user scrolls down the page. In contrast, on an iPad or tablet where the screen is wider, the elements would be spread out next to each other.

Why not try this out for yourself? Visit a website such as Business Insider from your laptop or PC, and then visit from your phone. You will easily notice a difference straight away.

Alternatives to Responsive Design

Most people view responsive design as the best way to improve the mobile and tablet user experience, however, this isn’t always the case (most of the time, it is, though.) The two alternatives are: mobile websites, and mobile applications.

Mobile websites are duplicates of your original website, usually with the same content and elements, which are hosted on the m. sub-domain. Most of the time, these have to be developed from scratch and users will be re-directed to this iteration of your website when your server detects that they are using a smartphone through something called a User Agent. Mobile sites are viable alternatives and are still used, however, the User Agent can sometimes get it wrong which leads to mobile users being redirected to your regular site and vice-versa.

Mobile applications on the other hand are the best way aside from responsive design to control the user experience for mobile users. Why? Because with a mobile application, you can leverage the power from smartphone hardware capabilities. They can be expensive to make, however, and they do not appear on the open web and thus cannot be ranked by search engines.

What Makes Responsive Design Better than the Alternatives?

Aside from the fact that your website can be visited seamlessly from any type of device which improves the overall user experience, responsive designs are far better for SEO purposes. Google prioritises websites using responsive designs and places them higher up in search engine results pages because:

They are easier to use

Google only wants to send users to websites which are easy to use and are relevant. When people visit your site and spend five seconds there before hitting backspace and returning to Google, Google notices. If this happens a lot, Google will take the view that your website isn’t a good choice for whatever search term is being used and you’ll rank lower as a result.

This is terrible news if people are using the search terms you want to rank highly for and are simply leaving your website because it’s not using a responsive design. People now expect to be able to use websites across all their devices and not having a responsive design causes frustration and lost conversions.

You don’t need to create duplicate content

This is the main concern for people moving to a responsive design—they think that a mobile site with the same content as their regular website will be penalised by Google.

This simply isn’t the case; a responsive design takes content from one source and displays it in the best possible way for whichever device your site is being accessed from. You don’t have any duplicate content and you don’t run the risk of sending visitors to the wrong version of your website.

Responsive design makes SEO easier

Having a responsive design means that you will only ever have one website which you need to look after—prior to responsive design, sites would often have their regular website and then a second mobile-friendly one, such as m.facebook.com—which makes maintenance and SEO campaigns a whole lot easier.

Instead of trying to rank two different iterations of your website, you only need to work on having one ranked—this immediately cuts your work in half.

There are several reasons why having a responsive design implemented on your website is beneficial, however, one is more important than any other: they are now the “industry standard” when it comes to website design and customers expect to have a seamless browsing experience on any website they visit.

How Does Google Rank Responsive Websites?

In early 2012, Google introduced a new crawler called Google Mobile Bot (now known as Googlebot User Agents) which look at how user-friendly your website it is. Whilst there is no one single method which is guaranteed to get your responsive site ranked, Google helpfully suggests certain steps:

First, you should read Google’s guide to mobile-friendly sites which provides information about how you can make your own site mobile-friendly.
After this, take Google’s mobile-friendly test to see if your website is optimised enough for mobile devices. You can test either your entire site or single pages.
If you want to go one step further, you can use Google’s Webmaster Tools to generate a Mobile Usability Report to identify any issues your website has on mobile devices.

Other ways you can stand a better chance of being ranked highly is to minimize JavaScript use, enable browser cashing, compress images and make sure that you use Google’s AMP pages.

Responsive Design: Your First Steps

With this basic understanding of responsive design and why it’s important, there are many things you can do to begin to make positive changes to your website. Whether you plan to completely overhaul your site yourself or outsource it to a professional such as myself, you can’t go wrong by getting a head start with these responsive design principles.

Make your site touchscreen-friendly

Today, more and more devices—including laptop computers—are coming with touchscreens as standard. As such, it is essential that all responsive websites are designed with both touchscreens and traditional mice in mind.

By ensuring elements such as buttons aren’t too small and that forms are styled in a way which are larger and easier to press with a finger, you make your site much easier to use with a touchscreen.

Prioritise certain elements over others

A responsive design doesn’t mean that you have to mirror your desktop site, and, in fact, you probably won’t be able to due to the sheer number of elements you use on it.

Because of this, you need to prioritise certain elements and leave others out when it comes to deciding what to display first on your responsive mobile design. You can use CSS to define rules for including and leaving out certain elements.

Use a pre-made theme

If you don’t have the time or skills needed to make a responsive design yourself, the good news is that there is a lot of help out there. There are lots of pre-made designs, themes and layouts which can easily be edited and used on your own website.

When you use one of these pre-made responsive designs, all you need to worry about is editing certain elements such as colours, branding and content so that it matches up to your company.

Use a fluid grid

If we rewind a decade or so, most websites were made and laid out based on pixel measurements. Today, however, fluid grids are used instead to allow for responsive designs to resize certain elements.

Fluid grids size the elements on your site in proportion to the screen they are being displayed on rather than pre-defining and sticking to one specific size. This makes it much easier to display elements across different screens as the elements respond to the size of the screen they are being displayed on.

Another Option: Outsource Your Project

If you want a bespoke design which meets the needs of your company and its branding, having a responsive theme made for you is by far your best choice, even more so if you don’t use WordPress or some other hosted e-commerce website.

Whilst your website may look nice in its current state, if it is not made with responsive design factors then you are going to struggle to rank highly as more and more people turn to mobile devices for their day-to-day browsing. The key behind good web design is not just having something which looks good, it needs to function across all devices too.

This is one of the greatest challenges facing webmasters today: everybody wants to have a bespoke website which is perfect for SEO and ranks highly, however, this can only be done with responsive design and this is a lot harder to achieve, especially for people who don’t have existing website design experience.

By working with me and my team, you will get an end-product website which is 100% responsive and built to stand up to the challenges of operating on the modern internet. You will instantly begin to see measurable results because of good design, marketing and SEO—this is how I deliver results for all my clients.

in website design and am constantly up-to-date with all the latest developments.

What to Do Next?

If you have had a read through all this page and are unsure about where you should go from here, I highly recommend reading the latest website design and development posts on my blog alongside the other resources I post on my site.

Also, feel free to email me: I am always happy to help people who ask for it. Whether you want a little bit of guidance or want to enquire about outsourcing your entire project, I am waiting to hear from you for an obligation-free discussion.

Whilst there is a lot you can do to make your website responsive, nothing quite compares to having your own responsive design built from the ground-up which takes into account everything you and your business needs.

Do you need help with your business?

If you would like to talk about getting your marketing where it should be, get in touch now.