Nick Pyett

Fluid Fader: A jQuery Plugin to Create a Fluid Image Carousel

View the demo and fork on GitHub.

Fluid websites are a great method to create a responsive website. CSS can be used to create both fluid images and videos, but what about other web design elements? I was recently involved with a project that was using media queries to deliver the site over multiple platforms, and needed an image slider that was fluid. Google didn't deliver, so I made one myself!

Create Your Own Image Gallery

The code is available on GitHub, as was created as a plugin for jQuery. Once you have jQuery in your page, create your HTML and CSS as described on the demo page, and then call Fluid Fader like so to create your image gallery.

$('#fluid-fader').fluidFader();

Browser Warfare

Fluid Fader work well across all browsers (yeah, including skanky old IE6), but because it needs quite a lot of CSS to make it work, I would suggest thorough testing.

Enjoy!

Comment & share »

Media Queries Above 980 Pixels

View the demo.

CSS3 media queries are a useful tool to change the layout of a web page depending on the screen size of the device viewing it. There are plenty of examples of how to create a site suitable for mobile or tablet devices using media queries (including this post on my blog), but what about screen sizes larger than the standard desktop layout width of 980 pixels?

Media queries are usually applied to a standard layout. For devices that do support media queries, the layout will be realigned to suit the device, but for those devices that don't support media queries (such as a PC using IE6), the standard desktop layout will be used.

What's the problem?

A website using the technique described so far may be viewed by a device which supports media queries (such as a PC using Firefox 6) but has a screen size much larger than 980 pixels (devices with screen sizes over 2,500 pixels in width are quite common), yet will still be viewing a site at 980 pixels wide.

Why optimize a layout for screen sizes of the average layout width and below, but not above the average?

The answer to this question is two fold. Firstly, we still want to deliver the average layout width to devices that don't support media queries (which means we must build the original layout to 980 pixels in width), and secondly, we will still want to set an upper limit to the width of our design.

We would wish to do this for usability and design decisions, such as keeping the line length of text to the optimum of 60 - 80 characters, and keeping images from being stretched too much and being distorted.

The solution

You have probably seen many layouts using the max-width media feature, but you can also target CSS to devices above a certain width using min-width. Using these two features, we can write media queries that will fit screen sizes from a top limit (in this case it is 1150 pixels, but you can set the top limit to whatever you like), down to a mobile device width of around 320 pixels, but also, as the original design (the CSS before the media queries are applied) is created to 980 pixels, users without media queries will be served the average layout size.

I have created a demo to highlight this process in action. The demo includes a button to toggle media queries on and off (as long as your browser supports JavaScript).

The media queries we need

Here is the CSS.

@media screen and (min-width: 1150px) {

    .media-queries .row .center
    {
        width: 1116px;
    }

}

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

    .media-queries .row .center
    {
        width: 96%;
        padding-left: 0;
        padding-right: 0;
    }

}

@media screen and (max-width: 480px) {
   
    .media-queries .row .center
    {
        padding: 0;
    }
   
    .media-queries .row .center div
    {
        float: none;
        width: 100%;
        margin: 17px 0;
    }
}

As you can see, we are creating two queries with only 1 pixel in difference, the first to target screens with width of 1150 pixels and everything above (the width of 1116 pixels is due to the padding on the sides of the central div, and the .media-queries class is for toggling the effect in the demo), and the second to devices 1 pixel smaller, at 1149 pixels.

The third screen query is to align the layout to a mobile screen.

Media queries are a very powerful technique, so if just making a layout wider for larger screens is not enough to create a great design, you could use the positioning or display CSS properties to add, rearrange or reposition new or existing elements.

Using this technique makes targeting layouts to screen sizes of both above and below the average easy, so you can create the best user experience for the most users as possible.

Comment & share »

Using Media Queries to Create a Responsive Web Design

One of the development priorities when I redesigned my website was to use media queries to create a layout that was responsive to as many screen sizes as possible. With the rise of mobile, we can no longer rely on 980 pixel wide layouts delivering the best experience for the various devices being used to browse the web.

Media queries are part of the CSS3 W3C recommendation and can be used to completely restyle a web page depending on the media type (such as print or screen) and media feature of the device's screen, such as orientation, resolution and colour support. For my site, I shall only be using the media type and width of the screen.

Responsive and Fluid

Many of the sites that use media queries also employ another technique to create a responsive website. Fluid layouts use relative widths (such as percentages) that only fill a portion of the screen width of the device being used, meaning content will fit to all screen sizes. A limitation of fluid layouts is that content cannot be hidden or the layout changed significantly, such as moving entire columns or changing background images.

