Posts Tagged ‘CSS3’

Responsive download, not just responsive design

Published by | Monday, November 19th, 2012

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

 

Interested in more?
• All web design courses on lynda.com
• All courses from Chris Converse on lynda.com

Suggested courses to watch next:
• CSS: Core Concepts
 CSS3 First Look
 HTML Essential Training

 

Exploring browser animation options: Part one, CSS3

Published by | Saturday, September 8th, 2012

There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.

CSS3 Animations

First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.

Demo

CSS3 Animation Example

Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome.
. If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.

Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.

<img id="startspin" src="http://i.imgur.com/n3Uvf.png" />

Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-360deg) scale(1.5);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotate(30deg) scale(.8);
    }
}

We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.

Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.

Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.

.startspin {
        -webkit-animation: spin 2000ms ease-in-out;
}

This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.

The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.

Another example

CSS3 Animation Example

In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.

Limited primitives

Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.

Vendor prefixes

One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.

-webkit-transform: rotate(30deg);  /* Safari 3.1+, Chrome 
-moz-transform: rotate(30deg);  /* Firefox 3.5-15 
-ms-transform: rotate(30deg);  /* IE9+ 
-o-transform: rotate(30deg);  /* Opera 10.5-12.00 
transform: rotate(30deg);  /* Firefox 16+, Opera 12.50+

And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:

@-webkit-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-moz-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-o-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}

To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.

Progressive Degradation & Compatibility

Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.

Here’s a compatibility table from Can I Use:

If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.

CSS pre-processors part two: Mixins and nesting

Published by | Monday, August 27th, 2012

In my last article, An Introduction to LESS and Sass pre-processed CSS languages, I wrote about using variables with CSS pre-processors. Having the ability to use variables will save you enough time to justify learning pre-processors, but there are two other features in Sass and LESS that will save you even more time: nesting and mixins.

Sass versus LESS

Pre-processors allow you to code in a language that’s similar to CSS, but with additional features. Most people are on the fence about adding them to their repertoire because there are two competing high-profile standards: LESS and Sass.

I remember having a similar problem a few years ago trying to decide between jQuery mobile and other JavaScript libraries. Sass and LESS are so similar that it almost doesn’t really matter which one you learn. Switching in between them is pretty easy, so ultimately it’s learning about the concepts that matters. Yes, there are some features specific to each language like guarded mixins in LESS and conditionals in Sass, but I imagine that as the languages develop further, they will each keep up with the other.

Pick one

The important thing is what you plan to do with the languages. If you’re planning to use a framework like BootStrap, from Twitter, then it’s a good idea to go with LESS because Boostrap was written with LESS. If you want a nearly identical framework that uses Sass, check out Foundation. Although Sass requires you to install Ruby, you’ll want to use something like CodeKit to manage your pre-processors.

My advice: Pick one framework and get good with it.

Before we start coding, keep in mind that when I’m talking about Sass, I’m speaking of the newer version with an .scss extension. It’s easier to learn for CSS users because it lets you use CSS syntax and style you may already know.

Nesting

Besides variables, another awesome thing you can do with pre-processors is nesting. Let’s say you’ve developed a simple horizontal nav bar for your site.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Info</a></li>
</ul>

Here’s a typical way to write CSS to make this into a nav bar:

ul {
margin: 0;
padding: 0;
font: bold 1em/1.2em Helvetica, Arial;
}
ul li {
list-style: none;
}
ul li a {
float: left;
background: #BA0436;
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
ul li a:hover {
background: #EEC25C;
color: black;
}

A simple nav bar written with CSS

As your CSS file gets bigger, the number of styles that are children of other styles increases. In either Sass or LESS, you can do the same thing, like this:

ul {
margin: 0;
padding: 0;
font: bold 1em/1.2em Helvetica, Arial;
li {
list-style: none;
a {
float: left;
background: #BA0436;
text-decoration: none;
color: white;
display: block;
padding: 10px;
&:hover {
background: #EEC25C;
color: black;
}
}
}
}

This way, the li selector is written inside the ul selector and the a selector is inside the li selector as if they were another rule. Notice that because we are using a pseudo-class, I have to add the ampersand (&) before the :hover selector.

Nesting doesn’t necessarily save you a ton of time, but it makes your code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong: nesting helps you keep everything tidy.

Both Sass and LESS implement mixins the same way, so there’s no need to show you the difference between the two.

Mixins

If you liked variables, you’re going to love mixins. They are snippets of code you can reuse over and over in your CSS. You can use them with variables to make coding in CSS easier. Let’s take a look at how you would code a simple top-to-bottom gradient using regular CSS.

.mybox {
  background-color: #333745;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DAEDE2),
to(#77C4D3));
  background-image: -webkit-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -moz-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -o-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: linear-gradient(to bottom, #DAEDE2, #77C4D3);
}

To make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Google Chrome, Firefox and Opera. It almost makes you want to stop doing gradients in your CSS. We can use variables to simplify this. Let’s try that with a Sass example.

First, we’ll create two variables for the colors somewhere in our .scss file:

$from: #333745;
$to: #77C4D3;

Once we have that, we can modify our gradient to use the variables:

$from: #333745;
$to: #77C4D3;
.mybox {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

Modifying the gradients to use variables works great and it will save you a lot of time. But what if you wanted to reuse this for other declarations? That’s where mixins come in. You can create snippets of code and reuse them. Let’s create a mixin for linear gradients using the code above as a base.

$from: #333745;
$to: #77C4D3;
@mixin lgradient {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

This makes working with gradients more manageable, but it will only work with one set of from/to colors. We can easily improve on this by putting these variables within our mixin. If you know JavaScript, this is like writing a function. Here’s the syntax in Sass.

@mixin lgradient($from: #333745, $to: #77C4D3) {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image:  linear-gradient(to bottom, $from, $to);
}

Now, when we want to use our gradient in our box, we can just type the following:

.mybox {
@include lgradient;
}

Adding this line of code will create the gradient with the default colors, but since they’re variables, you can create any top-to-bottom linear gradient and specify the colors in your .scss file.

.mybox {
@include lgradient(#FCC,#FEE);
}

Now you have an easier way to create gradients. Let’s check out the code in LESS:

.lgradient(@from, @to) {
background-color: @from;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from),
to(@to));
background-image: -webkit-linear-gradient(top, @from, @to);
background-image: -moz-linear-gradient(top, @from, @to);
background-image: -o-linear-gradient(top, @from, @to);
background-image: linear-gradient(to bottom, @from, @to);
}
.mybox {
 .lgradient(#CCC,#DDD);
}

Pretty similar, except that the dollar signs ($) are replaced by @ symbols and there is no mixin keyword. You can see how pre-processors will help you write CSS more efficiently. If you haven’t already taken the plunge, what are you waiting for?


Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
• CSS: Core Concepts
 CSS Fundamentals
 CSS3 First Look
 Managing CSS in Dreamweaver

Can you use CSS3 now?

Published by | Wednesday, November 17th, 2010

Chances are, if you are a web designer or developer, you’ve at least heard of CSS3. If you haven’t had the time to dive into the modules yourself, you’re no doubt wondering if it’s ready to use now. Well, the short answer is yes, it is! There is, of course, more to it than that. As with any emerging technology, you need to develop a strategy for deploying CSS3 on your sites that accounts for either inconsistent or non-existent support between browsers or devices.

By now, you’ve probably come to terms with the fact that web sites don’t look exactly the same across different devices and browsers. If you’ve been designing sites for a while, you probably already have a strategy in place for dealing with browser inconsistencies. In most cases, your existing workflow for dealing with these will work just fine when adding CSS3 to your sites.  However, there are some specific considerations you need to be aware of when dealing with CSS3, so let’s take a moment to discuss strategies for introducing CSS3 into your sites.

First, make sure that using CSS3 makes sense for your site. Occasionally we get so caught up in using the latest features and technology that we lose sight of the needs of our users. Before using any of the new capabilities of CSS3 make sure that using them actually enhances your design.

Once you’ve settled on using CSS3, it’s best to approach it as a means of enhancing the design of your site, rather than driving it. Make sure you have a solid layout and design without relying on CSS3 techniques to make it work. Then gradually enhance your design with CSS3 to present a much more robust experience to those using supporting devices.  This will allow you to present functional designs to your users regardless of the device they are using. This approach, called progressive enhancement, is a common way of dealing with device inconsistencies for both styling and behavior, and is a great foundation for any CSS3 deployment strategy. It’s worth mentioning here as well that if you are providing fallback content for non-supported devices, make sure the absence of CSS3 features doesn’t harm your design. Features like multiple backgrounds, transparency, and drop shadows can cause content to either look odd when absent or cause readability issues with your text. In those cases, make sure that alternate styles are presented that ensure the clarity of your content.

In learning about CSS3, you are bound to come across many solutions for enforcing or adding support for CSS3 features in older browsers. While there are some great solutions out there, keep in mind that many of theses workarounds are time consuming, result in larger and slower pages, and can cause rendering errors if not executed properly. Make sure that the extra effort is worth it. In many cases, simply providing those users with a more basic, functional site is the better solution.

Any current discussion on utilizing CSS3 would be incomplete without dealing with Internet Explorer. While Firefox, Opera, Safari, and Chrome have all been gradually adding support for CSS3 to their browsers, the same is not true for Internet Explorer. Until version 9 is released, many of the new features in CSS3 will not work in Internet Explorer at all. That alone is enough for some designers to ignore CSS3, and frankly, that’s a shame. One browser’s shortcomings should not prevent you from enhancing the design of your sites.

When dealing with Internet Explorer, you have a few choices in how to progressively enhance your designs. First, you can simply write CSS 2.1 base styling and let it ignore the selectors or properties it doesn’t support. For more complex designs, or for cases where the lack of CSS3 styling would cause rendering issues, you could pass alternate style sheets to Internet Explorer through the use of conditional comments. Conditional comments are a widely used technique for addressing the specific styling needs of Explorer, and are a great way of overwriting unsupported CSS3 styling.

Another way to use CSS3 with Internet Explorer is to use the Progressive Internet Explorer or CSS3 PIE library. PIE is a small javascript library that adds limited CSS3 support to older versions of Internet Explorer. It’s free, easy to use, lightweight, and gives you a way to use CSS3 features such as border-radius, box-shadow, and gradients through a single line of code.

I also recommend taking a look at using Modernizr. Modernizr is free, small javascript library that provides detection support for a wide range of next generation web capabilities. Not surprisingly, CSS3 is among them. Although Modernizr won’t add capabilities to non-supporting browsers, it does make it much easier to provide fallback content to these browsers and devices. What’s more, it adds detection capabilities for HTML5 as well, making it a smart choice for anyone wanting to start working in HTML5 and CSS3.

CSS3 gives designers an exciting set of new and enhanced features to use when styling page content. However, it’s evolving nature and inconsistent support requires you to have a solid strategy for using it. Be sure to carefully plan which features you want to use, and how you are going to account for this styling in unsupported devices. Having such a strategy in place will allow you to enhance your user experience in modern browsers while still providing solid functionality to older browsers and devices. Keep an eye out for our upcoming CSS3 course to learn more about these techniques, and many of the new features and capabilities in CSS3. In the meantime, the accompanying video from my HTML5 First Look course gives a good basic overview of CSS3.