old library

Adaptable: Responsive Webdesign

text:
Tobias Groganz

tags:

I have extended my site with a responsive design. Try it by resizing your browser window from the biggest to the smallest possible size of your device or visit this site with your mobile device.

My Website as a responsive Design

Like Darwin said it is always the survival of the fittest. The ones that are most adaptable to the environment they live in. Same could be true, maybe not in that drastical sense, for websites. Times are gone that designs are build for a special environment, for a special browser, operating system or device. Nowadays there are uncountable possibilities for users to surf the Internet. Smartphones, Tablets, PCs, Notebooks – and they all vary in their hardware and software specifications. In the end the user should never be forced to visit a website with a specific device or browser in order to get the best look. He should never waste a second on thinking which device to use. It is up to the website owners to make their webappearences accessible and barrier-free.

Responsive Webdesign provides the possibility to deliver the best experience for each device. It allows the website to adjust itself automatically to the right size of the browser. That way, it is not the user that has to adjust himself to the website, instead it is the website that adjusts itself to the user and his device.
Maybe it sounds a little bit weird that this is just on the rise -┬áit sounds logical and necessary from the start and it is hard to think of it as something “new”.

All you need for doing this is provided by the possibilites of HTML5, CSS3 and JavaScript. You simply identify by CSS3-Mediaqueries which CSS-Styles should be applied to different browser sizes. This could look like this in your stylesheet:

@media screen and (max-width: 768px) {

style code goes here

}

In the end there are a couple of possibilities with different advantages and disadvantages how media queries could be used.
As mentioned above one method is to write them directly in your stylesheet. That way always the whole css-file is loaded even if some styles should not be applied. This is no problem with smaller sites but can make bigger sites load pretty slow on mobile devices. Another way is to use them as separated stylesheet in your HTML code. That way only the necessary stylesheet is loaded:

<link rel=”stylesheet” href=”mobile.css” media=”screen and (min width: 320px)”>
<link rel=”stylesheet” href=”tablets.css” media=”screen and (min width: 768px)”>
<link rel=”stylesheet” href=”bigscreens.css” media=”screen and (min width: 1024px)>

Instead of using it directly in you HTML it is also possible to add media queries via an import in your stylesheet. This would look like this:

@import url(“mobile.css”) screen and (min-width: 320px);
@import url(“tablets.css”) screen and (min-width: 768px);

That these media queries will work at all, one adjustment in your HTML <head> is necessary:

<meta name=”viewport” content=”initial-scale=1.0, width=device-width”>

This sets the zoom-level automatically to 100% and thereby let the viewport adjust itself according to the device. 100% will always be 100% whatever device and resolution you are using.

In the end one thing should be kept in mind when designing a website for different devices: responsive webdesign not only allows you to design your site according to the device, but also allows you to leave or add content when necessary. Is it necessary to deliver all the content of a site to different devices? It is always a question of what the user wants and expects when visiting a site with what ever device he chooses.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>