RWD Weekly #260
Welcome to RWD Weekly edition #260 and the anniversary (as I’m writing this) of a little article by this guy called Ethan Marcotte about a thing you might have heard of called Responsive Web Design.
That was seven years ago now and it’s amazing how natural it felt to make the switch from fixed layouts to responsive layouts. It was such a big change that it was no wonder that Ethan had it released on Towel Day as well.
You can go back even further as well, a little over seventeen years ago, and revisit John Allsopp’s article A Dao of Web Design. When you re-read you realise that despite all the time that has elapsed, and all the developments that we’ve seen on the web, that the fundamentals of the web and the web we want haven’t really changed — we must “accept the ebb and flow of things.”
Today we have new tools/toys like CSS Grid which allows far greater control than we’ve ever had before, but at the same time, it allows us to let go of our content and allow it to find it’s own natural fit within the constraints of our design.
Personally, I’ve been looking at CSS Grid as a way to force elements to go where I want them to which is certainly one way to look at it, but it also offers a more natural “fit where I can” approach which I’m beginning to explore and having a lot of fun with.
That leads us nicely to the snippet show.
Snippet Show
While you’re getting started with CSS Grid you’re sure to be thinking that you can’t use this is production because it’s only supported in the latest browsers. While the support is true it doesn’t preclude you from starting to use it. Every browser that does support CSS Grids also supports @supports. This means that you can do something like this:
.wrapper {
max-width: 1200px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 3fr;
grid-auto-rows: minmax(150px, auto);
}
/*float the side bar to the left and give it a width, but also tell it the grid column to go in if Grid is supported /*
.sidebar {
float: left;
width: 19.1489%;
grid-column: 1;
grid-row: 2;
}
/*float the content to the right and give it a width, but also tell it the grid column to go in if Grid is supported /*
.content {
float: right;
width: 79.7872%;
grid-column: 2;
grid-row: 2;}
This will give you a site that works in all browsers that do not support Grid because it’s ignored and looks at the floats and widths. Then if Grid is supported then we want to remove the widths otherwise the elements will take up that width of the grid track rather than the parent.
@supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}Viola, you have a fallback layout AND grid in one.
Sponsor
Snag the hottest new domain name for designers
Last week we offered you FREE domains with the .design domains. This week I’m happy to extend that offer to you for another week. That means you can still get a FREE .design domain name… no credit card even required. If you’ve claimed your domain already last week don’t despair, hit reply and let me know you want another one and I’ll send you another code.
Articles
What’s New In DevTools (Chrome 60)
Dev Tools have had an overhaul (in Chrome Canary for now) and it’s now should be considered an invaluable tool on its own (if it wasn’t already before). The Audits tool is now being powered by lighthouse which provides a series of tests for measuring the quality of your site, specifically around PWA-ness, performance and accessibility. Have a look at this article and associated video for the full scoop.
The Web’s Grain
On the anniversary of the RWD article I’m running a couple of classics articles and this is one of my favourites from Frank Chimero.
Anchors OK? Re-Assessing In-Page Links
In 2007 I was building a large content site which had very long pages. The client wanted to put each section of the article on a different page to keep each of the pages short, and before you ask no, it wasn’t a news site that just wanted more ad impressions. The reason behind it was they wanted an index/contents list of headings on the article to showcase what the page was about and allow the reader to get straight to sections when the wanted to. This article looks at methods like this for anchor links and to see if they still have a place in todays modern world of different devices.
Kill Google AMP before it KILLS the web
If you could take my feelings about AMP and roll them into an articulate angry post – this would be that post. I’ve tried to say a lot of this in a more approachable and fair way, but essentially this is where I think AMP is not a good thing.
Scott Gilbertson: ‘Kill Google AMP Before It Kills the Web’
Following on from Scott’s article, Gruber fires his backing on the article PLUS some of the issues he sees on iOS for good measure.
Samsung DeX brings a new Dimension to the Mobile Web
Ada writes about a new way of using your mobile in different situations with the new Desktop eXperience. Plug your S8 into the dock and you get a real desktop experience along with your mobile device where PWA’s are first class citizens.
Hotjar: See how your visitors are truly using your site – try it for free //Sponsor
Hotjar is a new and easy way to truly understand your web and mobile site visitors. Try it for free.
Tutorials
Learning CSS Grids
Learn the CSS Grid in ASCII… you know you want to! It actually gets a lot more detailed than ascii diagrams though, but it is a very good way to showcase the layout and changes required at different viewports. Varun uses a product grid over at Aldo shoes to show how Grid can make it super easy to achieve really fluid and gorgeous layouts.
Basics of CSS grid layout
In this article, we are going to take a look at some concepts and show you the power of this new way to layout complex web pages.
Tackling Render Blocking CSS for a Fast Rendering Website
Are you loading your CSS the right way for the best performance on your site?
Going offline at Indie Web Camp Düsseldorf
The simplest way to explain `srcset` and `sizes`
Tools/Resources
HTML Symbols, Entities, Characters and Codes
HTML Arrows is a comprehensive reference website for finding HTML symbol codes and entities, ASCII characters and Unicode hexadecimal values to use in your web design, and because they’re part of the font they’ll scale as well as SVG.
GitHub Marketplace
A list of tools on Github that will help you with code quality, continuous integration, monitoring, project management and more.
Muuri draggable grid layouts
Responsive, sortable, filterable and draggable grid layouts
Responsive and Adaptive Layout for React Native Apps
Introducing iotaCSS
A design agnostic framework.
Presentations
Why Fast Matters
A great slide deck and some valuable statistics about why performance matters from Harry Roberts
What we talk about when we talk about Web Performance
Jobs
Join the Web Performance Team at the Wikimedia Foundation!
Finally
Finally, if you have written or read anything recently that you think others might be interested in then please send me an email back to let me know.
See you next week!
Cheers,
Justin.
p.s. I’m putting together my favourite topics for a talk about building responsive sites in 2018 and wanted to see if there was anything in particular you’d like to hear about it I were doing it for you?
In this session we’re going to take a look at what it means to design and build a responsive site in 2018.
We’ll look at
- using CSS Grid to build in browser wireframes and break the traditional mould of web design
- making your website faster without scrimping on design and functionality
- How to progressively enhance and go from website to progressive web app with offline support
- Handling more than just the keyboard and mouse – dealing with the new wave of input methods.
