Making a website responsive in 3 easy steps

Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. A website is responsive if it is able to adapt to the screen of the client. In this article, I’ll show you how to easily make a website responsive in three easy steps.

1 – The layout

When building a responsive website, or making responsive an existing site, the first element to look at is the layout. When I build responsive websites, I always start by creating a non-responsive layout, fixed at the default size. For example, CatsWhoCode.com default width is 1100px. When I’m pleased with the non-responsive version, I add media queries and slight changes to my code to make the code responsive. It’s way easier to focus on one task at a time.

When you’re done with your non-responsive website, the first thing to do is to paste the following lines within the<head> and </head> tags on your html page. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

It’s now time to add some media queries. According to the W3C site, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. In other words, media queries allows your website to look good on all kinds of displays, from smartphones to big screens.

Media queries depends of your website layout, so it’s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.

By having a look at the code, you can see that I defined two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.

The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary.

As I already said, you’ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Once done, let’s see how responsive your layout is. To do so, I use this awesome tool created by Matt Kersley.

2 – Medias

A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.

The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.

img { max-width: 100%; }

Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.

Here is a technique developed by Nicolas Gallagher. Let’s start with the html:

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.

As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.

The html:

<div>
	
</div>

And now, the CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Once you applied this code to your website, embedded videos are now responsive.

3 – Typography

The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.

Until now, most developer (including myself!) used pixels to define font sizes. While pixels are ok when your website have a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset html font size:

html { font-size:100%; }

Once done, you can define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }

Speeding up your WordPress blog: 7 effective solutions

It’s a fact: Internet users don’t like to wait forever for a page to load. If your website is slow, chances are that people will close your page before having a look at it. Here’s a bunch of effective solutions to make your WordPress blog a lot faster.

 

“Smush” your images


If you’re using Adobe Photoshop, you can use the “Save for web” option that allow you to easily find the best compromise between quality and image size. Another option is to use a free online service to reduce image size while keeping its quality high. This service is called Smush It and I can’t stop using it to optimize my images.

There’s also a free WordPress plugin available. Install it, and it will automatically optimize any image you’ll upload to your WordPress site using the uploader. Cool, isn’t it?

Use a caching plugin

If your WordPress site is slow, make sure you’re using a caching plugin. There’s lot of options available, however I recommend W3 Total Cache which is free and really efficient.

W3 Total Cache minify static files (CSS, JavaScript), cache .php files, and add easy CDN support.

Reduce database queries

It is important to reduce unecessary queries to your database as each query take a few milliseconds to execute. First, you might want to know how many queries your blog execute in order to display a page. To do so, paste the code below in your functions.php file. Once done, just have a look to your site footer to know how many queries has been executed and how many time it took to completely load the page.

add_action( 'wp_footer', 'tcb_note_server_side_page_speed' );
function tcb_note_server_side_page_speed() {
  date_default_timezone_set( get_option( 'timezone_string' ) );
  $content  = '[ ' . date( 'Y-m-d H:i:s T' ) . ' ] ';
  $content .= 'Page created in ';
  $content .= timer_stop( $display = 0, $precision = 2 );
  $content .= ' seconds from ';
  $content .= get_num_queries();
  $content .= ' queries';
  if( ! current_user_can( 'administrator' ) ) $content = "<!-- $content -->";
  echo $content;
}

Then, you have to remove useless queries from your blog. Start by making sure that you are not using too many plugins, as most plugins are making database queries. Then you can remove theme-related queries that are not useful to your blog.

Speed up your site with .htaccess caching

If you can’t or don’t want to use a caching plugin on your WordPress site, this code snippet might be very helpful for you.

By using some simple .htaccess file caching, you can dramatically increase your website speed. This snippet must be pasted in your .htaccess file, located at the root of your WordPress install.

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

Source: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

Use a Content Delivery Network

