Responsive Design in 2015

With the proliferation of many devices with access to the internet, web designers have been playing catchup to make sure websites look good on all devices. Gone were the days where web designers would only design for the desktop. Today’s designers have to account for big screens, tablets as well as smart phones.

The design has to be flexible, fluid and accessible to all. This means objects, images and videos are fluid increasing and decreasing in size as the screen expands and retracts. In some cases, certain objects are turned off or displayed off screen. Responsive design wouldn’t be possible without the help of CSS 3, in particular the use of media queries.

Media queries allow designers to specify certain objects to behave a certain way based on the screen resolution. For example, an image that is flexible will have a CSS element such as this, img { max-width: 100% }. As the screen size increases and decreases, the images will shrink and grow, always maintaining a width of 100%.

Another trick is to use flexible layouts. In the past, most layouts would use fixed widths such as #page { width: 760px; }. In responsive designs, layouts would often use percentages instead of fixed number of pixels. In this case, the element would look like this, #page { width: 65%; }.

Another trick is to turning off elements on certain resolutions. For example, if you were to turn off the sidebar on small screens, you would set the display to none like this, @media (max-width: 480px) { #sidebar { display: none; } }. Or you can also set the element to be completely off screen such as this, @media (max-width: 480px) { #sidebar { margin-left: -3000px; } }.

If you want to learn how to design responsive websites, there are many tutorials out there. Most importantly, learn how to code in CSS, learn how to use media queries, learn how to manipulate elements within CSS. There are many responsive sites out there. In technology, Sony, Squarespace, Microsoft and Twitter Bootstrap come to mind. In e-Commerce, there’s Indochino, Skinny Ties, eBags, Garmin and PureCostumes are great examples.

Feel free to look around the web and look for ideas and inspirations.

Typekit is Down

Adobe Typekit is partially down. Some websites using the hosted web fonts service are looking a bit normal. A few websites have fallen back to the standard Arial font. On this site, I use Google fonts called Francois One and Bitter. It’s designed to fall back to sans-serif. It’s unusual for a web font service to go down, but just like everything else, they do go down occasionally.

Twenty Twelve Theme

I recently changed themes from a custom made one, that I’ve used for a long time, to a theme called Twenty Twelve, the current WordPress default theme. I made one slight change though which alters the entire look of the theme. I changed font from the default ‘Open Sans’ to ‘Lato’ which is available from Google. To facilitate the change, I’m using my Webfonts plugin and this CSS code:

#page {font-family:'Lato', sans-serif;}

Linode Kicks Ass

Get a web server running within minutes. Choose a Linux distro, resources, and node location. That’s essentially Linode in a nutshell. I signed up with Linode about two weeks ago. I’ve been playing around with it since then. I can happily say that I’m very impressed with Linode. It has exceeded my expectations.

If you want total control of your web server, Linode VPS is really the way to go. You will be asked to choose server size when you sign up. They come in many configurations. I chose Linode 512. You also need to choose a data center location. There are six data centers worldwide. I choose the one in Fremont since I live in California.

So far, I’m loving the guaranteed server resources. My websites are running faster . I chose Ubuntu 12.04 LTS 32 bit because it’s a Linux distro I am very familiar with. Apparently, 57% Linode users have chosen Ubuntu as well. I already transferred a couple of domains over to Linode. The websites are screaming.

I plan to migrate more websites later. If you are curious about how Linode works, here is a short list of features to get you started:

  • Full ssh and root access
  • Guaranteed Resources
  • 4 processor Xen instances
  • Out of band console shell
  • Dedicated IP address, premium bw
  • Six datacenters in the US, Europe, and Asia-Pacific
  • HA and Clustering Support
  • Bandwidth pooling
  • Managed DNS with API

Multiple Columns in HTML5 and CSS3

Creating a multiple column pages is so much easier now with HTML5 and CSS3 than was previously possible. Consider if you have a page with 200 unordered lists. The HTML markup for this would be something similar to this:

Unordered List

and so on….

As you’ve noticed, I’ve abbreviated the markup. The page rendered will be long. It will take some scrolling down to get to the bottom of the page. The obvious solution for this page layout is to display the data in multiple columns.

Displaying two to three columns is ideal. You can add more if you like. It really depends on how you want to layout your page. How do we add multiple columns on our pages? It’s quite easy. You’ll be surprised how simple it is.

First, let’s add a class div to our markup. In this example, we will call our div “data.” Our markup will now look like the example below. It’s relatively unchanged, except for the div we’ve just added.

HTML5 Markup

<div class=”data”>
and so on….

CSS3 Markup

The magic is really in CSS. It’s ideal to place a width in your class div, unless your class div is already inside another div that already has a width limit. We can then set a limit how wide we want our columns widths and column gaps.

I’m using a div with a width of 500px because it goes well with the 150px columns widths and 25px column gaps. You probably already guessed, the column widths are how wide the columns are, and the gaps are the spaces between column widths.

.data {
  -webkit-column-width:150px ;
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;

Give It A Try

Give it a try. Adding multiple columns in HTML5 and CSS3 is much easier than was previously thought. Create a simple page with some sample data. Add a class div and use the CSS3 multiple column styles to it.


The code has been tested with Mozilla Firefox, Google Chrome and Apple’s Safari. I haven’t tested it with any Internet Explorer. I’ll be curious if it works with IE 7, 8 or 9.

Here’s a demo of a page using the multiple columns.