Editor’s note: Welcome to our first theme-based series which will run on Hongkiat.com for the following two weeks. We’re kicking off our "Responsive Web Design 10-part series" with an intro into why you should be building responsive web layouts for mobile.

Designers have it tougher now than before. We not only have to design for stationary devices, but also mobile devices like the tablet and smartphones, and since we are talking about a lot of different screen sizes and resolutions here, it’s a huge task to shoulder. In light of this, responsive web design could be the best solution. It offers more than just a simple mobile template; instead, your entire site layout is designed to be flexible enough to fit into any possible screen resolution.

With such a fluid design scheme there are obvious benefits and drawbacks. Consider my examples below for how responsive web design can make the transition into mobile devices a smoother one.

How Responsive Design Works

When I use the word “responsive” in terms of web design I mean that the entire layout responds based on the user’s screen resolution. Imagine this scenario: you’re reading a website on one tablet, then you switch to another device for one reason or another. The browser window is now re-sized. A responsive web design layout will feature schemes and a layout that gracefully breaks down and reinvents itself. From a usability perspective this is a brilliant technique.

Responsive design is all about creating a homogeneous experience regardless of the browser or device screen size. I’ve found the perfect example from ‘A List Apart’ to illustrate my point, which also includes dynamic images. The width is set in CSS using percentages for mostly all of the internal container elements. Larger websites also respond well to removing dynamic content such as JavaScript when it’s not supported.

Why Design for Mobile?

It has become evident that more users are going mobile, and not just for on-the-go web browsing either. Tablet PCs have begun to change in context when users are online in the classroom. Designing for mobile is certainly a requirement in modern day web standards. The only problem is choosing your method of development, and targeting your audience appropriately.

When you start coding for specific screen resolutions you end up with too many stylesheets to deal with. Media queries in CSS3 can be used to build iPhone-specific layouts for both portrait and landscape view. Since you can predetermine the pixel density it’s easy to revamp any HTML template for mobile.

(Image Source: bradfrostweb)

But when you code a layout for responsive design the mobile aspects are taken care of by default. Both desktop and mobile users will be offered a similar experience and you won’t need to worry about external CSS properties. The only research you’d need to perform is planning for the smallest possible display screen. Google Analytics traffic data can be very helpful for this.

You won’t likely get your website working 100% on every single device running every browser. But you can target a majority based on the average width of the screen. Older iPhone models use a 320×480 display resolution which isn’t so unbelievable. I would shoot for a minimum width of 240px, or even smaller if you can fit it.

Removing the Default Zoom

If you have spent any time browsing the Web on a smartphone you’ll notice how websites are scaled out to fully display within the screen. This is for the user’s convenience since most websites do not have a mobile counterpart, thus the full layout is the safest bet.

But when you get into building a responsive mobile design, the auto-zoom can really mess up your layout elements. Specifically, images and navigation content may appear small or too large in your layout. There is a special meta tag you can append into the document header which resets this in most Android and iPhone devices.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

This is known as the viewport meta tag which sets up some custom variables within the content. Apple has a documentation page regarding a few other meta tags you should look into, although these are geared specifically toward websites on iOS. The initial-scale value is important as this defaults your website to a full 100% zoom.

The last value for user-scalable will remove this zoom functionality altogether so the user cannot resize the layout. This will lock the design into one size based on the full device width. Note that even if you disable the zoom functionality a good responsive design will still adapt when transitioning from portrait to landscape on any device! But it makes sense to lock a responsive design and remove the generic scaling options.

Dynamic Image Scaling

Images are another important facet of practically every website. Mobile users may not be looking to stream videos, but photos are a whole different story. These are also the biggest culprits when it comes to layouts breaking out of the box model.

img { max-width: 100%; }

The standard rule for CSS is to apply a max-width property to all images. Since they’ll always be set at 100% you will never notice distortions. When the user re-sizes their browser window smaller than your image can handle it’ll automatically re-adjust to 100% width scaled down. The problem is that Internet Explorer cannot understand this property, so you’ll need to put together an IE-specific stylesheet using width: 100%;.