Do you know that 80 to 90% of the end-user response time is spent downloading all the components in the page? Images, scripts or stylesheets can take a while to be downloaded on the client machine.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. Although CDNs are pricey for small or non-profit websites, using this solution can really make your site 20% faster. Most well known CDNs are MaxCDNAmazon CloudFrontCloudFlareand NetDNA.

Minimize HTTP requests

In order to reduce page loading time, you have to reduce the number of HTTP requests. To do so, you have to:

  • Reduce the number of JavaScript files
  • Reduce the number of CSS files
  • Reduce the number of images

If you’re using W3 Total Cache as I recommended, you don’t have to worry much about JavaScript and CSS files, as the plugin minify those files in order to reduce the number of HTTP requests.

Regarding images, one of the best thing to do is to using the “CSS sprites” technique. This technique basically consists of grouping many small images on one big image in order to do a single HTTP request all for images, instead of one request per image. The easiest way to combine your images on a single image file and automatically generate the corresponding .css code is to use a service named Sprite Me.

Use a reliable web hosting

At last but not least, it is obvious that you should use a reliable web host if you want your website to be fast. I’ve used lots of web hosts and some are really good and some other sucks. For example, you should definitely avoid Phpnet.org and Maven Hosting, both of them shut my websites down just because they were receiving too many visits.

On the other hand, I was pleased with WP Web Host, which is really good if you’re hosting a small or medium WordPress site or blog. If you have a popular and/or large website, I definitely recommend Vidahost, which is CatsWhoCode webhost. My site is still fast although I receive lots of traffic. If you want to get some hosting from Vidahost, don’t forget to use my custom coupon CATSWHOCODE to get 10% off anything.

Btw, if you need any help with your website, I can help you at avery reasonable rate. Have a look at my siteWPCAT to get in touch!

Difference between ID and Class in HTML

ID’s are unique

  • Each element can have only one ID
  • Each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don’t seem to do anything different.

Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We’ll go over more reasons for uniqueness as we go on.

Classes are NOT unique

  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple “widgets”:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

You can now use the class name “widget” as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than other other, but still share all the other attributes. Classes has you covered there, as you can apply more than one class:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it’s more like thousands, but way more than you’ll ever need).

There are no browser defaults for any ID or Class

Adding a class name or ID to an element does nothing to that element by default.

This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn’t work.

Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

Barcodes and Serial Numbers

Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them.

The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn’t know the price. It could, but for the store this wouldn’t be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system.

This is much like ID’s and Classes. Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.

ID’s have special browser functionality

Classes have no special abilities in the browser, but ID’s do have one very important trick up their sleeve. This is the “hash value” in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of “comments” and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.

This is an important reason right here why having ID’s be absolutely unique is important. So your browser knows where to scroll!

Elements can have BOTH

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

<li id="comment-27299" class="item">

It has a class applied to it that you may want for styling all comments on the page, but it also has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for direct linking. Now I can link directly to a particular comment on a particular page easily.

CSS doesn’t care

Regarding CSS, there is nothing you can do with an ID that you can’t do with a Class and vise versa. I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn’t care.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ID’s. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID’s. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.

If you don’t need them, don’t use them

As you can see, classes and ID’s are very important and we rely on them every day to do the styling and page manipulation that we need to do. However, you should use them judiciously and semantically.

This means avoiding things like this:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

We already know this element is a link, it’s an anchor element! No particular need here to apply a class, as we can already apply styling via its tag.

Also avoid this:

<div id="right-col">

ID is appropriately used here as the page will likely only have a single right column, but the name is inappropriate. Try and describe the context of the element, not where it is or what it looks like. An ID here of “sidebar” would be more appropriate.

Microformats are just specific class names

Think microformats are over your head? They aren’t! They are just regular markup that make use of standardized class names for the information they contain. Check out a standard vCard:

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,  
    <abbr class="region" title="California">CA</abbr>  
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email: 
   <span class="email">info@commerce.net</span>
  </div>
</div>