• Feed RSS

Responsive Web Design: Layouts and Media Queries

With the growing number of Smartphone produced in the last three years and the diversity of screen sizes it’s practically impossible to ignore users that browse on a mobile device. Whether they use an Android phone, Windows Mobile phone, a BlackBerry device or an iPhone, whether they are on a tablet, on a Smartphone or on a big screen, each user deserves the best experience possible. As designers, it is our goal to provide those users a nice experience browsing the websites we created, whatever the device used to browse is.
Today most of the clients want their website to be mobile compatible, so this is particularly challenging. Creating a version for each device is impossible, due to the number and diversity of those devices, but also simply because we don’t know what will be created tomorrow. That’s where the concept of “Responsive Webdesign” comes to the rescue.
Responsive Web Design: Layouts and Media Queries



A responsive website is a website that will respond and adapt to the user’s behavior and screen size. The idea is to resize and reorder the design, adapt images, typography, columns, etc., based on screen - browser size, resolution and orientation instead of providing each device a specific website.

A Look at 3 Different Types of Layout

Basic Fluid Layout

Fluid layout is based on a system of relative units instead of absolute pixels. This kind of layout has been around for a while now, and most of the designers use fluid grids created in percentage to achieve such layouts.
The idea is pretty simple: instead of giving the layout rigid width in pixels, we will give it relative ones in percentage. The fluid layout based websites usually take the whole browser width, hence the 100% in this example.
You can see a demo of a fluid design here.
Fluid
Data JavaScript credit: Andreas Bovens
The style.css gives us common styles for the page (color, typo), but let’s take a look at our fluid.CSS file :
#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 60%;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .inner {
    margin-right: 2%;
}
.sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
}
#bar1{
    width:20%;
}
#bar2{
    width:18%;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}
Our header and footer have a 100% width, so they’ll take the whole screen available. The main content has a 60%, and our sidebars 20% and 18% so that we will be able to create a design that will fit the whole space available.
This design adapts perfectly on big screens, but we can see that the sidebar content tend to become hard to read when we resize too small.

Adaptive Layout

The adaptive layout is based on a pretty simple idea: instead of using percentage we will give our layout fixe sizes, but we will adapt those sizes depending of the width of the browser/viewport, thus creating a layout with different “break points”.
For each of those break point, we will use media queries (will come back to explain them in detail in the second part of the article) to adapt the layout of our website so that content is not too hard to read.
You can see and example of adaptive layout here.
Adaptive
The HTML and style.css did not change; all we changed was the structure of the page. Let’s take a closer look at our CSS file.
The "normal" website uses this CSS:
body{
    width:1280px;
    margin:0 auto;
}
#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 800px;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .bloc{
    margin-right: 10px;
}
.sidebar{
    float: left;
    margin: 0 0 20px 20px;
    padding: 0;
    width:220px;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}
I gave the header and footer a 100% width, but the content has a fixed width. Now the good part, the break points with media queries:
/* Media queries */
@media screen and (max-width: 1200px) {
    body{
    width:1000px;
    margin:0 auto;
    }
    #content {
    width: 700px;
    }
    .sidebar{
    width:280px;
    }
}

@media screen and (max-width: 980px) {
body{
    width:850px;
    margin:0 auto;
    }
    #content {
    width: 550px;
    }
    .sidebar{
    width:280px;
    }
}

@media screen and (max-width: 750px) {
    body{
    width:600px;
    margin:0 auto;
    }
    #content {
    width: 400px;
    }
    .sidebar{
    width:190px;
    margin: 0 0 20px 10px;
    }
}

@media screen and (max-width: 540px) {
    body{
    width:450px;
    margin:0 auto;
    }
    #content {
    width: 450px;
    }
    #content .bloc{
    margin:0px;
    }
    .sidebar{
    width:450px;
    margin: 0 0 10px 0;
    }
}

@media screen and (max-width: 380px) {
    body{
    width:360px;
    margin:0 auto;
    }
    #content {
    width: 360px;
    }
    #content .bloc {
    margin:0px;
    }
    .sidebar{
    width:360px;
    margin: 0 0 10px 0;
    }
}
For each break point given by a media query, I changed the size of the body, the content, and the sidebar. Under 540px, the text in the sidebar was too hard to read, so I gave the sidebar the same size as the content, what has the effect of putting the sidebars under the content.
This nice thing about adaptive layout is the possibility to modify and adapt not only the size of the blocs, but the layout and there place on the page.
The big difficulty is then to choose those break points. A first technique could be to base the break points on most "common" device width. Chris Coyier from CSStricks put a nice list of media queries together. Another way to choose the break points it to actually test the design at different screen sizes and see when it gets ugly or when user can’t really read the text easily, and put break point at those size.
Live example of adaptive layout :
Foodsense

