Lee Munroe » css3

Experimenting with responsive web design

Lee — Wed, 13 Apr 2011 09:08:07 +0000

More and more businesses, web apps and designers are offering up multiple versions of their websites depending on the device and resolution the user is using. Last week I did a bit of tweaking to my own website and one of the things I wanted to look at was responsive design.

I simply wanted to offer an iPhone version of the website so iPhone users would see an iPhone friendly view of the website and blog articles, but using the same HTML/CSS and content (i.e. not serving up a separate mobile website).

It’s surprisingly simple.

What is responsive design?

Responsive design allows you to fill in the blanks within devices classes through the application of fluid grids, flexible images, and (where possible) media queries.

— Luke Wroblewski

As Luke outlines above, it’s about using up the space that is available, on the device the user is using, most effectively.

So a user using an iPad may be served a different view of the website as to that of a user using an iPhone (or desktop, or netbook or some super duper Nasa sized resolution).

Using CSS media queries

With a CSS media query we can target different screen resolutions with different styles.

Place this in your CSS stylesheet:

@media only screen and (max-width: 480px) {
	/* Mobile styles go here */
	body{width:100%;}
	img{max-width:100%;}
}

The styles above are just examples. Remember to enter your own CSS.

Then place this in your HTML header to ensure the iPhone doesn’t automatically scale down the full page:

Simples.

Things I changed for iPhone/smartphone view:

Max-width of the overall container
Made the grid 1 column
Adjusted the font size for headings
Adjusted navigation positioning
Gave images a max-width
Hid a couple of things that weren’t important

And the result:

Examples of responsive designs in use

Build

Simon Collison

Lanyrd

UX London

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.
Web design is responsive design, Responsive Web Design is web design, done right.

— Andy Clarke

Have you made any of your sites responsive?

Let us know below so we can check them out.

Are you an HTML5 web designer?

Lee — Tue, 29 Mar 2011 09:01:10 +0000

HTML5 is quite the buzzword at the minute. A lot of designers and front-end developers will now say “I use HTML5 and CSS3″ rather than just good olde “HTML and CSS” (I’m one of them, depending on the context).

At some point the HTML5 fad will die and we’ll go back to saying HTML (did you ever say you used HTML 4.01?) but until then we’ll throw the HTML5 buzz word around a bit more.

But what does it actually mean to say you use HTML5?

I see HTML5 being broken down into 5 different levels.

1. Doctype

Technically if you use an HTML5 doctype declaration, you’re using HTML5.

Along with your doctype you can tidy up the rest of your head like so.

...

This is simple stuff, and you usually have this saved in some sort of template.

2. Forms

The next level of HTML5 is adding some niceness to forms.

Validation, place holders, calendars, input types can all be declared with HTML5 and in most cases all that is needed is dropping in an extra attribute to your already existent XHTML forms.

3. Layout and elements

We get a bit more advanced now with layout. HTML5 has introduced several new block elements for marking up your layout including header, footer, article, aside, section, figure.


Heading goes here



Something in here


Something else in here



Something to accompany your article here


Copyright 2011

For these new block elements to work across all browsers, make sure you declare them as block level elements and use the HTML shiv script for IE compatibility.

Include this in your head:

And this in your stylesheet:

header,footer,nav,article,aside,section,figure,figcaption,hgroup,audio,video{
display:block;
}

4. Video and audio

There’s a good chance most of you have looked at levels 1 to 3 as most projects require markup, layouts and forms but not all require video and audio.

No longer do you need to embed video and audio into Flash. They now have their own elements and controls you can customise in HTML5.

5. Advanced features and Javascript

I’ve called level 5 advanced features as we’re now diving into Javascript.

Most of the blog articles and books I’ve read on HTML5 cover the 4 levels above but brush over these advanced features, most likely because they deserve full books dedicated to the topic and are more developer than designer related.

These features include:

Canvas
Local/offline storage
Geolocation

How much HTML5 are you using?

To date I’ve only been using levels 1 to 3 myself. I’ve yet to have an excuse or reason to delve any further.

Are you using HTML5? Have you looked at any of the advanced HTML5 features mentioned above?

