While I'm in the process of taking all the slides and dropping the details and examples into this web page, you can download the PDF version
You have just watched the responsive design in 2017 talk at Adobe Max, welcome.
I wanted to included a set of links from the presentation here for you to be able to follow up on for more details. There are a series of websites, articles, tools, and example code pens that I used to put the talk together (and there's a bunch of stuff there that didn't even make the talk)
As with all things progressive, for those of you that are on a device and browser that support service workers you also now have this as an offline page (although I can't do much about the external links sorry.)
Stephen Champeon delivered a talk "Inclusive web design for the future" at SXSW in 2013. Before then the approach was more of a Graceful Degradation
“Web design must mature and accept the developments of the past several years”Stephen Champeon
“The goal of web design is not merely to dazzle, but to deliver information to the widest audience.”Stephen Champeon
Progressive enhancement is similar to Graceful Degradation, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.
Progressive Enhancement isn’t about building a crappier version of your site for people that might decide to turn off javascript. It is not about saying you shouldn’t use Javascript at all. It’s about building the site in a way that you can use as much javascript as you could want…. layer that website with 35 different flavours of JS if that’s what you want to do… but building with progressive enhancement means that in the off chance that something goes wrong with the JS the user isn’t starring at a blank screen.
Before we get in we’re going to look at a bit of history, take a step back into yesteryear to get the lay of the land.
Running a poll on I put together a series of the latest approaches that 28k people we're most keen on seeing.
When we needed flexible media, we started off with something simple and basic. We made the image 100% the width of the container, and we told the image to not go any larger than it's own size.
img {
width: 100%;
max-width: 100%;
}For a while, this was good until some sites went too far. This accomplished two things
This was highlighted with sites like
SRCSET allows you to provide the browser with information about both the images that are on your server (the srcset part) and the way in which your design responds in the viewport (the sizes part).
<img
src="horse-350.jpg"
srcset="horse-350.jpg 350w,
horse-500.jpg 500w,
horse-1024.jpg 1024w,
horse.jpg 2000w"
sizes="(min-width: 64em) 70vw,
(min-width: 37.5em) 95vw,
100vw"
alt="A horse" />
<picture>
<source
media=“(min-width:50em)”
srcset=“darcey-avery.jpg”>
<source
srcset=“darcey-avery-cropped.jpg”>
<img src=“darcey-avery.jpg”>
</picture>
Floats were designed to float images to the left and to the right of text, but then someone realised that you could do that with div as well and began to use it for site layouts. While this was good because it gave us the ability to separate Content from Design, it was a hack.
nth-child to clear the floatsSo streamlined that it fits inside a tweet
.fukol-grid {
display: flex; /* 1 */
flex-wrap: wrap; /* 2 */
margin: -0.5em; /* 5 (edit me!) */
}
.fukol-grid > * {
flex: 1 0 5em; /* 3 (edit me!) */
margin: 0.5em; /* 4 (edit me!) */
}Flexbox is great for the unknown... when you are not sure how much content you might have or how many items that might occupy an area (think navigation items, article lists, search results — smaller confined components)
Grid is great for the known... this is your page layout. If we're building modules instead of pages, think of the grid as something that lays out those modules in a sensible fashion.
To get super fluid type across all viewports without using any media queries you can use the following method
body {
font-size: 1em;
font-szie: calc(1em + 1vw);
}
This example, Full width/height slash page, is doing a lot of things
Note that Viewport Height/Width is a measurement that can be used anywhere that you’ve included % or EM. The difference between them is that % and EM is based on it's parents container, but the VW and VH is based on the original container (which is the viewport)
Although not specifically CSS Image shapes, I thought this example laying out speaker profiles in an interesting way was a great approach.
Performance is really interesting because we often align it with a monetary figure. We increased the sales of widgets by 200% for every 0.2s we shaved off the load time.
These are great because we understand those metrics. We can also use them to convince company’s to spend money with us to deliver them a more successful business through faster websites.
It is also looking, once again, at the next billion users. Some of those users are going to (hopefully) be on Mars. Facebook have this practice called 2G Tuesdays, where an office will slow their internet connection down to 2G so they can seen how half of their audience experience their product.
Forget 2G Tuesdays…. I want you to start thinking about Mars Mondays.
The sheer distance between Earth and Mars means it will take at best 3 minutes to get data from one to another, as you can see on if the moon were one pixel
This is most certainly coming at you in 2017 and it may have a significant affect on the way in which we’re building our websites today…. but that’s okay.
In fact if you’re running on a secure connection HTTPS you can take advantage of it right now. The standards bodies haven’t said you have to run https for it, but currently no-one is supporting it unless you are running HTTPS and that doesn’t look as though it will change.
If you don't have the technical knowhow to set up your server to run HTTP/2 then you could fall back on some great Content Distribution Networks (CDN's) who will take care of that for you (and a number of other things like caching and distribution of content to be closer to the users that are requesting it).
Taking a look at a side project, A Briefer History of Time, we use a couple of techniques to improve performance.
<link rel="prerender" href="//brieferhistoryoftime.com/chapters/2"> to prerender the next chapter so that subsequent page loads are almost instant. You should always take care with prerender because you're causing users to download content that they may not end up viewing, however, in the the case of the next chapter I'm making the assumption the user wants to read on.Utilise AMP as a check list to look at the things you should be doing on your site. While you will see some quick performance gains by rolling this out it doesn't fix the core problem and offloads your mobile customers onto Google (albeit still serving your content).
This is what AMP can do for you auto-magic-ly. You can do all of these things yourself on your own site with a little bit of time and effort
I took the Adobe Max site, sucked it down with Site Sucker (OSX), and then progressively went through to make series of updates to improve the performance.
Here is the finished product of all the optimistation changes - Adobe Max Optimised
preload=none on the video items because they were downloading for some reason.The financial times are incredibly responsive when it comes to their website, they're even looking after the giant screens.
One of the issues that you face when building responsively is the users proximity to the screen. Are they really far away, or are they really close, and are they viewing a really big screen or a really small one?
You need to apply similar rules for a large screen from a distance as you do for a small screen up close. There is a problem though. While we can test for device and viewport width we can not test for the distance our user is from the display.
Financial times have fixed this by creating big.ft.com, a display that is used specifically for the large digital billboards or screens that you might see in office buildings.
The Guardian are taking advantage of the Offline capabilities of browsers by providing a crossword to enjoy when a connection to the web can not be found.
This is a wonderful way to keep your users engaged with your brand whilst they're offline, and you can prompt them once the connection is again restored. The approach uses Service Workers to achieve this so not every browser will support the approach... but that's why it's such a good progressive enhancement.
By 2019, 20% of brands will abandon their mobile apps.
An official stat is that the average person downloads zero apps per month, yet they're likely to be interfacing with your website a lot more often. In the case of Washington Post they are taking advantage of this in two ways.
amp-install-serviceworkerThis means that when people visit the site when they're offline they get a Washington Post application shell and, if you've been there before, the previous articles ideally already pre-loaded.
By 2020, 30% of web browsing sessions will be done without a screen.
There are already home helpful devices out there including Cortana, Alexa, Siri. We still feel a little bit silly using them in public sometimes but that doesn't mean we shouldn't look to take advantage of voice capabilities on our site.
Anyyang is a small javascript library that allows you to use the microphone through the browser and tie it into just about any API to action any command from saying hello, showing pictures of kittens, to producing the weekly TPS reports.