Adaptive Example

Responsive Layout

We could define the responsive layout, as a mix between the fluid and adaptive layouts. It will use the relative units of the fluid layout and the break points of the adaptive one.
Here you can see the demo of our previous example, in responsive layout.
Responsive Example
You can see here how fluid the design is: using percentage enables us to create very smooth transition between the different break points of our design.
Here is our stylesheet for the "normal" version:
#page{
    max-width:1280px;
}
#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 60%;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .bloc {
    margin-right: 2%;
}
.sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
}
#bar1{
    width:20%;
}
#bar2{
    width:18%;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}
What’s important here is the use of max-width (instead of width for an adaptive layout). It’s this property that enables us to create this smooth transition. Using a max-width, we won’t have to use as many break points as for an adaptive layout, and all the other sizes will be given in a relative unit (percentage for our example).
And the CSS for the media queries:
/* The media queries*/
@media screen and (max-width: 1000px) {
    #bar1,
    #bar2{
    width:39%;
    }
    .sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
    }
}

@media screen and (max-width: 540px) {
    #bar1,
    #bar2{
    clear:both;
    width:100%;
    }
    .sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
    }
    #content {
    clear:both;
    width:100%;
    }
    #content .bloc {
    margin:0;
    }
}
All the other size will be once again given in percentage, relative to the max-width of our body.
Note that for screen size under 540px, we once again gave the sidebars and the content a 100% width, and place the sidebars under the content using some clear: both.
The advantage of the responsive layout is that you won’t have to use too many break points. Since the size are given in percentage, they will adapt automatically, so the major role of the break points will be to be place where design breaks, to re-order our layout (putting sidebars under content in our example) and give the user a more pleasant reading.
Fore Fathers Group

Responsive

Media Queries: Create and Define Break Points

Media queries where introduced in the CSS3 specifications. Put in a simple way, media queries enables the web designer to create conditionals stylesheets based on width, height, but also orientation, color, etc. There’s a huge list of media queries available on the official w3c website but we will only use some of them in our case. Here is a list of the most commonly used media queries and what they do :

Media Query Utilisation

Media Query Use
min-width: … px Used when the viewport’s width is bigger or equal to width
max-width: … px Used when the viewport’s width is smaller or equal to width
min-device-width: … px Used when the device’s width is bigger or equal to width
max-device-width: … px Used when the device’s width is smaller or equal to width
orientation : portrait // orientation: landscape Target orientation
-webkit-min-device-pixel-ratio : 1.5 Used to target high density device on android and ios
As for print style sheets, media queries can be used as external or internal styles sheets. An external style sheet is easier to organize, it is not downloaded by browsers which don’t support it, but it uses extra http request. An internal style sheet on the other hand does not require extra http request, but the whole stylesheet is downloaded for browsers even if they do not support media queries, and it can be harder to organize. Both have then pro and cons, you’ll have.
You already saw the internal syntax in the example above:
body {
    background: gray;
}
@media all and (max-width:500px) {
body {
        background: blue;
    }
}
And here is the external syntaxes:
<link rel="stylesheet" type="text/CSS"  media="screen and (max-device-width: 480px) " href="mobile.CSS" />

Some "tricks" Worth Knowing About Media Queries

Cascade Matters

Yeah that’s right, as for any peace of CSS code, cascade matters.
Consider the following example:
#container{
background:rgba(111, 78, 152, 0.9); /*violet */
color:rgb(1, 1, 1);

@media all and (min-width:500px) {
    #container{
    background: rgba(255, 0, 0, 0.9); /* red */
    color: white;
    }
}
@media all and (min-width:700px) {
   #container{
    background: rgba(0, 0, 255,0.9); /*blue */
    font-family: serif;
    }
}
See the example on jsfiddle.
If the width of our browser is bigger than 500px, the color of the text gets white, and the background red. If we enlarge the screen up to more than 700px, the background gets blue, but the color of the text stays white because it inherited the color of the min-width:500px media query applied before (700 being, well, bigger than 500).

Creating Stacked Media Queries

Consider the following example :
#container{
    background:rgba(111, 78, 152, 0.9); /*violet */
    padding:10px 5px;
    color:rgb(1, 1, 1);
}

