Simply go to Responsive Web Design

Who somewhat deals with webdesign, is encountered on the topic "Responsive Web Design" for sure – nowadays an inevitable topic, in addition to CSS3 and HTML5. Not least because certainly every second has an Internet-enabled smartphone or a tablet PC, you can surf the net. Web designers need to respond to this trend, because the presentation is on normal websites e.g. smartphones not so ideal.

But before I go into detail here, I would like to explain briefly what this is all about. In most cases, a website has always been allocated a fixed width, for example, a width of 1000 pixels. If you look at this site on a full-size desktop (PC with screen), then the pages look exactly how they should look. Usually you can recognize some space on the left and right edges.

But when I look at the same page on a smartphone, then the entire site is usually so tiny that you can see hardly anything, let the can read. Here is an example based on my blog:

The reason for that are the two different sized "display areas". A regular screen is on the dimensions much larger than a small smartphone device. Therefore 1000 pixels on the screen are "normally" tall, while on the phone everything is scaled down. These 1000 pixels don't fit fully at a 100% view on the surface. Therefore it will be zoomed, what reduced all images. Now the smartphone user could easily zoom back again with the fingers, but then you have to scrub back and forth in order to be able to read the text at the right margin, so that everything can be read at a glance. But this solution is not optimal, and above all not very user friendly. Therefore, we need responsive web design here.

Responsive web design means literally "responsive" web design. The layout and design respond to the size of the screen. If a site called on a small smartphone, the site recognizes this and reacts accordingly. Areas are reduced, unimportant disappears, fonts are larger and much more – there there are no limits. Of course this raises the question whether it makes any sense, to let "react" a website or a stand-alone mobile website should be created – so you have two independent versions. Well, everything has its pros and cons. For great online stores makes a real app certainly the most sense, because responsive web design does not represent the user-friendliness as an individually created app. But for us bloggger a responsive site is advantageous, because for example content must be maintained only once. Apart from search engines for a website also recommend to use only one URL, e.g. traumfinsternis.de (see also "Importance of the www in top-level domains") – I would create a decoupled mobile version, the mobile domain would mean, for example mobile.traumfinsternis.de – these two domains are distinct and different, but contain the same text and images, which is very detrimental for search engine optimization (SEO)! Therefore, we stay at only one site version, but let it optically respond different on different screen sizes.

Basically, it always means a lot more work if you want to remodel an existing site suitable for mobile use, as if a new site designed from scratch purely as a desktop and mobile version, programmed and/or implemented. In addition, there are now certainly many approaches and concepts. Here I want to tell you a few tips and tricks, what you have to do to remodel the existing Blog or the existing site relatively simple "responsive".

I use this simple media queries that could be known perhaps by CSS. With Media Queries you can determine which CSS file should be used on the screen for viewing the site and which CSS file to use when you print a page. The same principle also works with screen sizes. So you define CSS styles that will apply only in specific screen sizes. So you can define that a box is 1000 pixels wide with a large screen and at a smartphone the width is 100%, whereby the box width depends on the maximum width of the Smartphone "screen" for example.

First take your site in your mind (on screen, printed, or as a sketch) and decide which areas, which boxes, which objects etc. should appear to mobile devices. Super great wallpapers make here as rather less sense, because they cost only unnecessary data transfers (mobile internet is not always favorable). On my blog I've decided that I want to have just hidden the great header slider in the header. The rest should be adjusted.

There are now three ways you can integrate your CSS on your site.

1. by integrating a "mobile.css" file in the head section of a page that, where "media" defines from which screen size to access this file; so then a new CSS file for each screen size must be created
2. by Media Queries, which defines its CSS code blocks per screen size, this can be in the existing CSS file are
3. by a combination of both, by a normal "mobile.css" file is always involved (no matter what the screen size or splitting) and in the file, the Media Queries come into play (this one needs only a mobile CSS file)

The code to embed two CSS files in the head section:

The code to the Media Queries in CSS:

@media screen and (max-width: 480px) { /* Smartphone */	
	.vorhandene_css_klasse {
		width: 100%;
		etc...
	}
}
  

I have selected and implemented on my blog the third option. I have created a new CSS file, the "mobile.css" means and then defined in my CSS Styles the Media Queries.

Because there are other mobile devices as smartphones (e.g. tablets), you could divide a website in different "break points". The first responsive CSS-block takes from 900 pixels screen width and the second at 480 pixels. This allows you to define how the site behaves on tablets and smartphones. The "screen" for tablets is so much greater than that of smartphones. But here on my blog I wanted to define, that everything is shown from 900 pixels with variable 100%. That is, the widths of the selected elements 900 pixels and 480 pixels, will go over the entire "screen". In principle, these elements always fill the entire width, no matter how big the screen or mobile device. Advantage here is that you only have to "rebuild" the website layout once. The downside, of course, that even the most latitudes go with a screen width from 900 pixels to 100%, which may not always be so beneficial.

Let's slow start with the code. In the Head-range of my pages is now available:

The CSS file "mobile.css" looks like this (taps 900px width):

