Creating Responsive Website Themes

Z racji, iż w naszym zespole jest osoba z zagranicy, z którą w głównej mierze komunikujemy się w języku angielskim, poniżej przedstawiamy zapiskę na naszego bloga na temat Tworzenia Responsywnych Layoutów do stron www.

Part One: Preparing the Stylesheet

Responsive layouts are definitely this year’s the top search term for web development, reminding me a bit of the Flash “rage” several years back. Thankfully, “responsive” is usually tightly connected with “low resource usage” and “usability”, as opposed to the often oppressing “heaviness” and user unfriendliness of those old Flash websites.

So, how does one make a website “responsive”? This is an extensive topic, so I plan to write about it in a series of short articles, each describing one key element. To give you an idea what all these elements are, think about your typical website, with its header, menu, sidebar, pictures, videos, tables, not to mention dynamic elements, such as sliders. All these items require a different approach to dynamic resizing.

Today I will talk about what should probably be a first step in tackling this problem – setting up basic responsive CSS.

Wherever it is possible, you should always try to set your HTML elements in so-called fluid grids – that is, instead of setting up your CSS like, let’s say, this:

/* classic grid CSS code */
#sidebar {
width: 180px;
}
#content {
width: 540px;
}

you should write it like this:

/* fluid grid CSS code */
#sidebar {
width: 25%;
max-width: 256px;
}
#content {
width: 75%
max-width:768px;
}

Using this approach, your sidebar will be 3 times smaller than the main content area – just like you wanted it to be – but it will adapt to most screen sizes.
You probably don’t want your sidebar to become huge on large desktop screens (19”-24”) – and that is what a neat CSS property “max-width” does.

Fluid grids are very useful tool for responsive layout, however we often require a much more complex stylesheet changes for different screen sizes. This can be accomplished with CSS media queries.
A media query defines that a certain stylesheet, or a part of a stylesheet, only applies if a certain media-type condition is met. For our needs, the media is screen and the condition is size. Media query can be applied directly in a HTML header file:

/* media query in a header to define css file for a desktop version */

or inside a CSS file, to apply a part of it only to certain screen sizes:

/* media query to use a part of CSS code only for screens smaller than 480px */
@media screen and (max-width:480px) {
#sidebar { display:none }
}

Which one you will choose depends mostly on some personal

coding preferences, but you should take into account what kind of impact a single CSS file or multiple ones will have on your page loading times (on a mobile or a desktop media).

An important thing to note is that media queries are supported by all moder web browsers – which means it doesn’t work for Internet Explorer version 8 or less. The good news is that only about 10-15% of all internet users still use such deprecated browsers – and it’s hard to believe any of them are on small screen sizes. If you really must have responsive IE8 website, that you must turn to Javascript fallback. I will not be writing about how to do that, just as I have no plans to write about how to prepare a query for an ENIAC computer.

So, on one side we have have set up a small-scale responsiveness – with fluid grids – and a large scale responsiveness – with media queries. This means we don’t have to make a special CSS code for every possible screen size – but we do have to consider which and how many versions our web site will require. The options are many, and the best solutions vary from website to website.
We have to think about the content we want to provide to different visitors/customer – for example, desktop clients might love to see a slideshow of the latest photos in our portfolio, while a mobile customer is maybe just trying to find our company’s address.
Do we want to have a differente viewing experience of our website on tablet devices? They have bigger screens than smartphones, but they still have one key usability difference from desktop computers – no mouse cursor. No mouse coursor also means no hover action – so all those fancy drop-down menus and other on-hover actions become useless.

In the bottom line, if you really want to create a stylish and user-friendly responsive website, a careful and thorough planning is required – before you even dig into the code!