Converting your units for layout flexibility is only one of the steps you’ll need to go through in order to have a responsive web design. For this article, I’ll only be focusing on the process for converting these units. Let’s get started!

The Traditional Layout

You’ll see below, as an example, that I have somewhat of a traditional layout. Everything is based in pixels and layed out in columns. What we want to do is convert the pixels to percentages while maintaining the same structure and dimensions.

Here’s the HTML:

<div id="page">
     <div class="header">960px</div>
     <div class="content">
          <div class="leftColumn">
               <div class="middleColumn">370px</div>
               <div class="middleColumn">370px</div>
          </div>
          <div class="rightColumn">200px</div>
     </div>
     <div class="footer">960px</div>
</div>

Here’s a simplified breakdown of all the container widths and margins that will need to be converted:

#page {width: 960px}
.leftColumn {width: 740px;}
     .middleColumn {margin: 0 10px 0 0; width: 360px;}
.rightColumn {width: 220px;}

The header, content, and footer classes don’t need an assigned width because they are nested within the #page container, which has the set width of 960px.

Conversion Formula

I want my design to be centered on the page, so I’m going to guesstimate and convert 960px to 90% which will leave 5% margins on each side. Feel free to play around with the numbers, but in my case this works perfectly.

The conversion formula is target ÷ context = results x 100 = final results. The target would be, in this case, the width of the leftColumn class. You would then divide that width by the context. The context is the overall width of the parent container you are dividing by. Here’s what the numbers look like when plugged into the formula:

• 740 ÷ 960 = 0.77083333 x 100 = 77.083333% width for leftColumn
• 220 ÷ 960 = 0.22916667 x 100 = 22.916667% width for rightColumn

Now we divide the middleColumn width by the context/parent container, which would be the leftColumn width.

• 360 ÷ 960 = 0.48648649 x 100 = 48.648649% width for middleColumn

There’s a little bit of math involved, but it’s not that complicated. Remember, the child container width is divided by the parent container width and then multiplied by 100 and you’re all set.

The conversions for margins and padding is figured out the same way.

• 10 ÷ 740 = 0.013513514 x 100 = 1.3513514% right margin for middleColumn

You’ll noticed that the percentages aren’t rounded. I believe it’s better to allow the browser to handle the rounding to achieve a more accurate result.

Final Results

Now that we have everything converted here’s what the widths and margins look like in percentages.

#page {width: 90%;}
.leftColumn {width: 77.083333%;}
     .middleColumn {margin: 0 1.3513514% 0 0; width: 48.648649%;}
.rightColumn {width: 22.916667% ;}

• View Demo

font-size Property Units

To make things easy, the units are split into relative and absolute groupings.

Relative font sizes:

• font-size: px – pixels
• font-size: em – measures width of a font
• font-size: % – percentage
• font-size: ex – x-height of a font

Relative fonts can be resized by the browser and are recommended for screen use (computers, tablets, mobile, etc.).

Absolute font sizes:

• font-size: in – inches
• font-size: cm – centimeters
• font-size: mm – millimeters
• font-size: pt – point
• font-size: pc – picas
• font-size: xx-small, x-small, small, medium, large, x-large, xx-large

Absolute fonts render inconsistently across platforms and can’t be re-sized by browsers or other devices. The only reason you may want to use any of these units is for printer friendly stylesheets. Other than that, it’s not recommended to use these for screen use.

In addition to the font sizes above, CSS3 has introduce a few more:

• font-size: rem – root em
• font-size: vw – 1/100th of the window’s width
• font-size: vh – 1/100th of the widow’s height

Recommend Uses

Here’s what the W3C recommends for screen and print font sizes:

Screen

• Recommended: em, px, %
• Occasional use: ex
• Not recommended: pt, cm, mm, in, pc

Print

• Recommended: em, cm, mm, in, pt, pc, %
• Occasional use: px, ex
• Not recommended: N/A

So the rule of thumb here is to make sure you use the recommended screen font sizes for web related projects. I also recommend making your font-size units consistent throughout your work, which will allow for cleaner code and easier maintenance.

“The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.” – Wikipedia

Wireframes are great for presentation and gathering feedback on a project. It’s a lot easier going through this process before the design takes shape. Stakeholders will be more focused on the content and placement of information rather than the styling.

1. balsamiq

   OS: Mac & PC | Download
   Price: Starts at $79.00

   

2. OmniGraffle

   OS: Mac & PC | Download
   Price: Starts at $99.00

   

3. Lovely Charts

   OS: Mac, PC & Linux | Download
   Price: Starts at 59 British Pounds

   

4. Pencil Project

   OS: Mac, PC & Linux | Download
   Price: Free

   

5. Axure

   OS: Mac & PC | Download
   Price: Starts at $289

   

6. WireframeSketcher

   OS: Mac & PC | Download
   Price: $99

   

7. justinmind

   OS: Mac & PC | Download
   Price: $19/month or $495/one time payment

   

8. Mockflow

   OS: Mac & PC | Download
   Price: Basic Free, Premium $69/year)

   

9. moqups

   OS: Online only | Download
   Price: Free

   

