Normally, I would ask questions/opinions from people through Twitter. But sometimes, you really need more space for the question/opinion than 140 characters. That's why I wanted to try a new concept on Marcofolio, called Your two cents. I'll lay down two statements (one cent each), and you're free to share your opinion with the world. Of course, I'll share my opinion too.

Keep in mind these are just opinions from me (and hopefully others in the comments) and not facts. If this concept gets loads of response, I'll continue thinking about other statements.

Here are the two statements on which I'm very curious about what you think about them:

“Animation properties, as added in CSS3, don't belong there.”

Webkit based browsers (Safari and Chrome) support CSS animation (transition and animation). It allows the designer to animate an element across a given timespan.

“Lazyloading images should be implemented on every website.”

Lazy loading delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

So, what do you think about these two statements? Join the discussion!

My two cents

Animation properties, as added in CSS3, don't belong there.

I have to agree, using the transition CSS property, you can create pretty neat things. But, just like some others, I don't think it should be a CSS standard.

Let's break it down into the two pieces: transition and animation. Simply they mean the following: CSS Transitions are easy to use, while CSS Animations are made for programmers.

Behaviour

There always was a nice split between four different things:

• Database for Content
• HTML for Describing and Displaying content
• CSS for Design
• JavaScript for Functionality and Behavior

I personally think the CSS animation properties are behavioral things - it tells an element what to do, not how it should look like. Currently, animations are the domain of JavaScript and I think it should stay there.

Complexity

Check out the following CSS animation examples in order to make a transition and an animation.

 
selector {
   transition-property: margin-left, border-color, width, height;
   transition-duration: 0.5s;
   transition-timing-function: ease-out;
}

As you can see, the transition property selects which CSS properties should animate, how long it would take and which function to use. As you can imagine, this kind of CSS can make your code pretty complex. You'll need to think in your design stage on what will happen when an animation starts (which you can't stop BTW). And a timer element (duration) in CSS?

If you think the transition could be complex, check out the animation example:

 
selector:hover {
  animation: 'wobble' 2s;
}
@keyframes 'wobble' {
  0 {
    margin-left: 0;
  }
  40% {
    margin-left: 15px;
  }
  60% {
    margin-left: 75px;
  }
  100% {
      margin-left: 100px;
   }
}

This looks more like JavaScript than CSS to me. As you can see, you declare some sort of function call ('wobble') within your CSS. Although I like the idea of variables within CSS, but function... Not really.

"Lazyloading" images should be implemented on every website.

At first, lazyloading looks great: it only gets the image from the server at the time the user actually needs it. This will probably save your server loads of bandwidth, especially when you have long pages with loads of images (which not all people will view).

But only after seeing blogs like Francesco Mugnai and PSDTUTS+ having implemented the feature, it really started to annoy me a little bit.

Bad user experience

The solution could be very good for your server, but you'll remove some of the user experience. I normally would load a page (on a different tab), wait until it's fully (mostly) loaded and than start scrolling to view if I see something interesting. With the lazy image loading, I need to stop scrolling every time an image will appear. This makes multi-tasking pretty hard.

Another downside is, when using this technique, when you don't set the width and height properties of your image. When you scroll down really fast (for example, when you directly go to the comments section), the page would start loading all the images. Once you get to the comments section, it jumps down since another image has been loaded. This process will repeat itself until all images are loaded, which can be pretty frustrating and time-consuming.

What are your two cents? Tell us what you think!

Interested in this topic? You might enjoy another article I've written called

• Pure CSS3 bokeh effect with some jQuery help
• New CSS3 properties added to Firefox 3.6
• CSS3 animations and their jQuery equivalents
• Sweet tabbed navigation using CSS3
• jQuery DJ Hero - CSS3 and jQuery fun

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Angie Bowen   2009-12-02 02:25:55 I don't know enough about the animation property to comment but I will say that I hate lazyloading. Like you, I like to do other things while I'm waiting on a page to load. With lazyloading it takes twice as long to look through most pages, especially inspiration posts. So I'm really hoping it doesn't catch on. Reply | Quote

Gaya   2009-12-02 09:45:31 I strongly believe animations do not belong in the CSS! I'd fight this because I am really really sure it will never work in multiple browsers, at least not as we expect. I mean: markup is already done badly, what to expect from CSS animations? On top of that: CSS is for markup, not animation. I also hate lazy loading, basically there are almost only benefits for the hosting guy. The thing I hate about lazy loading is that if it is a tutorial with a lot of images, I have to wait every time I scroll a bit (which I hate!) Reply | Quote