Flexible images are also possible if you use JavaScript or jQuery plugins. There are some really smart developers out there who have put in the time to build incredibly responsive image content. This thread is just one of many in Stack Overflow which features an outlandish yet convenient approach to solving the IE6/7 bugs.

I would personally recommend sticking to natural CSS image resizing. If your website is running in a mobile browser with JavaScript enabled it can most likely support CSS as well. If you really want to dig deeper, check out this 24 ways article Images for Adaptive Designs..

Touching Designs

Web developers may forget that mobile users aren’t on keypad phones like BlackBerrys anymore. A majority of smartphones today use touchscreen interfaces, which render a scenario different from mouse-and-keyboard setups.

As such you’ll need to consider alternate solutions in mobile elements. Dropdown menus may work better when displayed as a single menu on the right-hand side. Most users are able to tap links on the right side easier than the left, but either column works to alleviate space. Using margin indents, it’s simple to identify the link hierarchy without requiring any jQuery code.

It’s also good practice to increase the size of these navigation links. Mobile users do not have the luxury of a large screens afforded on desktops or even laptop computers. You need to keep text large, up-front, tap-able and readable at all costs. You may even want to resize if the user switches between portrait and landscape view – a fairly common recurrence when browsing the mobile web.

Custom CSS Layouts

In general it’s best to adapt your layout and allow for natural degradation of your content. If you have a sidebar and content area you should set them in widths of percentages or ems, anything that will re-size with the browser window. If you apply a min-width this will eventually break off part of the layout; so now your sidebar content displays above the page content.

(Image Source: Pepperson)

When you consider how this affects the overall design it’s a lot easier to develop external stylesheets. However you are likely to run into screen resolutions which are just too small for your layout to render. This is the perfect scenario for adding custom CSS properties to remove portions of the page, or reformat the content altogether.

Toggle Extra Content On/Off

Examples of large content blocks include web forms, dynamic menus, image sliders, and other similar ideas. Instead of completely removing these elements as the layout gets smaller why not simply hide them in a “minimized” content div? You could use either CSS or JavaScript to perform the edits, but ultimately you’ll likely need some JS code to create a toggle button.

This alternative is perfect for keeping your home page dynamic and full of rich web media. Instead of completely removing your drop-down navigation or rearranging the page structure you can hide it within a content div. If the user wants to display your links they tap a toggle button to open/close the menu.

This formatting is simple, intuitive, and easy to work with on touchscreen devices. Inside the div you can place each of the dropdown menus side-by-side in a column format. As the window resizes even smaller they will naturally drop below each other and increase the page height. Yet the option to collapse the entire menu is easily attainable and just a single tap away. This toggle div is also perfect for image sliders in cooperation with dynamic photo re-sizing.

Using Media Queries

If a mobile screen would break your 2 or 3-column layout you’ll end up with each of the content areas stacked above each other. The whole site would appear to bleed over and may come off very confusing without distinguished block areas. A better idea is to add a bottom border on each column, only for mobile devices, using an external stylesheet like mobile.css.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

With these new styles your content is broken up into divisible sections. The media attribute above is specially designed to target older iPhone devices in landscape view. But it will also apply to devices with screens smaller than 480 pixels. Use this to your advantage so you can determine at what point the layout “breaks up”.

There are a few more options you can use for detecting device orientation. This fantastic guide on CSS media can give you a few ideas. Additionally the new mobile project 320 and up offers a boilerplate for mobile CSS @media styles. These can be included directly into the same mobile.css file and apply rules for many different devices.

  /* Smartphones (portrait and landscape) ----------- */  @media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {  /* Styles */  }    /* Smartphones (landscape) ----------- */  @media only screen  and (min-width : 321px) {  /* Styles */  }    /* Smartphones (portrait) ----------- */  @media only screen  and (max-width : 320px) {  /* Styles */  }    /* iPads (portrait and landscape) ----------- */  @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) {  /* Styles */  }  

(Source: Hardboiled CSS3 Media Queries)

Helpful Tools

• Skeleton – Beautiful Boilerplate for Responsive Mobile Design
• Going from adaptive to fully responsive

