Solving Problems with a Responsive Design

Jack Simpson

Head of Marketing and Communications

Lorem ipsum et cetera

As we have a brand new website we thought we’d show you a little tutorial to explain how we built it. This is to show the problem with browser size and how to solve the problems with a responsive design, without the need to hide/abstract information from users with lower browser resolutions.

Responsive design basically means that the appearance of the website changes according to the screen resolution of the device/browser you are using.

The man behind the website, Ian Munro, showed me how it’s done.

Step 1: Creating an un-styled HTML5 layout.
This consists of a header, a content container and a footer. The header contains a navigation element <nav></nav> which is the parent container for an unordered list <ul></ul>.



	
		My First Responsive Design
		
		
		
		
	
	
		

My First Responsive Design

The Page

The Page Contents go here

© 2012 WebApplicationsUK.com

Step 2: Adding some styles to our list items.


	body {
		margin:0;
		padding:0;
	}
	nav {
		width:100%;
	}
	ul {
		text-align:center;
		list-style:none;
		padding:0;
	}
	li {
		display:inline-block;
		width:10%;
		background:#c1c1c1;
		padding:10px;
		text-align:center;
	}
	a {
		display:block;
		text-decoration:none;
		color:#fff;
	}

	li.active, li:hover {
		background:#555555;
	}

The navigation menu is centred on our screen and some padding and background colours have been added to visually improve the look of the menu. Hover effects are also added over each list item.

Here is where we hit our problem. When the browser is scaled down the menu items break which means that ultimately the beautiful website we created now looks awful!

Step 3: The Solution
So what do we do? Obviously we want to make the website look good across all platforms and devices. However, we don’t want to create a separate website for every device, like the iPhone for example. Doing this would increase development time, increase cost and in addition would be a lot harder to maintain because if we choose to make any alterations we would have to be done for change all versions of our websites. That leads us to responsive design!


	...
	@media screen and (max-width: 780px) {
		li {
			width:100%;
			padding:5px 0;
		}
	}

The @media screen query added to the <style></style> part of the HTML document is what controls the layout based on its width. Using the max-width: 780px, we can change the layout to suit devices with a resolution of 780px and below.
In our case each list item is stretched to the full width of the screen. The result is a vertical menu which would now look great on any mobile or touch screen device!

Download the Web Applications UK – Responsive Tutorial package by clicking on the button below.
[wpdm_file id=1]