Janko   2009-12-02 10:28:14 I agree with you on both statements and wouldn't have anything to add. Lazy loading is often annoying only. Reply | Quote

Umut Muhaddisoglu   2009-12-02 12:06:23 Lazy loading is only useful when there are lots of images and their sizes are small (maybe smaller than 10kb). This way the website loads fast and images appear almost before they are in the viewpoint while scrolling as they load fast enough. All other cases look like a pain. I don't have a solid thought on CSS animations and they are mostly superficial as I don't know the theory behind adding animations to CSS3. When thinking traditionally, from what we used, animations have no place in CSS. On the other hand, CSS3/HTML 5 is bringing too many new features. And, today, we sometimes need to use JavaScript for styling (for animations, etc.). Everything is so mixed into each other. This part of me says, why not . Reply | Quote

Martin   2009-12-02 15:09:09 I believe a better application of lazy-loading is when the developer differentiates between primary and secondary content. For example, making the secondary sidebar goodies wait until the main column has fully loaded, before it is loaded via AJAX. Of course there are some pitfalls there - anything navigational has got to load immediately, and not all of your users will define primary/secondary the same way as you. Sometimes the motivation for visiting a page is simply to find a link which may be the most insignificant content on the site. But I think many sites could shave 20% off their initial loading time by designating some of their non-essential content and images to be fetched by a secondary AJAX request. In particular advertising. Nobody clicks on an advert within the first 5 seconds of loading a page, so why not delay their entrance a little? I have only seen one or two sites doing true lazy-loading, but I do think it has a place in the future of the web. Reply | Quote

Alex Flueras - New Media Designer   2009-12-02 17:25:25 I am using LazyLoad on one of my portfolio sites and I am pleased with the results. The page has large images and it would take too long to wait for it to load. I think this is a convenient solution for one page portfolios if you are interested enough to scroll through it. You can see it here: http://www.studioweber.com Reply | Quote

John Campbell - I agree   2009-12-02 20:47:02 I came here specifically to see what you had to say about LazyLoading. I am glad that I am not alone. I agree with you on both accounts. I do wonder if there is a better alternative to LazyLoading though. Something that might actually improve the user experience. Reply | Quote

Robin - Agree / disagree.   2009-12-03 00:42:46 I both agree and disagree. In that order. On the main statements, not your opinions ;-) CSS is a styling language so it's not appropiate to put some markup / effects in there. The only effects that belong in CSS I can think of are drop shadow's and text rotating stuff (not in an animation, just for some preset angle). The lazyloading can be really annoying so this shoudn't be implemented in all sites. It's just like AJAX technology: don't overkill and put it in every project. Just use the technology where it belongs. I personally hate the "lazy loading" of the thumbnails in Finder on my Mac. I have a 2,4 Core 2 Duo processor and 4GB of memory and still Finder won't load all the thumbnails at once, only the ones in my viewport at that moment. Reply | Quote

Marco - Thanks!   2009-12-03 10:44:53 Wow - thanks everyone for taking the time to come up with those great opinions! It's pretty interesting to see what others are thinking about certain statements. @John Preloading improves the UX (it's the opposite of Lazy Loading), but it might be a waste of bandwith (since images are loaded from other pages that might not be viewed by the user). @Robin Ah yeah - the Mac does the same, totally forgot that! You're absolutely right that it's annoying too - especially when looking in an icon folder with 1000+ icons. I want to view them really fast, but that is pretty impossible with lazy loading. We'll see where the future us brings! Reply | Quote

Josh   2009-12-04 04:37:37 I actually disagree with you on the CSS animation properties. At first I had the same opinion as you, but I think this is just the natural evolution of things on the web. As the internet becomes more advanced the languages need to become more advanced too. This is like HTML5's canvas or video support. Reply | Quote

Molly   2009-12-12 05:01:15 Usually I'll print out tutorials on websites, using lazy loading on web pages costs me a lot of time to scroll down every page I'm about to print! Reply | Quote

Anonymous   2009-12-28 10:13:10 UGG Bailey Button Winter Boots Bailey Button Fancy Logo uggs UGG Chestnut Fancy Logo Bailey Button Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.