Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.
Why Should You Care About Lazy Loading Images?
There are at least a couple of excellent reasons why you should consider lazy loading images for your website:
Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point. This means considerable savings in bandwidth, for which most users, especially those accessing the web on mobile devices and slow-connections, will be thanking you.
As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?
So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.)
First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.
Layouts that let content shine
The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading
The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.
It’s been an amazing evolution to watch.
And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.
That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.
Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.
Better collaboration between designers, and between designers and developers
As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.
The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.
All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.
On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.
A CSS survival kit. Includes only the essentials to make camp.
About Tent CSS
Sleeping in a tent is certainly not a luxurious experience. It is rugged and rudimentary, but it provides the basic necessities needed for survival.
Pulling inspiration from outdoor survival, Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites. We'll leave application and kitchen sink development to other frameworks.
Tent CSS uses autoprefixer to make most modern features compatible with many older browser versions. This framework may not be best suited for you if you are looking to support legacy browsers.
Scrollbear is a tool that maintains the container scroll position when images loaded.
When images loaded, the scroll position will jump and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change.
Remember: most mobile devices are also phones! So, why not create link-to-call actions? If you’re creating a business guide, or even for your own unique phonebook, most people will prefer to call a person instead of filling in a form on the device.
<a href="tel:+1800229933">Call us free!</a>