Media queries used alongside fluid layouts provide the best of both worlds: a design that can fit to a screen size exactly, and a layout that can be realigned depending on that screen size.

Not mobile specific?

Another tactic for creating a device specific website is using device detection and redirecting to a separate dedicated site, usually on a sub-domain such as http://m.example.com. Device detection is a great method if the content of your current standard desktop site is incredibly complex, contains large file sizes or would generally be difficult to scale down for a mobile's screen.

A lingering problem with device detection is that it is very difficult to predict and detect every single device before it arrives at your site. Granted, most devices can be predicted, and media queries themselves are not supported perfectly in all browsers, but media queries will at least fit all devices that support them perfectly. For both these cases, the worst case scenario is that the user will see the desktop version of the site.

If you do decide to use device detection, what do you do about tablets? You could create another site specifically for tablets, but tablets have a wide range of screen sizes, so it is imperative that you create a fluid design that will fit to all tablet screen sizes. You will now have created three separate websites! This may be the best tactic for your digital marketing strategy, and you could certainly take steps to reuse the content and media, but this may not be within your budget.

If the content on your site is mainly copy with a small amount of images, which could be downloaded easily on a mobile Internet connection, media queries allow you to serve a design specific to the device, without any redirection or creation of multiple websites. This is the case with my blog, and certainly many other blogs and other types of website.

The Beef

Ok let's finally get down to some code. Firstly, the media queries themselves.

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

 /* CSS here creates two-column fluid layout */
}

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

 /* CSS here creates single-column fluid layout, realigns header */
}

As you can see, only the two. These are positioned right at the bottom of my CSS file.

The first query will apply the CSS for screen sizes (for media types of screen) no larger than 940 pixels. This is the width of the main content of my website; the central column of 900 pixels and padding of 20 pixels at each side.

Without media queries, the layout of my site would result in a horizontal scroll-bar for screens smaller than 940 pixels. With media queries, I have applied widths measured in percentages for the two column's containing the main content and aside, and the central column, leaving a small percentage to create a margin at both vertical edges of the page.

I also have a line of CSS to make the images in the page fluid. The image tags themselves do not have any width or height attributes, and the image files are the same width as the column that they are in. With the following line of CSS, they will become fluid and fit to the column.

.col-a article img
{
 width: 100%;
}

Devices with screen widths smaller than 940 pixels wide include the iPad tablet and HTC Desire mobile phone in portrait orientation, among many older desktop monitors and laptops.

The second query creates a single column layout. The aside at the right of the page is moved to below the main content and the header is realigned so that the logo and main navigation are on top of each other and both centrally aligned. The styles from the previous media query mentioned are also still applied, so no need to re-declare styles.

Devices with screen widths smaller than 480 pixels include the iPhone (lower than generation 4) in portrait orientation and the Blackberry Curve in the standard landscape mode.

I wish I could say that was all you had to do, but there are a few more things we must apply before our responsive site works as we want it to for as many devices as possible. Firstly, you must add a few lines of meta data to each page in the head of the document.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width here" />

The viewport meta data tells mobile browsers that the width of the document should be the same width as the device's screen. Without this present, a device may use the width of a title or image as the maximum width, meaning a user would have to scroll horizontally.

The MobileOptimized is only used by some IE browsers, and stops the browser attempting to fit the layout of your site to the screen itself. You must specify a width for this. I chose 320 pixels, as it is a good baseline for most mobile sites. The HandheldFriendly meta data does a similar job a range of other mobile browsers.

Poly-fill for Internet Explorer

CSS3 is not implemented in IE older than version 9, but there is a great JavaScript poly-fill available on Google code that will parse your CSS and apply media queries to your site, even in IE. It works well, but has the disadvantage that your CSS is downloaded twice for anyone using IE to view your site, adding to your server load. You may to choose not to support older IE versions, as again the worst case scenario is that users will see the non-responsive desktop site.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Why You Shouldn't Just Design for the iPhone

As a final point about design, I would suggest not to design for just one device. Apple's iPhone is a great way to browse the web, but the strength of media queries is that they are "device agnostic" - they respond to the device's screen size, rather than the device itself. You should test your design, and decide for which widths you should alter the layout, considering elements of your design such as line length, floats and accessibility of content.

Looking at the analytics for my site, I have had hits from devices based on the mobile operating systems of Android, iOS and SymbianOS in the last month. The mobile web is a real consideration for my site, and this trend is set to continue. Media queries are a great device for creating flexible and responsive web page layouts, and with the tips in the tutorial you should have mobile appropriate content in no time.

Comment & share »