Lazy loading is a common software design pattern that defers the initialization of objects until they are needed. Lazy loading images started to become popular on the web back in 2007, when Mika Tuupola drew inspiration from the YUI ImageLoader utility and released a jQuery plugin. Since then, it’s become a popular technique to optimize page loading and the user experience. In this article I will discuss why we should and shouldn't use Lazy Load, and how to implement it.
Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times. The problem? Visitors are not patient at all. By lazy loading, images outside of the viewport are loaded only when they would be visible to the user, thus saving valuable data and time.
So you find yourself somewhere in a little tourist station in Northern Sweden — with a few adventurous tourists, 86 surprisingly happy inhabitants, and a remarkably good Internet connection. There is nothing but breathtaking nature around you, with blueish mountains and bright red skyline blurring endless horizon — and Northern Lights dancing in the sky right above you. What do you do? Obviously, you come up with an idea for those sneaky 'lil Smashing Mystery riddles.
In our previous riddles, we turned our little challenges into quests for creative solutions quickly. However, as we try to level up every new Mystery to keep it quite difficult to solve, with a new riddle this time we decided to turn it into an exercise of patience and stubbornness — beyond problem solving, of course.
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd.
This creativity mission has been going on for almost seven years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for February 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
After the untimely (and still kind of sad) demise of Fireworks, I found myself looking for other ways to design apps and websites. I also had the desire to produce something more interactive for when I talk about my work with stakeholders. It turned out that Sketch, when paired with some other neat tools, would be a big part of this workflow.
In this article, I’ll talk you through why you should prototype and how you can do it with Sketch and prototyping tools such as Flinto and InVision. You’ll also get a nicely documented freebie Sketch file to help you.
The “diffusion of innovations” theory of communications expert and rural sociologist Everett Rogers attempts to identify and explain the factors that lead to people and groups adopting innovations (new ideas and technologies). Design teams that account for both usability and how people adopt innovation stand a much greater chance of having users accept and use their products.
The diffusion of innovations is a complex process; design teams can use their knowledge of the theory to create a road map for how they will address critical factors in the design and marketing of their product.
You didn't really think we'd wrap up our endless, mischievousmysteryriddles just like that, did you? Well, the Mystery continues! To celebrate the launch of the SmashingConf NYC 2015, we’ve prepared a new mystery riddle, and this one will be an exercise in patience and stubborness. No, it's not going to be an easy one this time either, but the reward is definitely worth the effort.
How does it work? Well, you know how it works. Below you’ll find the first of a few animated GIFs that contain a hidden Twitter hashtag. Your job is to discover those hashtags as fast as possible. If your guess for a hashtag is right, you’ll find a tweet leading you to the next level. Once you’ve reached the last level, just tweet out all the hints in one single tweet to @smashingmag. You're looking for 5 hashtags in total, a hashtag per level. Not that difficult, right?
SmashingConf NYC 2015 will challenge you to rethink how you design and build websites today — and how to touch someone's heart with design. 1 track, 2 conference days, 5 workshops, 16 excellent speakers and just 400 available tickets. With the main focus on practical takeaways from real-life projects, you might never be the same again. To the tickets.
You’ve been around for quite some time, haven’t you? You know your way around front-end, or UX methodologies, or mobile patterns, or even the obscure dark matter of responsive web design. But you might not feel just right with your workflow, with the techniques and strategies you use, or perhaps with the amount of time required to get things done. Your techniques are pretty good, great even, but they just aren’t good enough.
Last week, Microsoft made its biggest announcement for the web since it first introduced Internet Explorer in 1995: a new browser, codenamed “Project Spartan.” So, what does this mean for us as designers and developers? What rendering engine will Spartan be using, and how will it affect our work? We spoke with Jacob Rossi, the senior engineer at Microsoft's web platform team, about the new browser, the rendering engine behind it, and whether it's going to replace Internet Explorer in the long run. This article, written by Jacob, is the result of our conversations, with a few insights that you may find quite useful. – Ed.
Spartan is a project that has been in the making for some time now and over the next few months we’ll continue to learn more about the new browser, what it has to offer users, and what its platform will look like. It will be a matter of few months until users and developers alike will be able to try Spartan for themselves, but we can share some of the interesting bits already today. This article will cover the inside story of the rendering engine powering Spartan, how it came to be, and how 20 years of the Internet Explorer platform (Trident) has helped inform how our team designed it.
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.
Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.
Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.
SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.