Thursday, January 18, 2018

RWD Weekly #292

View this email in your browser
Laws of UX across 4 viewports
Hello and welcome to RWD Weekly #292.

This week I was lucky enough to make it over to Germany for the first conference of the year, Beyond Tellerrand Munich!

As always, Marc puts on both an amazing show when it comes to the speakers and has an uncanny ability to attract the best conference attendee's as well. Don't worry if you feel like you've missed out, there are conference videos for you to watch and the original Beyond Tellerrand in Dusseldorf is on in May

There were two talks, interactive email from Mark Robbins and Data Visualisation from Nadieh Bremer, which I'm going to introduce as part of our upcoming 300th edition. I'm looking at how I can visualise all of the links that we've had over the past 6 years and then bring those visualisations directly into the email.

I'll be writing up my experience over on the blog this weekend and sharing it with you next week, but for now, there's a lot of exciting links to bring you this week. Let's get clicking!
 

Headlines

Bootstrap 4

Bootstrap 4 has finally come out and is now a stable release. According to the documentation, there are no breaking changes since the last beta release, but now you can push it with confidence.
 

Case Study: lynnandtonic.com 2017 refresh

A couple of weeks ago we featured lynnandtonic.com with its 21 different layouts and brilliant use of CSS Grid Layout. While I was preparing a review of the site and trying to reverse engineer how it was put together, Lynn has written an overview of the process herself. Thanks Lynn!
 

Sponsor
RWD Fundamentals - Free Course with Jason Pamental

FREE Course: Responsive Web Design Fundamentals with Jason Pamental. Enroll Now!


This hands-on course empowers you to build responsive websites that look great and perform even better across multiple devices.
thegymnasium.com

Articles

The design fidelity conundrum

I've been having a similar issue with design fidelity in our own project process. At what point do we start to create higher fidelity sketches or wireframes — and at what point do we get into more of the visual design?
Often designs can dictate the complexity of the website project, the nuances of the component you're trying to deliver. This, in turn, has a direct impact on the time/effort it takes to build — and in turn, affects the cost/hours included in the quote. Unfortunately, we can't start the design until after the signoff of the quote… so where does that leave us?
 

Mental Illness in the Web Industry

As some of you might remember, I lost my best friend to mental illness a few years ago. It was, and still is, a tragedy and one which I'm not sure I'll ever fully get over. Mental Health/Illness is a very serious issue, both in and outside of the web industry. If you ever struggle with mental health please know that I, and I'd guess the majority of the rest of the web community, is there for you if you ever need it. Check out the article.
 

How Big Is That Box? Understanding Sizing In CSS Layout

Rachel takes you through how to understand how big each of our boxes (divs) are around out content, and why they might take on particular characteristics. Once you finish the article you'll have a lot firmer grasp on how layouts work and why.

 
 

Tutorials

D3 zoom — the missing manual

After watching Nadieh's talk at Beyond Tellerrand all about data visualisation I was excited to come across this article detailing how zoom and scaling work with SVG and Canvas.
 

Better Typography with Font Variants

Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web.
 

How we adapted the Booking.com mobile site for the iPhone X notch

There was a lot of discussion around the iPhone X notch but very little has come of it in practice. For those of you that are looking for a 'big name' implementation check out how booking.com handled it.
 

Meet the New Dialog Element

We've been using popup modal windows for a while on our websites, and now there is a specific semantic element that we can use — the 'dialog' element. This tutorial looks at what it can do, and how you can use it now with a polyfill for older, unsupporting, browsers.
 

Interactive email using SVG and SMIL

After seeing Mark Robbins at Beyond Tellerrand in Munich this week I'm keen to do a little bit more, a little bit of interactivity, with this email. With episode 300 coming up in 2 months I think it's time to take on some of this articles examples.
 
 

Tools & Resources

Request Map Generator

Vitaly Friedman delivered a wonderful talk at BT Conference this week about Responsive Design. In the talk, he referred to 3rd party scripts as 'friends who come around and trash your house, and bring a bunch of their drunk friends as well'. It's true... quite often when we load an Advertiser, AB Test, or Analytics we have a LOT more content come down the wire. This tool allows you to see exactly what loads and maps their origin. Great for understanding why your performance might be suffering.
 

Learn CSS Grid - Video Course

Learn CSS Grid with Wes Bos in 25 pretty good videos from fundamentals to Real World in about 4 hours. This is brought to you buy Wes, but also partially supported by Mozilla (who also have a new YouTube channel with Jen Simmons, see the next link)
 

Layout Land

Jen Simmons from Mozilla will be bringing us a new video every Thursday on the Layout Land channel. You can get started now with Incredibly Easy Layouts and Designing for 4-sided viewports with CSS Grid
 

Learn from the best coding experts at Treehouse

There are lots of ways to learn coding, but Treehouse is the best at making it fun and keeping the quality high. Start with a free trial!
// sponsored

Great to have you back again for another year. If you've written anything recently send me a link and let me know so that I can help spread your great work with the rest of the community. Until next week, stay responsive!

Cheers,

Justin.
Copyright © 2018 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Studio 1, Make Space Studios
London, London SE17DR
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by MailChimp

No comments:

Post a Comment