@media screen and (max-width: 900px) {
	.vorhandene_css_klasse {
		width: 100%;
		etc...
	}
}
  

Everything that is located between the first and the last curly braces { and } is the area in which you can write the new CSS code. For that you only use CSS classes and IDs, which are already available and have been defined in the normal style.css file! No new so-called identifiers are created! Wir haben beispielsweise folgenden Layout-Aufbau auf unserer Website:

The index.html file with the HTML structure looks like this: (for testing you can also completely copy and save the code as an HTML file and then open for viewing in your browser)

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
 <link type="text/css" rel="stylesheet" media="screen" href="css/mobile.css" />
</head>
<body>
<div id="wrapper">
 <div id="header">Header</div>
 <div id="navigation">Navigation</div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>
</body>
</html>
  

The syntax highlights not work here unfortunately.

The style.css file might look like this (it is stored in the same folder as the index.html file):

#wrapper {
	width: 900px;
	margin: 0 auto;
}
#header {
	width: 900px;
	height: 100px;
	margin: 0 0 20px 0;
	background: #00c; 
	color: #fff;
}
#content {
	width: 660px;
	min-height: 400px;
	float: left;
	margin: 0 0 20px 0;
	background: #900;
	color: #fff;
}
#navigation {
	width: 200px;
	min-height: 400px;
	float: right;
	margin: 0 0 20px 0;
	background: #393;
	color: #fff;
}
#footer {
	width: 900px;
	height: 50px;
	clear: both;
	background: #c60;
	color: #fff;
}
  

Tip: The order of the div container is crucial here. Do you have a vertical navigation menu on the right side (as in this example), you should still first the Div container for the navigation (with float: right) and then define the container for the content (with float: left). From the logical construction to, a reverse order would make more sense. But if the page is adapted for mobile devices, then you are no longer able to influence the order of the elements, that is, the navigation would be on smartphones below the content. Therefore, the navigation div should be placed before the content, even if the menu is on a full-size desktop after the content. This is easy to use. Of course you can also intentionally put the navigation on mobile devices all the way down. Well there is always the question of what you want yourself.

To make this page now flexible for mobile devices, we have to define the different div containers how they should behave, in this case, all divs possess from 900 pixels wide an intrinsic width of 100%. Currently, the wrapper div with a width of 900 pixels would be much too wide for small devices. In addition, the content and the navigation area should no longer next to each other, but with each other, so they are thus no longer "float". The body in general should have 5 pixel padding, so that the container does not "stick" on the edge.

The CSS code for the mobile.css file looks like this (it is stored in the same folder as the index.html file):

@media screen and (max-width: 900px) {
	body {
		padding: 5px;
	}
	#wrapper,
	#header,
	#footer {
		width: 100%;
	}
	#content,
	#navigation {
		width: 100%;
		float: none;
	}
}
  

According to this principle, all elements are treated.

My blog now looks like this:

Responsive Images

To see all pictures, especially when they take up the entire content width, are shown not too big and are also "responsive", the following trick helps in CSS (mobile.css):

@media screen and (max-width: 900px) {
	body {
		padding: 5px;
	}
	#wrapper,
	#header,
	#footer {
		width: 100%;
	}
	#content,
	#navigation {
		width: 100%;
		float: none;
	}
	#content img {
		max-width: 100%;
	}
}
  

Thus, all images that are in the content div have a maximum width of 100% (max-width). Although it is not an elegant solution, because the image is not scaled down in "real", but it works, and above all pretty straightforward.

When I wanted to put this on my blog, I came across a problem. The images were displayed in mobile devices distorted. This I have resolved, as I have also set the height of the images at 100%, so height: 100%

Responsive Navigation

Do you have a (very) large navigation, the menu items may appear on your smartphone almost daunting, because they take up a lot of space. In general menu items are displayed on the mobile device in 100% width with each other, because you can better select it with your finger (touch). For this menu list is not infinitely long, you can shorten it by adding a title, all navigation points pops up by a "click". The principle is as follows: all menu items are displayed side by side on a desktop screen as a list. Decreases the screen, then all menu items will be hidden automatically and an additional point is inserted that contains the click function.

I would like to refer here to this tutorial: www.hongkiat.com/blog/responsive-web-nav/

On this page is explained well, as you can you create this repsonsive menu yourself. I can only recommend that you download the code and then test yourself just once. So it looks now final on Traumfinsternis:

Customize hover effects

Do not forget that at the mobile terminals a hover (mouseover) effect is not possible. You can only select something (with the finger "click"). That is, for example, Menus with a submenu, which is visible only when you hover need to be changed in concept. Either then all menu items should always be visible or with a click instead of mouseover.

Thanks again to chrissishop for this supplement :-)

Testing

If you do not have a mobile device, you can get your mobile website also test by reducing your browser window. This is not the most elegant solution, but better than not being able to test :)

Related to "Simply go to Responsive Web Design":

• Education in digital media designer
• CSS3 innovations
• Compact flood of pictures
• MP3 in car - without player
• Picture labyrinth