Showcase: Beautiful Responsive Designs

I hope these tips and design techniques will encourage you to move towards building exciting responsive layouts not just for mobile screens, but for any common device with web browsing. To keep the creative juices flowing I have put together a small showcase of responsive mobile web designs. Be sure to check out some of the more unique features and share your thoughts on the design or the topic in the discussion area.

hanging up the moon

Macdonald Hotels

CSS-Tricks

Happy Cog

Teixido

CSS Wizardry

Information Architects

ART=WORK

Avondale Meadows

Hardboiled Web Design

Sony USA

Future Friendly

We Cant Stop Thinking

Authentic Jobs

Colbow Design

320 and up

Fork CMS

The Happy Bit

Electric Pulp

Foster Props

Plexical

Preeti Cakes

More Hazards

Dentistry’s Information Centre

ribot – interface design

Hello Fisher

Social Marketer’s Summit

William Csete

Woolly Robot

Meltmedia

Stay tuned!

In tomorrow’s post we’ll be showcasing some free responsive WordPress themes you can download for use. Be sure to tune in for that.

Related posts:

1. Mobile Web Design: 10 Tips To Better Usability
2. Mobile App Design/Dev: Custom Themes with jQuery Mobile
3. Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile
4. A look into: Designing for Mobile Devices

One thing that I love about CSS3 is is the new addition of selectors that allow us to target elements specifically without relying on the class, id or other element attribute, and one that we will cover here is the following selector, :first-of-type.

The :first-of-type selector will target the first child of the specified element, for example, the snippet below will target the first h2 on the web page.

  h2:first-of-type {  	/* style declaration */  }  

The :first-of-type is also equal to :nth-of-type(1), so rather than selecting only the first of the type, we can further select the second, the third and so on. The following snippet will target the second h2 element on the web page.

  h2:nth-of-type(2) {  	/* style declaration */  }  

:first-of-type” vs. “:first-child”

It may seem like these two selectors are doing the same thing, but that’s not the case. Let’s see the following demonstration:

Let’s say we have five paragraph elements wrapped within a div, like this:

  <div>  	<p>Pragraph 1</p>  	<p>Pragraph 2</p>  	<p>Pragraph 3</p>  	<p>Pragraph 4</p>  	<p>Pragraph 5</p>  </div>  