@media all and (min-width:500px) and (max-width:699px) {
   #container{
   background: rgba(255, 0, 0, 0.9); /* rouge */
   font-family: serif;
   }
}
@media all and (min-width:700px) {
   #container{
   background: rgba(0, 0, 255,0.9); /*bleu */
   color: white;
   font-family: serif;
   }
}
See the example on jsfiddle.
The first media query will only be applied for screen between 500px and 699px, and the second for screen bigger than 700px. In the case of stacked media queries, since property is only applied for a certain width, they are not herited. In our example, if we also want to apply a serif font the layout bigger than 700px, we will have to repeat this property.
You’ll need a viewport meta tag to make the media queries work. The viewport meta tag enables you to take control of the viewport of the device. Basically, if no viewport is set, mobile device will try to fit the whole page on the screen, resulting in very small websites.
The viewport meta tag looks like this:
<meta name="viewport"  content="initial-scale=1, width=device-width">
We basically tell the device, that we will be using the device width as the width of our page, and that there will be no zooming on the page when we first launch it.

It’s Not Only About the Mobile!

In my examples, I showed some media queries used for mobile optimization, tablets and smaller screens. But I wanted as a conclusion, to emphasize the fact that media queries are not only about mobile optimization. We tend to see more and more mobile device, but also more and bigger screens.
We know have an xbox that can connect to internet, some of the box our internet providers provide us are equipped with a browser, and even some television are able to connect to internet. Maybe tomorrow you will get a web browser on your fridge, who knows. If we use responsive webdesign to optimize for smaller screens, we can also use them to optimize for bigger ones.
Let's remember: responsive webdesign is about adapting layout to the user's browser size, orientation, whatever that size might be!

Some Useful Resources:

Conclusion

As you can see, responsive webdesign is not that hard to use and enables web designers to create nice layouts that will adapt to many devices and screen sizes. Your now it’s your turn: did you ever used responsive design? In what kind of projects? Do you have some advice and special tips? How do you define your break points? Let us know in the comments.
read more

15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs

If you see a website built on jQuery using images, they must have played with a lightbox in that context. That’s the power of the lightbox, it can transform any simple image library into an attractive and effective gallery. It’s an important and popular contribution from the jQuery side to the design community.
Thanks to the awesome jQuery community who make these stunning lightbox plug-ins, giving huge scope for designers to showcase images on websites. There is a huge collection of plug-ins each giving a different look and style to images.
We collected 15 stunning jQuery lightbox plug-ins for your reference. Hope you’ll find it worth having a look.
jQuery Lightbox Plug-ins


Stunning jQuery Lightbox Plug-ins

Lightview jQuery Plug-in

Lightview was built to change the way you overlay content on a website.
Lightview jQuery Plug-in
TopUp

TopUp is an easy to use JavaScript library for unobtrusively displaying images and Web pages in a Web 2.0 approach of pop-up. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.
TopUp
Highslide Lightbox Plug-in

Highslide JS is an image, media and gallery viewer written in JavaScript.
Highslide Lightbox Plug-in
Color Box

A lightweight customizable lightbox plug-in for jQuery 1.3+
Color Box
Lightbox 2

Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to set up and works on all modern browsers.
Lightbox 2
prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also supports videos, flash, YouTube, frames and Ajax. It’s a full blown media lightbox.
prettyPhoto
Slimbox 2

Slimbox 2 is a 4 KB visual clone of the popular Light box 2 script by Lokesh Dhaka, written using the jQuery JavaScript library.
Slimbox 2
Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.
Shadowbox
Pirobox Extended V.1.0.

One of the most important things with this plug-in is the ability to open any kind of file, from inline content to .swf files, from simple images to .pdf files.
Other things are: automatic image resizing and drag and drop.
Pirobox Extended V.1.0
GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.
GreyBox
jQuery Super Box

jQuery Super box! Is a script which allows you to display windows with the lightbox effect.
This script is a plug-in for jQuery (1.3.x).
jQuery Super Box
Fancy Box

Fancy Box is a tool for displaying images, HTML content and multimedia in a Mac-style "light box" that floats overtop of web page.
Fancy Box
Pirobox Extended V.1.1.

Pirobox Extended V.1.1 advanced version, Zoom In option with dragable image viewer for large dimension images.
Pirobox Extended V.1.1
jQuery Lightbox Plug-in

JQuery lightbox plug-in is simple, elegant, and unobtrusive, no need for extra markup, and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
jQuery Lightbox Plug-in
Ceebox

An overlay pop-up script for easily embedding flash video, displaying images, or showing HTML (either external sites via iframe or content on your own site via AJAX).
Ceebox

Conclusion

Do you use any of these lightboxes in your website design work? Do you have a favorite lightbox plug-in? If you do and we haven't listed it here, please share the link with us in the comments below. Your comments and opinions are always very welcome.

Written by: Carol Francis for Onextrapixel - Web Design & Development Online Magazine | One comment
read more