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 .
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.
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
CSS Triggers Website Design in Adobe XD Tutorial As someone who has spent the last 15 years using Adobe Photoshop for designing websites, Adobe XD is a breath of fresh air. I'm exclusively a Windows guy, so I haven't had a chance to experiment with Sketch. Adobe XD (Experience Design) is Adobe's response to the popularity of Sketch. While I wrote and recorded this tutorial at a time when Adobe XD is still in beta, you should be able to follow along perfectly fine for years to come. So with that said, if you prefer to watch video tutorials instead of reading written tutorials, you can watch everything I'm about to teach you below: Click here to download the project assets Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project. 1. The first step is to click on the Artboard tool on the left toolbar. 2. Now select the Type tool on the left sidebar and left click where you want the first letter to start. 3. 4. With it selected, copy it and paste it.
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.
Responsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. A cette époque, il n’était pas rare de trouver deux versions d’un site internet (La version Desktop et la version Mobile). Aujourd’hui, la multiplication des types de terminaux fait qu’il n’est plus possible de réfléchir de manière binaire (Si l’utilisateur n’est pas sur ordinateur de bureau, alors il est sur un téléphone portable). Une nouvelle tendance est née, celle de la conception adaptative (Responsive Design) . Les autres usages du « Responsive Design » E-mail adaptés L’approche Viewport
Caching best practices & max-age gotchas Posted 27 April 2016 - this post was brought to you by: procrastination! Getting caching right yields huge performance benefits, saves bandwidth, and reduces server costs, but many sites half-arse their caching, creating race conditions resulting in interdependent resources getting out of sync. The vast majority of best-practice caching falls into one of two patterns: Pattern 1: Immutable content + long max-age Cache-Control: max-age=31536000 The content at this URL never changes, therefore…The browser/CDN can cache this resource for a year without a problemCached content younger than max-age seconds can be used without consulting the server Page: Hey, I need "/script-v1.js", "/styles-v1.css" and "/cats-v1.jpg" 10:24 Cache: I got nuthin', how about you Server? Server: Sure, here you go. Cache: Thanks! Page: Cheers! The next day Page: Hey, I need "/script-v2.js", "/styles-v2.css" and "/cats-v1.jpg" 08:14 Cache: I've got the cats one, here you go. Server: Sure, here's the new CSS & JS. Later
Beginner’s Guide to Responsive Web Design Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future. Free trial on Treehouse: Do you want to learn more about responsive web design? Try a free trial on Treehouse. Over the past year, responsive design has become quite the hot topic in the web design community. What is responsive design? Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. Fluid Grids
Who has the fastest website in F1? Posted 19 March 2019 I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm going to make my predictions the only way I know how: By comparing the performance of their websites. If anything, it'll be interesting to compare 10 sites that have been recently updated, perhaps even rebuilt, and see what the common issues are. Methodology I'm going to put each site through WebPageTest to gather the data on Chrome Canary on a Moto G4 with a 3g connection. Although a lot of us have 4g-enabled data plans, we frequently drop to a slower connection. Trying to use a site while on poor connectivity is massively frustrating, so anything sites can do to make it less of a problem is a huge win. In terms of the device, if you look outside the tech bubble, a lot of users can't or don't want to pay for a high-end phone. Ok.