Now, we would like to select the first paragraph using the :first-child selector.

  p:first-child {  	padding: 5px 10px;  	border-radius: 2px;  	background: #8960a7;  	color: #fff;  	border: 1px solid #5b456a;  }  

And as we’ve anticipated, the first paragraph is successfully selected.

• :first-child Demo

However, when we add a different element before the first paragraph, let’s say an h1, like the snippet below:

  <div>  	<h1>Heading 1</h1>  	<p>Pragraph 1</p>  	<p>Pragraph 2</p>  	<p>Pragraph 3</p>  	<p>Pragraph 4</p>  	<p>Pragraph 5</p>  </div>  

the first paragraph will not be selected, as the first child inside the div is no longer a paragraph, but is now an h1.

So, this is the situation where the :first-of-type selector comes to solve the problem.

  p:first-of-type {  	padding: 5px 10px;  	border-radius: 2px;  	background: #a8b700;  	color: #fff;  	border: 1px solid #597500;  }  

• :first-of-type Demo

The “Last” Selector

Where there is the “first”, then there will also be the “last”.

The reverse of the two selectors we have discussed above are the following two selectors; the :last-child and the :last-of-type. They basically are the same as the above two, except they do target the last child of the specified element.

For example, this snippet below will target the last paragraph inside the div.

  p:last-child {  	padding: 5px 10px;  	border-radius: 2px;  	background: #8960a7;  	color: #fff;  	border: 1px solid #5b456a;  }  

• :last-child Demo

And this snippet will also target the last paragraph in the same situation as we have discussed above; this time the <p> is followed directly by a different element.

  p:last-of-type {  	padding: 5px 10px;  	border-radius: 2px;  	background: #a8b700;  	color: #fff;  	border: 1px solid #597500;  }  

• :last-of-type Demo

The Selectivizr

Like any other new feature in CSS3, these selectors are not supported in old browsers, mainly Internet Explorer 6 to 8, with an exception for the :first-child selector, as it has been added since CSS2.1. Its relative the :last-child was only added in CSS3.

So, if all these selectors we’ve mentioned here are really required for your webite, you can use a JavaScript Library called Selectivizr to emulate those CSS3 selector’s functionality.

The Selectivizr is dependent on other JavaScript Libraries in order to work, such as the jQuery, Dojo, Prototype and MooTools; and seeing from the comparison table in the official website, MooTools seems to be able to handle all the selectors.

So, let’s include it along with the Selectivizr, as follows:

  <!--[if lte IE 8]>  <script type="text/javascript" src="mootools,js"></script>  <script type="text/javascript" src="selectivizr.js"></script>  <![endif]-->  

The conditional comment above will ensure that these libraries will only be loaded in Internet Explorer 8 and below.

Finally, you can view the demo from the following links and it should now work both in modern and old browsers (IE8 and below). You can also download the source file for further examination. Enjoy.

• Demo
• Download Source

Related posts:

1. CSS3 Attribute Selector: Targeting the File Type
2. A Look into: CSS3 Negation (:NOT) Selector
3. Creating Advanced “Marquee” with CSS3 Animation
4. How to Create RSS Feed Logo with CSS3

When you have many applications installed on your computer, it may take some time for you to locate and launch any particular application from the ‘Start’ menu, since you need to find the launch or shortcut button first. Even when you create shortcut buttons on your desktop, the problem remains the same if you have tons of applications to search through.

Actually using keyboard shortcuts or ‘hotkeys’ could be the best solution. For example, using Ctrl + P to launch your Paint application would be a lot easier and faster than scanning your desktop for the Paint icon, won’t it?

But can this be done on your Windows? Well, get this hotkey function activated on your computer with KeyboardExt, a desktop application that actually lists all your available applications in one simple window so you can quickly locate and launch your applications. KeyboardExt also provides the option to assign hotkeys to your applications, and we will show you how with this tutorial.

Setting up KeyboardExt

To start off, go to the official page to download KeyboardExt and install.

Once downloaded and installed, click open the KeyboardExt application, and you will see a window with a full list of applications that are available on your computer.

This is the window that will help you to quickly locate and launch your applications, simply locate and click on the application to launch.

Setting up Hotkeys

To make it even faster, let’s set the ‘Hotkeys’. Click on the button ‘Hotkeys’ at the top right side of the window.

In this page, you will see a preset keyboard shortcut to some of the applications that’s available on your computer. Click on ‘New Hotkey’ link just above the list, to start assigning a new hotkey.

A small window will pop up with some options. To set new hotkeys, follow these simple instructions.

1. Fill up the description of the hotkey. To remember which is for what app, write the name of the application as the description.

2. Check the keyboard buttons you want to use for this shortcut, you can use the Windows button or Ctrl, Alt and Shift buttons. You can use all 4 main buttons plus any one (1) of other buttons on your keyboard e.g. Win + P.

3. Enter the path of the application, or use the folder explorer button to select from your applications folder.

4. When you’re done, click on the ‘Add Hotkey’ button.

System Hotkeys

There are preset hotkeys available for some of the regular actions one uses on desktop. To find out, click on the ‘Options’ tab and go to ‘System Hotkeys’.

In the list of Hotkeys available, simply check the box to activate the hotkey, and uncheck to deactivate.

Conclusion

With KeyboardExt, you can now search from Wikipedia by pressing Ctrl + W on your keyboard! Launching desktop applications now only require a keyboard shortcut. One setback from all of this could be that you will start to forget how your start menu look like soon.

Related posts:

1. How to Create New Folders in Windows by Drag & Drop [Quicktip]
2. How to Reveal iPad’s Hidden Keyboard Buttons [Quicktip]
3. How to Unlock GodMode in Windows 8 [Quicktip]
4. How to Fix Home Button Delays on iOS Devices [Quicktip]