10. Gliffy

    OS: Online only | Download
    Price: Free, Standard $4.95/monthly, Pro $9.95/monthly

    

Let’s take a look at the resolution on some of the common/popular smart phones and tablets out there:

Smart Phones

1. iPhone – 1136×640 resolution at 326 ppi*
2. Nexus 4 – 720×1280 resolution at 342 ppi
3. Windows Phone 8X by HTC – 1280×800 resolution at 320 ppi

Tablets

1. iPad – 2048×1536 resolution at 264 ppi
2. Nexus 10 – 2560×1600 resolution at 300 ppi
3. Microsoft Surface RT – 1366×768 resolution at 148 ppi

*pixels per inch

What do these have in common? Yep, higher resolution. We’re at a time where we can’t just design for the traditional desktop anymore. Mobile and tablet usage is growing at a fast pace and a good user experience is becoming more and more important.

Re-think The Design Process

Progressive enhancement. Use fewer images. Stop. Think. Do you really need a graphic for that? With the help of CSS3 you can easily create gradients, text shadows, box shadows, transitions, and more.

@font-face. I love typography. Being restricted to web-safe fonts wasn’t very fun, but now that @font-face has finally gained popularity it has opened up a lot of possibilities and time savings. If you’re still in Photoshop creating images for headings you should stop and start bringing more scalability and clarity to Retina monitors and devices using @font-face. Here’s how you use it:

@font-face {
    font-family: 'WebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'), /* Support for IE6-IE8 */
         url('WebFont.woff') format('woff'), 
         url('WebFont.ttf') format('truetype'), 
         url('WebFont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

You would reference the new font like you would with any other with the exception of brackets:

h1 {font-family: 'WebFont';}

Where can you get these awesome fonts? There are plenty of open-source fonts that are free. Below are a couple of my favorite sites:

• Font Squirrel
• Google Web Fonts

Font glyphs/icon fonts. How about icons? Instead of creating images, you can utilize @font-face for font glyphs. There are several sites that provide free glyphs for you to use on your projects:

• Font Awesome
• Signify Lite: Free Icon Set
• Some Random Dude

Retina graphics. Obviously, there are going to be times when you need to use images on your web site. You’ll need to create a high-resolution image by doubling the image size. If you have an image that is 100×200 pixels you would double it by 200×400 pixels. There are several ways to serve high-resolution images for Retina displays:

• HTML. The simplest way to size images down is through the width and height attributes in an image tag:

  <img src="image@2x.png" width="100" height="200" />
  

  The drawback of this approach is that it increases the load time of the image and will more than likely slow the load time of your website.

• CSS. You can also size down background images by using the background-size property.

  .class {
      background-image: url(image@2x.png); 
      background-size: 100px 200px;
  }
  

  The background-size property isn’t supported in IE7 or IE8. However, you won’t need to worry about this because there isn’t any Retina display that will be using these two archaic browsers.

• Media queries. Another way to serve high-resolution images to your site is through css media queries. Here’s an example:

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
      /* Retina-specfics here */
  }
  

• Javascript. Lastly, you can use Javascript to serve high-resolution images to Retina devices. Retina.js is a nifty script that does just that.

Wrapping Up

My advice is to keep things simple. Use progressive enhancement and @font-face to your advantage. Also, keep in mind that high-resolution images will double page loading time. There are several approaches on how to serve high-resolution graphics to a Retina display, which I’m not going into too much depth here. I’m just giving enough information to whet your appetite for now. Look for more posts on this later.

Using robots.txt

What type of pages could you restrict? The possibilities are endless and it’s really up to you. To get started, you’ll need to create a new file and name it robots.txt. You’ll place this file in your root directory.

The first line you’ll want to place in your new file is the following:

• User-agent: *

The asterix is used for the User-agent to restrict all search engines. You can also target a specific search engine from crawling your site like:

• User-agent: Googlebot

Beneath the User-agent you can restrict different files, directories, etc. by using the following examples:

