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: If you're just changing resolutions, use srcset. | CSS-Tricks By Chris Coyier On September 30, 2014 responsive images If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>. Gaze upon this easy syntax: It's not just the syntax that is easy, it does a better job than <picture> with <source>s with explicit media attributes (we'll cover why in a moment). I've screencasted about this before, but it clicked better watching Mat Marquis's talk at An Event Apart Austin and with Jason Grigsby's post. #With srcset, the browser does the work of figuring out which image is best In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. Mat Marquis demonstrated this by showing how the browser approaches it with math. The browser goes: Lemme do some quick math that nobody cares about except me.
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.
CSS 3D Image Flip Gallery With Dynamic Shadows My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3D works, such as the Origami UI: we live in a world of increasingly diversified screens, with smaller sizes rapidly becoming the norm. That demands a reconsideration of space: rather than placing captions below photographs, we might want to place them behind the image, to be revealed with a mouseover or tap action. Creating The Basic Gallery The markup for the image flip gallery couldn’t be much simpler: <figcaption>Yacht</figcaption> <figcaption>Bee</figcaption> <figcaption>Queens-town</figcaption> Note the outer div for each figure, which will be used to create a 3D context for the gallery content. To gain the 3D effect shown in the example, we need to do three things: The Initial CSS div.flip-3d { perspective: 1200px; width: 30%; float: left;
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
How to create slick effects with CSS3 box-shadow Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips
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.
CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
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.