background preloader

Responsive Images Done Right: A Guide To And srcset

Advertisement Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. In fact most don’t even realize just how bad their experience can be. This is why we made a new book called “User Experience Revolution,” a practical battle plan for placing the user at the heart of your company. Images are some of the most important pieces of information on the web, but over the web’s 25-year history, they haven’t been very adaptable at all. “Everything I’ve said so far could be summarized as: make pages which are adaptable.… Designing adaptable pages is designing accessible pages. HTML authors began to really feel these limitations when high-resolution screens and responsive layouts hit the web like a one-two punch. Further Reading on SmashingMag: Link That is about to change. The latest specification of the <picture> element8 is the result of years of debate on how to make images adapt. Here’s how we’d mark it up: Related:  Tutoriels, Formations, conseils utiles, bonnes pratiques etcLES IMAGESref/teo

Responsive Web Design · An A List Apart Article The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .

Masonry The new srcset and sizes explained › Martin Wolf Front End Web Development Wednesday, 07. May 2014 Last sunday I sat down on my couch, got comfy and started reading up on the new srcset and sizes syntax. Personal struggle But after some time of reading I had to face it — I just wasn’t able to grasp it, to understand the thought behind it and the overall system. I took a deep breath and started reading again. It was a relief and I was very happy that I stuck it out and didn’t give in to me feeling bad about myself. How srcset and sizes work It’s important to note that this new srcset has nothing to do with the old draft from 2012. There are now two responsive images solutions which can be combined or used on their own. Until now we used media queries to determine which size the viewport is and which pixel density the screen has and load a specific source according to that. What we do with srcset and sizes is, we tell the browser which sources, aka files, it has at its disposal and which width they have. The syntax Still having trouble with srcset and sizes?

Responsive images with srcset and sizes attributes vs picture element – Learnedia I’ve been discussing the importance of serving scaled images and optimizing images for faster page load time before. One more piece in the puzzle when it comes to images on the web is using srcset and sizes attributes. This article is a tutorial to help you understand these underused or misused HTML <img> tag attributes for responisve images. I will also talk about picture vs srcset and when to use each technique. srcset benefits for page load time When you use the srcset and sizes attributes on an <img> element, you are giving the browser necessary information to make a decision what image to request and serve to user. So how exactly srcset attribute can benefit page load time? Fig 1: Cute dog demonstrating srcset attribute OK, so you wouldn’t want to serve that big hero image to users visiting from mobile devices. GTmetrix reports when you are serving huge images on desktop where you don’t need them. srcset in action Chrome browser is handling the srcset attribute differently. Conclusion

How to build a living style guide in Webflow | Webflow Blog Behind every powerful, consistently expressed brand, there is a document: a style guide. And while most of them live in the form of hard-to-find and even-harder-to-update PDF formats, the best of the best live on the web, in the form of living style guides. In this post, we’ll show you how to build one, and perhaps even more importantly, why. Why build a living style guide? Because (most) style guides suck Instead of giving you a step-by-step description of the average experience of working with a style guide, here’s a quick story that sums it up: Before Webflow, I was at an advertising agency. I was constantly asking which button blue was correct that day, versus the day before, versus the icon blue. On top of all that, there’s the issue of actually finding the files for the most current, style-guide-approved logo/icon/font because the style guide was just a static PDF. And this was an everyday problem: never an ultimate source of truth, but instead, a constant guessing game. 1. 2. 3. 4. 5. > the 2 Billion (and still free) Image optimization API An Event Apart: The Future of Responsive Images At An Event Apart in Atlanta GA 2014, Mat Marquis walked through the history of developing a responsive images solution for the Web and the solution coming to browsers soon. Here's my notes from his talk The Past, Present, and Future of Responsive Images: Responsive Web design is made up of three things: a flexible grid, media queries, and flexible images & media. But as developers we've also made responsive design synonymous with large web sites.One of the most common critiques against responsive Web design is that it creates large (file size) Web sites, thereby slowing Web pages down.The average Web page sizes are 1.6MB. Images are responsible for most of these large sizes. Working Through Options Images and media can be made fluid by setting max-width to 100%. A Final Solution Other Techniques

How we built the fastest conference website in the world This is a guest post by JSConf EU Organiser Malte Ubl. The clickbait headline got you here, so let’s make this worth your while! I have no idea whether this is the fastest conference website in the world but I also don’t know that it isn’t; and I’ve spent a completely unreasonable amount of time trying to make it be the fastest conference website in the world. I’m also the creator of AMP, a web component library for making reliably fast websites, and this website is my playground to try out new techniques for future optimizations that I can apply to my day job. The JSConf EU website is built on the static site generator wintersmith. Inlining OMG, I spent so much time optimizing font performance. It turns out the Typekit CSS file actually uses @import to load another CSS file. Font Display Alright, now that we inlined Typekit’s CSS we can also very easily change it with a few more regexes. I wish wintersmith had a true asset pipeline. Dead Code Elimination

Design Systems The most important part of responsive web design is that, no matter what the viewport width, the content is accessible in an optimum display. The best responsive designs are those that allow you to go from one optimised display to another, but with the feeling that these experiences are part of a greater product whole. Responsive design: where we’ve been going wrong Responsive web design was a shock to my web designer system. Responsive web design brought us back to pre-table layout fluid sites that expanded or contracted to fit the viewport. Hanging on to our previous processes and typical deliverables led us to continue to optimise our sites for particular devices and provide pixel-perfect mockups for those device widths. With all this we were concentrating on devices, not content, deliverables and not process, and making assumptions about users and their devices based on nothing but the width of the viewport. I don’t think this is a crime, I think it was inevitable. Typography first

Responsive Image Breakpoints Generator by Cloudinary Responsive images | No strong beliefs The <img> tag all started with this message and has been with us since HTML 2.0. In that time it hasn’t changed much at all, just put a path to an image in the src attribute and you have an image on the screen. That all worked very well until the need to provide content to people in many different situations with a wide range of screen sizes presented itself. This need brought with it problems that seemed insurmountable at times and were dismissed as temporary by some, but have now been solved by the extraordinary people and work of the Responsive Images Community Group. I didn’t follow progress closely but I had a passing interest and saw that they sailed many a stormy sea and were slapped by a few broadsides before getting to this point. The process was sensible; they started with use cases and solved each one. It’s insanely clever how it works and I’m excited about getting it into production sites. Resolution switching with srcset srcset is a new attribute for use in <img>. Summary

Things nobody ever taught me about CSS. – Charlie Gerard CSS performance The descendant selector can be expensive Depending on how large your application is, only using the descendant selector without more specificity can be really expensive. The browser is going to check every descendant element for a match because the relationship isn’t restricted to parent and child. For example: The browser is going to assess all the links on the page before settling to the ones actually inside our #nav section. A more performant way to do this would be to add a specific selector of .navigation-link on each <a> inside our #nav element. The browser reads selectors from right to left I feel like I should have known this one because it sounds essential, but I didn’t… When parsing CSS, the browser resolves CSS selectors from right to left. If we look at the following example: The steps taken are: Looking at these steps, we can see that the more specific the right selector is, the more efficient it will be for the browser to filter through and resolve CSS properties.