Understanding Responsive Design

Understanding Responsive Design

Responsive design allows you to design web pages that look good on all sorts of screens– From small mobile screens to 4K monitors, Responsive design techniques will all your pages to have a compelling look. In this article you’ll learn how to code responsive design and suggestions on how to design for different screens.

I’m a Developer, Not a Designer

It’s understandable that developers may not concern themselves as much with the responsive design of a web site, mobile or desktop application. There are people who have studied this field for years and they specialize in the design aspect. While it`s true there are design specialists, have you noticed front end designers are getting more and more into the coding side of things? Look how CSS is progressing – especially if they are using LESS or SASS. Taking time to think through the design process are skills that you can quickly enhance to make you a better all round developer. Imagine this from an employer’s perspective. Would they hire a Developer or a Designer/Developer. This article will not make you a professional designer, but it does have some very neat tips that most people don’t think about when designing for mobile.

Getting Ready for Mobile

Browsers on mobile devices behave much different than desktop browsers. By default, the mobile browser will scale down a website so it fits on the small screen. If the mobile browser is allowed to scale down a site, then the responsive design will not work. So missing one HTML meta tag can break RWD. Figure 1 shows a sample of a website that is not mobile friendly.

figure1

Figure 1 – Web Page Scaled Down

To prevent the scaling down of a site on a mobile browser, add the following line within the head tag:

This line of code has to be on every page. It’s best if it’s part of the site’s template or in a file that is included within the <head> tag.

Sample Web Page Structure

The next step is to build your website structure. Below is the code of a very simple web page that will allow us to demonstrate how Responsive Design works.

The CSS code attached to the above code looks like this:

When the above HTML code is displayed in a browser it will look like Figure 2.

Understanding Responsive Design

Figure 2 – Simplified RWD Page

Things to Note:

  • The layout is a little boxy but that is so it’s easier to identify the HTML objects.
  • There is no HTML code to display the banner. That is done in the main header CSS rule.
  • The navigation code in the HTML file is located at the bottom. However with the CSS rules, it appears at the top.
  • The navigation text is set to italic but then is transformed and skewed 14 degrees. This displays the background of the links in a trapezoid shape but the italic text stands straight up.
  • The navigation may look like graphic buttons but they are strictly HTML and CSS.
  • The gradient in the footer was also generated by CSS.
  • The extra space above the banner was created by main CSS rule. The attribute top:100px; adds 100 pixels to the top. This leaves room to put the navigation on top.
  • Font sizes are usually expressed in em or %. In this case, the code used em. If font-size is set to 1em, that is the default font size which is typically around 12px. Anything larger than 1em will make the font larger than the default. Anything less than 1em will make the font smaller than the default font-size. This makes scaling fonts for different devices much more efficient.

One final note. There is a line of code in the CSS3 that looks like this:

This establishes margin space around the object that has this rule. The numbers start at the top and go in a clock wise direction. So the order is Top (t), Left (l), Bottom (b) and Right (r). As a reminder I’ll often add that as a remark statement in CSS3. So it may look like:

Visually it would look like Figure 3:

Understanding Responsive Design

Figure 3: Order of Margin/Padding Numbers

Adding a Media Query

Media queries are the foundation in building a responsive web design site. The W3C recommended using media queries back in the middle of 2012. Prior to that, developers would setup HTML tags to load one of usually three different CSS documents. One was for the desktop, one for the tablet and a third for a smart phone. With the media query, you only need to use one CSS file and actually requires less work.

Here is a look at a sample media query that you may use for a smart phone.

The media this line focuses on is the screen. Another common media object is print. This is what is used when you want to write rules for the web page when it’s being printed. You can read about an example of print media option in the 20 CSS Tricks found in the previous issue of the Onboard Magazine.

The above rule will take over when the screen width is between 150 pixels and 500 pixels. If you recall at the start of this article we had to ensure that the browser on a mobile device would not scale down the webpage. If you miss the following line, then this CSS media query will not work.

Now that we have a media query, you can write some new rules. You don’t have to rewrite all the rules, just the ones that you want to change. Below is the new CSS rules that we add to the existing CSS sheet.

So when you look at the webpage in the browser, it doesn’t look like it has changed. However, when you shrink the browser down so it’s the width of a smart phone, it will look like Figure 4. Responsive Design in action!

Understanding Responsive Design

Figure 4 – Responsive Web Design page on a Smart Phone

Things to Note:

  • The aside tag is now hidden. Usually you use aside for content that is interesting but not essential. So in this case, the aside display attribute was set to none so it won’t show up. That allows more screen space on a smaller device for the other content.
  • The navigation has dramatically changed. The wider buttons are designed like this so it doesn’t matter if the user holds their phone in the right or left hand, the navigation is within thumb swipe.
  • The arrows on the navigation is simply a greater than sign (>) saved as a PNG image.
  • A new banner image is displayed. No JavaScript was required to swap out the desktop sized banner. The CSS3 rules look after that.
  • The content has been moved down to make room for the navigation. That was done with the #contentLeft rule changing the margin.
  • In the main CSS rule, the font-size is increased to 1.2em. Even though there is less screen space, the font size is increased. This is because it’s harder to read from a smaller screen. To improve the UX for the mobile user, make the text easier to read.

Add Media Query for the Tablet

Now that a phone size responsive design has been created, it’s time to make it for a tablet. The following code is what we can use to create a new look for the tablet.

/* Medium Screen Rules */

The tablet display will look like Figure 5.

Responsive Design image

Figure 5 – Tablet Layout

Things to Note:

  • There’s a new banner for this size.
  • The navigation has moved from being above the banner to being on top of the banner.
  • The aside and content are both visible. When scaled down to the smart phone size, the aside will disappear.

One Final Media Query

One of the growing methods of surfing web pages is through smart TVs. The displays for these tend to be larger than the typical computer screen. So you can add a media query to handle the larger screen sizes. Below is a very simple bit of code with only one rule for Smart TVs.

Complete CSS Code

Though this article we have not touched the HTML file. We built it once and have not touched it. The CSS rules have manipulated the look and layout of the HTML file based on the screen size. Below is the complete CSS file. Responsive design can usually be accomplished with CSS alone!

Conclusion

The rules for CSS3 are getting more and more powerful. In this article we started with a very simple HTML structure. This structure could be a template for making an entire website. At the start we designed the desktop version.

If the banner was displayed with an image tag in the HTML code, then most developers would have to create a JavaScript routine that would measure the inside width of the screen is the browser was being resized. When the browser width becomes a specific width, then you would have JavaScript code to swap out the images. There are two advantages to putting the image in background of a tag. First, it’s very simple to swap images with CSS3. Secondly, you can easily place content on top of the image. Remember in the tablet view, the navigation was placed on top of the banner image. While you can place content over an image with CSS rules, this method is a little simpler.

The navigation was placed at the bottom of the HTML page. The reason that was done is to demonstrate that no matter where the navigation is, you can manipulate it to appear where you want to place it. You’ll also notice that the navigation significantly changed between the desktop and smart phone version. That’s responsive design.

Although we only created two view alternate views, you can make as many media queries as you like. Consider looks for:

  • Desktop
  • Tablet – Landscape
  • Tablet – Portrait
  • Smart Phone – Landscape
  • Smart Phone – Portrait
  • Smart TV

As you can see, you can keep yourself pretty busy.

If you’re new to learning Responsive Design, feel free to take these files and experiment with it. Once you’re comfortable with rules, start branching off to new layouts.








Be the first to comment

Leave a Reply

Your email address will not be published.


*