Hi-Performance Web Design with Data URIs – New on Premium
plus

Hi-Performance Web Design with Data URIs – New on Premium

on Oct 25th 2012 with 6 comments
Tutorial Details
  • Estimated completion time: 1 hr
  • Difficulty: Intermediate
  • Topic: HTML/CSS
Demo View It Online

In today’s Premium tutorial, we’re going to be taking some of the theory covered in our Data URI introductory article, building upon some of the examples used to develop a fully realized user interface. Just to keep things interesting, we’ll also be making our design responsive and we’ll be using the Dribbble API and jQuery to pull in some images from the Envato Dribbble feed.


Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

Quick Preview

Check out the demo – what’s the most noteworthy thing about it? That’s right, it’s lightening fast. Follow this Premium tutorial and learn how to incorporate a whole host of performance enhancing techniques in your own web design!

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

  • Pingback: Hi-Performance Web Design with Data URIs – New on Premium … | inLine Media RSS Blog

  • Zaethrael

    Data URIs is not working on Windows Mobile 7. But like concept very much. I am waiting to see full vector website with decent responsive approach

  • rick l

    the site loaded fast bit the images poped in after 5 seconds.
    i dont know if this is supposed to happen, if it said “lighting fast” in the intro

    • Ian

      Yeah I think the demo is not quite showing the benefit. I get the same behavior. Page loads fast without the images and then the images appear in random order as the uri loads. I guess it would be easier to see the difference doing a side by side comparison with exact same images and html, one with uri and one without.

  • http://www.facebook.com/auct.uz.ua Дмитро Тарас

    dat images loaded via jquery dribble or watever so itsn’t about them
    article about using dataurl for small images and use css to generate gradients, lines (like in header). correct me if im wrong

    I loved that u didnt use some frameworks whole – i dont like to have site with average page 20kb weight use 100kb css framework.

  • Arlene Aranzamendez

    Very nice tutorial Chris! I’ve learned a lot! :-) aranzamendezdesign.com/

  • http://www.eyeuniversal.com/ Rajesh Kanjani

    I heard from lots of friends that tutorials of the tutsplus are good and helps in creating a responsive Design. SEO friendly designs are growing day by day. Are these tutorials help us in making a seo friendly website??

  • Pingback: Website Design