• Blocks entire site, Disallow: /
• Blocks directory and all of its contents, Disallow: /foldername/
• Blocks a specific file name, Disallow: /pagename.html
• Blocks a specific file type, Disallow: /*.gif$

Restricting robots.txt From Public View

One thing to remember is that the robots.txt file is public, so anyone could access it. I don’t know about you, but if I’m blocking search engines from certain links, I certainly don’t want anyone else accessing them either. One of the tricks I like to do is add a redirect within my *.htaccess file. Here’s what it would look like:

• Redirect 301 /robots.txt http://www.awmcreative.com/

This command redirects anyone trying to view http://www.awmcreative.com/robots.txt to the landing page of AWM Creative. This keeps the curious/hackers from seeing the blocked files, pages, etc.

*The .htaccess file only works on Linux-based hosting. If you’re on a Windows-based hosting provider it will not work. Another thing to note, the .htacess is a hidden file, so you may need to change your settings to show hidden files.

Learn More About robots.txt

If you’d like to read up more on the robots.txt file, check out robotstxt.org.

Here’s what was delivered:

• Design
• HTML/CSS
• Javascript

Here’s what was delivered:

• Web Design
• Logo Design
• HTML/CSS
• jQuery
• Ajax
• ASP.NET

Below are a few visual examples that I found on Google, Facebook, and Yahoo!:

(Expanded for show)

What’s great about the pop menu is that you can apply it to a regular link. The functionality of the menu opens on click and closes clicking anywhere outside of the menu.

• View Demo

jQuery

The jQuery allows the menu to appear and disappear. You’ll need to download the jQuery Library for the code to work below.

<script>
    $(document).ready(function(){
        $("span").click(function(event){
            $("ul.popOut").toggle();		
                return false;
        });
        $("html").click(function(event){
            $("ul.popOut").hide();
        });
    });
</script>

There are two click events happening here. The first event $(“a”).click(function(event){shows the menu and the second event $(“html”).click(function(event){ hides it, while clicking anywhere on the page.

CSS

Hides the pop out menu by default:

ul.popMenu li {
    list-style: none;
    font-weight: bold;
}

Menu styles:

ul.popMenu li span {
    color: #158; 
    cursor: pointer;
}

ul.popMenu li span:hover {
    color: #c00; 
    text-decoration: underline;
}

ul.popMenu ul.popOut {
    display: none; 
    position: absolute;
    margin: 2px 0 0 0; 
    padding: 0; 
    width: 135px; 
    background-color: #f4f4f4; 
    border: solid 1px #ddd; 
    border-bottom: none;
}

ul.popMenu ul.popOut a {
    display: block; 
    padding: 6px 15px 5px 15px; 
    font-weight: normal; 
    color: #000; 
    border-bottom: solid 1px #ddd;
}

ul.popMenu ul.popOut a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #bab;
}

HTML

The HTML is pretty simple. There are two standard lists with a class applied to each one. The menu that pops out is embedded in the main list.

<ul class="popMenu">
    <li><span>Click me</span>
        <ul class="popOut">
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.facebook.com">Facebook</a></li>
            <li><a href="http://www.yahoo.com">Yahoo!</a></li>
        </ul>
    </li>
</ul>

And that’s how it’s done. Not too much code to make this work, very light weight.

So which approach is better? I think it really depends on the project and what type of form you create. Creating a separate page may not really be necessary. However, there are some circumstances where a separate page may be useful like displaying payment information. Most of the time a simple message that appears is good enough so that the user has some type of confirmation allowing them to have peace of mind that their information was processed.

• View Demo

Types of Confirmation Messages

Here are some examples of different form confirmation messages:

Thank you message on separate page — seen on Yahoo.

Confirmation message on separate page with a close button — seen on LinkedIn.

Confirmation message on same page as form — WordPress admin.

There is one example missing from this list, which is basically the confirmation message that shows and hides after the submit button is clicked. This is what I’ll be going through in this tutorial.

jQuery

You’ll need to download the jQuery Library for the code to work below.

<script>
    $(document).ready(function(){
        $("#Button1").click(function(event){
            $(".message").show();
            $(".message").fadeOut(2500);
        });
    });
</script>

Let’s break this down a bit:

• $(“#Button1″).click(function(event){ – The ID referenced here is from the button ID. When the button is clicked, it fires the event in jQuery.
• $(“.message”).show(); – This line of code allows the hidden success message to show.
• $(“.message”).fadeOut(2500); – This last piece fades out the success message. You can set the fadeOut property to slow or fast. You could also keep the transitions in milliseconds, which allows more control.

CSS

Keep in mind that the message is hidden by default. The confirmation message will appear after the submit button is clicked.

.message {
    display: none;
    margin: 0 0 13px;
    padding: 10px;
    border: solid 1px #bd8; 
}

HTML

Please note that the ID on the button is the same as the one in the jQuery code above. These should be the same or the message will not show.

<div class="message">Your update was successful.</div>
<input id="Button1" type="button" value="Send Message" class="frmButton" />

Figuring out the proper web controls for making URLs, images, and stylesheets to work was straight forward. However, getting the Javascript external files working, other than on the landing page, was more difficult. For some reason, Microsoft doesn’t allow the <head runat=”server”></head> tag change the Javascript path automatically like the external stylesheets.

Below is a cheat sheet for linking stylesheets, Javascript, links, and images to a Master Page.

Stylesheets

Make sure you place your external stylesheet path(s) between the following tags:

<head runat="server">
    <link rel="stylesheet" href="css/example.css" type="text/css" media="screen" />
</head>

The URL path will change automatically depending which page you are on.

Javascript

Similarly to the external stylesheet path(s), you should place your Javascript path(s) between the following with the added code:

<head runat="server">
    <script src='<%= ResolveClientUrl("~/js/example.js")%>'></script>
</head>

ResolveClientUrl returns a URL relative to the folder containing the source file.

Links

<asp:HyperLink ID="example" runat="server" Text="Example" NavigateUrl="~/directory/example.aspx" ToolTip="Example"></asp:HyperLink>

• Text = <a href=”">Text</a>
• NavigateURL = href
• ToolTip = title

Images

<asp:Image ID="example" runat="server" ImageUrl="~/images/example.gif" AlternateText="Example Image" />

• ImgUrl = src
• AlternateText = alt