Responsive design is the most widely used method to accommodate visitors using mobile devices. Therefore it applies to almost every website. Other options exist (e.g., mobile-specific sites or apps, for example). However, from the perspective of SEO, responsive design is challenging to beat.

You can start from scratch, but using a framework such as Bootstrap is often easier. Using Bootstrap, you can quickly create a nice-looking, simple, and responsive design.

Using the Bootstrap CDN

All required Bootstrap files are hosted and available on a content delivery network (CDN) provided by MaxCDN. All you need to do is include links to files in HTML; everything will automatically work.

Here are the links you’ll need:

<link rel=”stylesheet”

href=” https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”> 

<link rel=”stylesheet” 

href=” https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”>

</script> 

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”> 

</script>

The upside to this from an SEO perspective is that the CDN ensures these files load super fast, which is suitable for user experience. Additionally, because these duplicate files are used on thousands of sites, many users will have them cached.

The downside won’t be able to change any of those files (although that could be a good thing) and that you must keep your site up-to-date in case of any significant Bootstrap updates (again, arguably a good thing).

Downloading the Files

For the experts, you can download the core fewer files and customize them to your heart’s content. But for most users, downloading the standard precompiled CSS / JS is fine. You will get a folder of files you need, and you can link to them from your HTML, except, of course, the URLs you link to will be wherever you upload the files.

Create another CSS File

Although Bootstrap offers a framework, you must adapt it to your requirements. Although you might directly alter the Bootstrap CSS, making a new CSS file for your changes is preferable in case you need to update your Bootstrap files in the future. Whichever option you go with, you’ll undoubtedly want to add some of your personal touches.

Creating Your Design

Even though Bootstrap provides a framework, you will still need to modify it to meet your needs. You’ll probably want to add some of your distinctive touches, regardless of your choice. Even if you may make changes directly to the Bootstrap CSS, it is better to create a new CSS file for your modifications in case you need to update your Bootstrap files in the future.

  • xs (mobile devices)
  • sm (large tablets and netbooks)
  • MD (small to medium computers)
  • LG (large computers)

But you don’t have to create four layouts. Many people have one design for mobile devices (typically single column) and a basic two-column structure for any other screen. 

Let’s demonstrate this with an elementary example of a two-column layout:

And here is how it will look on a smaller screen:

To achieve this column design, all you need is to enter the following code into your HTML page (excluding the code for the header):

<div class=’container’>

<div class=’row’>

<div class=’col-xs-12 col-MD-4 col-md-push-8′>

This is the sidebar

</div>

<div class=’col-xs-12 col-MD-8 col-md-pull-4′>

This is the main content

</div>

</div>

</div>

Bootstrap has comprehensive documentation on utilizing the CSS, components, and JS on the site. I won’t waste my time here by going through everything. But maybe the actual layout won’t be too challenging to make. What about the SEO component, then?

SEO Considerations for Bootstrap

User experience and load speed are the two areas where SEO is most important. Naturally, user experience is the main focus of the responsive design, so as long as you keep your users in mind as you create your website, you should be fine.

However, load speed is always challenging because users expect different things from different devices in terms of load speed. You want to give them the best overall experience regardless of their device or bandwidth.

Let’s look at how Bootstrap pages load incredibly quickly on all devices.

Creating a Fast Page

User experience and load speed are the two areas where SEO is most important. Naturally, user experience is the main focus of the responsive design, so as long as you keep your users in mind as you create your website, you should be fine.

However, load speed is always challenging because users expect different things from different devices in terms of load speed. You want to give them the best overall experience regardless of their device or bandwidth.

Let’s look at how Bootstrap pages load incredibly quickly on all devices.

Creating Faster Images

Images are tricky when discussing responsive design because big screens need bigger images. You don’t want to send a 1600px image to a mobile browser because that’s a waste of bandwidth.

Unfortunately, there is no good solution to this problem yet. But here are a couple of techniques that can help make things faster:

 

Use media queries for backgrounds.

This only works for background images since we will use CSS media queries to serve the right image. But if you have any background images on your site, that might help to reduce load times substantially.

Start by taking your main, full-size background image and creating a smaller version of it (and maybe also a medium version, if you wish). Now include the following CSS for the element that contains your background image:

 

#header {

background-image: URL(largeimage.jpg);

}

@media only screen and (max-width: 320px){

#header {

background-image:URL(smallimage.jpg);

}

}

This will ensure that a smaller image will be downloaded on smaller screens, as the media query will override the original CSS property.

 

Using media queries for images

There is no good option to use the same technique for regular images. However, one solution is to use background images instead of HTML IMG tags. The downside is that you miss out on the opportunity to include an alt tag, which is terrible for SEO.

Yet if you have a cumbersome site, using this technique could substantially reduce load time for your mobile visitors. You’ll have to decide as to which option is most important.

One alternative is to include a regular image:

 <div id=’imageholder’>

<img src=”smallimage.jpg” alt=’Your Alt Tag, for SEO’ />

</div>

 

Then use the following CSS:

 

@media only screen and (min-width: 320px){

#imageholder {

background-image:URL(largeimage.jpg);

}

#imageholder img {

display:none;

}

}

As you can see, on larger screens, the smaller image will be hidden and replaced with a background image at a much higher resolution.

With this technique, every user downloads the small image, but only desktop users download the (much larger) large image. This saves mobile users download time and allows you to use an alt tag.

As of right now, it’s not clear how this will impact SEO since you are effectively hiding that image from desktop users. But if you have a lot of pictures, this could be a good compromise, and it will undoubtedly improve load times for mobile users, which can only be a good thing.

Upcoming Events
Get Free Quote