A quick intro into CSS3 gradients

Lee — Thu, 28 Oct 2010 09:01:01 +0000

CSS3 gradients are available to use in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. They’re not exactly new but I only recently started using them consistently myself so I’ve put together this quick article.

FYI this isn’t the holy grail of CSS3 gradients, it’s more of a reminder for me or quick getting started guide.

Why use CSS3 gradients instead of images?

Gives you more flexibility
Less hassle
Fewer http requests
Scalable

The syntax

W3C

linear-gradient( [ || ,]? ,  [, ]* )

radial-gradient( [ || ,]? [ || ,]? , [, ]* )

Mozilla (Firefox)

Same as W3C (but with -moz-)

-moz-linear-gradient( [ || ,]? ,  [, ]* )

-moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* )

WebKit (Safari, Chrome)

Bit different.

-webkit-gradient(,  [, ]?,  [, ]? [, ]*)

Confused yet? Instead of trying to explain what everything means I’m just going to show you some very simple examples.

CSS3 gradient examples

Linear background gradient

html{
  height:100%;
}
body{
  background-color:#440951;
  background-image: -moz-linear-gradient(top, #b032cb, #440951);
  background-image: -webkit-gradient(linear, left top,left bottom, from(#b032cb), to(#440951));
  background-image: linear-gradient(top, #b032cb, #440951);
}

Demo

Radial background gradient

html{
  height:100%;
}
body{
  background-color:#440951;
  background-image: -moz-radial-gradient(center 45deg,circle cover, #b032cb, #440951);
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#b032cb), to(#440951));
  background-image: radial-gradient(center 45deg,circle cover, #b032cb, #440951);
}

Demo

Body background height problem

Seems that gradients don’t stretch the whole height of the browser window unless you declare the html height. Therefore this is needed:

html{height:100%}

But it doesn’t work in Internet Explorer!

That’s why we have a fall back value in for the background-color which should be enough although you can always use an image if you like.

Have you started using CSS3 gradients yet?

Start Experimenting With CSS3 Keyframe Animations

Lee — Wed, 28 Jul 2010 10:01:40 +0000

You can now produce stunning animations with CSS3. Did you know that? Of course you did.

CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them.

For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.

It was only recently I experimented myself so I thought I’d share a beginner’s demo with you.

How to do CSS3 keyframe animations

Keyframe animations involve you setting the object state (or property) at different stages of an animation.

Setup the environment

Let’s setup a little demo. I’m going to start with two basic boxes.

Now apply some basic styling so we can see them.

.box1{
width:200px;
height:200px;
background:rgba(255,0,0,0.5);
position:absolute;
top:100px;
left:50%;
margin-left:-100px;
}

.box2{
width:200px;
height:200px;
background:rgba(0,0,255,0.5);
position:absolute;
top:100px;
left:90%;
margin-left:-100px;
}

And you’ve got yourself two boxes.

View demo.

Setup the animation affect

Setup the animation affect and call it ‘movingbox’.

@-webkit-keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}

movingbox is the name we’re giving the animation. It’s up to you what you want to call it.

The keyframes we’ve setup for this animation are at 0% (start), 50% (halfway through) and 100% (end). The properties we’ve set at these keyframes are different positions. You can set any properties you like here.

So far we still have two static boxes.

View demo.

Apply the keyframe animation

Our last step applies the magic to the object of our choosing. We’re going to apply it to ‘box2′.

.box2{
-webkit-animation:movingbox 5s infinite;
}

movingbox calls the animation we want to use, which we have already defined.

5s states we want the animation movement to last 5 seconds.

infinite means the animation will keep going and going.

We now have a CSS3 animation – box2 should be moving from right to left and back again. (Note: remember this only works in Safari and Chrome).

View demo.

More CSS3 animation properties

This is a very simple example I have used here, and is just to help beginners get started.

For the -webkit-animation property, there are a number of other values you can try:

-webkit-animation-name: [any name you like];
-webkit-animation-iteration-count: [number, infinite];
-webkit-animation-timing-function: [linear, ease,ease-in, ease-out];
-webkit-animation-duration: [time];
-webkit-animation-delay: [time];

For the @-webkit-keyframes rule, instead of using percentage as keyframes, we can also declare a from and to state. You can also make it transform while animating.

@-webkit-keyframes movingbox{
from{left:90%;-webkit-transform: rotate(0deg);}
to{left:10%;-webkit-transform: rotate(360deg);}
}

View demo.

CSS3 animations in action

See if you can spot the @keyframe animations on these sites (note: you’ll need to use a webkit browser like Safari or Chrome to see the animations in action).

Our Solar System

Our Solar System using pure CSS3 for planets and orbits.

Future Of Web Design

404 pages are always a nice place to experiment with stuff that only us geeks will get.

Hard Boiled Web Design

If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.

Massive Blue

Sam Brown’s portfolio animation is subtle but beautifully executed.

Ecliptic

This was my experiment, a hidden ‘Easter egg’ on the Ecliptic website.

Conclusion

In regards to usefulness, the CSS3 animations above aren’t that. But they do let you, the designer, experiment with the latest techniques available.

Make a point of working a CSS3 animation into your next project just so you can get a feel for how they work. Then in the near future, when more browsers adopt them, you’ll be able to make some really attractive user interfaces without a gif or Javascript effect in sight.

Have you experimented with CSS3 animations yet?

Book Review: Handcrafted CSS

Lee — Tue, 02 Feb 2010 09:02:19 +0000

Handcrafted CSS is by one of the web design industries’ most established authors, Dan Cederholm. He is the man behind Bulletproof Web Design, Web Standards Solutions, Simple Bits and most recently Dribbble.

Dan is well known for his clean markup, embracing advanced CSS and his love of ampersands so I was really looking forward to this book.

Handcrafted CSS is for the CSS designer who wants to go the extra mile.

Who is it for?

This book would be more for intermediate/advanced designers, which is great as there are so many ‘beginner’ books out there it was nice to read a book that just got stuck in.

It’s for designers who care about the little things – the clean markup, the grid, the 1 pixels and the ampersands.

What’s in it?

Simple tricks for dealing with everyday CSS obstacles
Bulletproof CSS3 techniques
The fluid grid
Floats (and clearing them)
Frameworks (and crafting your own)
Small details that can make a great design
Stuff about ampersands

Verdict

I really enjoyed this book. I was able to learn from it, advance current techniques and be inspired by it.

It’s easy to relate to everything outlined in the book. Some things were a reminder while others I had never thought of before. Truly inspired to go away and start crafting something special.

Not only is the content good, even how the book is laid out is gorgeous with well spaced pages, nice formatting and an embossed front cover.

Highly recommended.

Pull quotes

…the larger the target, the quicker and easier it is to get there.

but the important thing to remember here is that this method degrades beautifully…The design is intact. It’s functional and readable.

…the rounded corners in Mozilla- and WebKit- based browsers are visual rewards rather than necessary requirements.

The problem with the fixed-width approach to interface design is that it’s asking the user to adapt to the design rather than the reverse.

How To Design A Sexy Button Using CSS

Lee — Tue, 26 Jan 2010 09:02:24 +0000

Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).

Here is the holding page in all it’s glory.

One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.

Advantages of using CSS instead of a graphic:

Optimisation – less file size, less http requests
Reusable – button can be used over and over again for different actions
Flexible – the button can stretch or compact depending on length of the text

Styling the button element

I’m going to be using Firefox 3.6 for the previews below.

The markup

This is how the default button looks.

Basic styling

First apply some basic styling to get started.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
}

Nothing strange or startling about these styles. This is what we have now.

Background

Let’s add a background. Remember, we want to make the button reusable for any colour.

Go into Photoshop and create a new image 10px x 100px
Create a white rectangular shape that covers the top half of the canvas on a new layer
Give that layer 30% opacity and make the background transparent
Save that image as overlay.png

Decide what background colour you want to use and apply it to the button along with the overlay you just made.

background:url(overlay.png) repeat-x center #ffcc00;

This gives us a nice yellow background with a glossy overlay.

Border

Now get rid of that horrible outset border. Let’s give it a fine border that matches the background colour.

border:1px solid #ffcc00;

Rounded corners

Make your button a bit friendlier by giving it rounded corners. This is where Webkit and Mozilla browser users will take advantage, while IE browsers will be stuck with sharp corners.

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

Starting to look good eh? But a good designer likes to pay attention to detail.

Pixel perfection

Now finish off the button with some pixel perfect embossing. We’re going to give it a 1 pixel border and a 1 pixel inset shadow.

border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

Notice how we’re using RGBA colours here. This allows us to apply alpha opacity to the colour. In this case, we’re giving white a 50% opacity.

Make it clickable

We know it’s a button and that it can be clicked but users might not. Change the cursor to a pointer so users know they can click it.

cursor:pointer;

Hover state

We now have a pretty sexy looking button. But what about a hover state?

To save us from thinking about a colour for the hover state, we can use the RGBA approach. Let’s revisit the background style. Add this after your background declaration.

background-color:rgba(255,204,0,1);

Nothing changes. All we did was change it to the same colour but using RGBA.

But how for the button’s hover state, give it the same background colour but alter the opacity slightly.

button:hover{background-color:rgba(255,204,0,0.8);}

This gives us a slightly different shade of background on hover, giving the user some feedback so they know they’ve hovered over a clickable button.

Put it all together

The final code.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(images/splash/button.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}

I’ve slipped in an active state as well for the button so the user knows when they’ve clicked it.

This is how it looks in Firefox:

And this is an active preview.

Remember the button is reusable so if you apply a class to the button, e.g. class=”save”, you can apply a different colour to this button.

button.save{
background-color:#a7dd32;background-color:rgba(167,221,50,1);
border-color:#a7dd32;
}

button.save:hover{
background-color:rgba(167,221,50,0.8);
}

And you’d get something like this.

But what about Internet Explorer?

Yes, unfortunately IE users won’t get the full benefits of the sexy button. However, it doesn’t look that bad and to IE users it will seem like there is nothing wrong.

And IE6? It doesn’t support PNG transparency so you can remove the overlay background image with an IE6 conditional stylesheet.

Then in ie.css:

button{background-image:none !important;}

And there you have it. A beautifully designed button using (pretty much) only CSS.

Internet Explorer Users Don’t Care About Rounded Corners

Lee — Mon, 19 Oct 2009 14:30:39 +0000

Internet Explorer users don’t care about rounded corners. Bold statement? Perhaps. But recently I’ve taken this approach to a few designs as I’m tired of having to use some sort of rounded corner hack to support IE. It’s a lot easier to just use the CSS 3 declaration.

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

Lee Munroe » css3

Experimenting with responsive web design

What is responsive design?

Using CSS media queries

Examples of responsive designs in use

Have you made any of your sites responsive?

Further reading

Are you an HTML5 web designer?

1. Doctype

2. Forms

3. Layout and elements

Something in here

Something else in here

4. Video and audio

5. Advanced features and Javascript

How much HTML5 are you using?

Further reading

A quick intro into CSS3 gradients

Why use CSS3 gradients instead of images?

The syntax

W3C

Mozilla (Firefox)

WebKit (Safari, Chrome)

CSS3 gradient examples

Linear background gradient

Radial background gradient

Body background height problem

But it doesn’t work in Internet Explorer!

Further reading on CSS3 gradients

Start Experimenting With CSS3 Keyframe Animations

How to do CSS3 keyframe animations

Setup the environment

Setup the animation affect

Apply the keyframe animation

More CSS3 animation properties

CSS3 animations in action

Conclusion

Further reading

Book Review: Handcrafted CSS

Who is it for?

What’s in it?

Verdict

Pull quotes

How To Design A Sexy Button Using CSS

Styling the button element

The markup

Basic styling

Background

Border

Rounded corners

Pixel perfection

Make it clickable

Hover state

Put it all together

But what about Internet Explorer?

Further reading

Internet Explorer Users Don’t Care About Rounded Corners

CSS 3 rounded corners

CSS 3 text shadow

CSS 3 box shadow

But how do you deal with clients?

Conclusion