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 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. 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! | | This hands-on course empowers you to build responsive websites that look great and perform even better across multiple devices. thegymnasium.com | | Articles 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? 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. 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 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. Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web. 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. 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. 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 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 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) 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 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. | | | |
No comments:
Post a Comment