Welcome to another week of responsive goodness!
I’m battling a bout of illness this week so lets get straight into the links while I get straight back into bed.
Baby update: still no baby yet.
Last week we featured an article about ensuing your CSS is used along with semantics, for example styling button instead of .button in a <button class=”button”> example. This week our long time friend and contributor Matt Stow shows how both BEM and staying with HTML semantics
Merge the past with the present, thanks to this incredible dea! This mega bundle offers up 12 fantastic font families, all done in a retro, vintage and grunge style. Counting in a variety of different styles, you’ll take home 48 unique fonts in 1 super-discounted package! See the fonts here!
If you’re going to archive a site, this is how you do it
If you ignore our previous articles on being semantic with CSS or focussing upon a BEM approach (or both) the one thing that you should be doing but I’m almost sure you are not is leaving comments to explain your CSS. Sparkbox show how you can make your CSS so much more robust with these few tips
A great article that looks at the benefits of multiple typefaces in design. This approach does include more weight to the page, but the argument is that it benefits the readability and consumption of the content. While 400kb of fonts is a little over what I would consider suitable, I’d rather that than a 400kb picture of someone eating a salad.
While most of us are now practicing the mobile first approach there tends to be an upper limit to the designs. Once we 1200px we tend to include a max-width to our main content column and let the margins do the rest. In this article we look at other approaches to ensure that the content is readable even across larger screens.
So apparently now we can use !important…. I always knew I was ahead of the curve ;)
We originally covered some of these options back in 2014 but there’s some great tips on how to approach this a little easier.
Dealing with 3xx requests
An overview of how the Sonos pattern library came about, and how you can do sizeable things with fewer people
I’m all about content first as much as possible. As often as possible I work with Gather Content to capture this content but this is a great tutorial on how you get get going with excel and prototyping as well.
Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Presenting content hidden behind a tabbed interface is certainly on of the options when it comes to a changing viewport, the key is to keep the content accessible for everyone.
Tools & Resources
Download the entire Wayback Machine archive for a given URL.
pull down the entire Internet into a single animated gif
Code Pen example from our earlier article about large screens.
This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look.
Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.
Thanks for subscribing and I hope you managed to pick up a few new ideas and learned something new this week. If you’ve come across something of interest please share it with me by hitting reply and I’ll check it out for next week.
See you next Friday!
Responsive Design Ebook
A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.
Learn from more than 26 leading responsive design experts across more than 80 pages for the price of a
n expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.