RWD Weekly #240
Welcome to responsive design weekly edition #240 and the first of 2017.
I hope you all had a wonderful break over the holiday period and the first couple of days back at work haven’t been too strenuous on you.
Fortunately this email signals the end of the week, thankfully, so you should probably just spend most of today reading up on the links and prototyping that thing you’ve been meaning to do for ages…. at least spend 15 minutes getting it started. Go on, you’ve earned it.
In late 2016 I began adding in the Snippet Show which has received a lot of great feedback so that will be kept moving into the new year. Some of the snippets will be longer than others so it may end up being at the bottom of the email to keep the links ready and available up front…. this week it is short so here you go….
This tip was from Jordan Moore a little while back around handling Typography when dealing with a multilingual site. Languages can be super tough. In addition to type setting different characters… words in certain languages, in German for example, are often much longer than those in English. This difference in word length has a knock on effect with line-length and ease of reading. One approach is to use the :lang attribute to target the language and set the container width based on that, thus providing different line lengths:
:lang(de) article {max-width: 30em;}Pretty neat.
Okay then, without (much) further delay, welcome to 2017.
Headline
CSS Writing Modes
A great introduction from Jen Simmons on writing modes on the web. Did you know that of all the current browsers it’s only Opera Mini that doesn’t support writing modes? Using writing modes provides you much more scope for change when it comes to different language support (not to mention some fresh design layouts), and it also helps link some of the syntaxes that seem strange across Flexbox and Grid.
Sponsor
Imagecon in downtown San Francisco!
Top experts are gathering to discuss the media challenges facing developers today. As the amount of images & videos on the web continues to grow, many challenges arise when trying to manage this vast amount of content. Learn best practices & meet your peers. Reserve Now
Articles
What AMP (Maybe) Means for News Developers
A great interview with an interactive developer from the Seattle Times, interactive editor from the Globe & Mail, and Tech Director and Developer from DocumentCloud and how AMP is impacting the web today and in the future.
FORC: The Fear of Removing CSS
I’m not that much of a fan of BEM because of the detailed way in which styling is applied. It feels as though we’re adding tonnes of classes when we could just… not. THIS article is a great example on why it can be invaluable when building large sites/applications that might have more/less features added/removed.
Vertical limit
The introduction of VH and VW units in CSS have been wonderful, and, when we build our prototypes everything looks to be working great all the way up until we pick up devices to test with. With desktop and responsive design view through the developer tools we never run into the disappearing URL bar that is on every mobile device. This causes the viewport height to change in size, thus causing issues for any use of the VH unit. Jeremy Keith explains his issues in this article.
Writing for 9 year olds? Six expert tips for creating great accessible web content for everyone
This year I’ve seen a lot of people say they will write more blog posts. Hooray, more links to share! If you’re looking to write a little bit more here at a few tips to help you make sure you are inclusive as possible.
Design for internationalization
As if it were planned (it wasn’t) this article provides more tips on how to deal with internationalisation and translations this time from the design team at Dropbox. There are a few items here that I’ve never considered either.
CSS Architectures for UI developers
Tutorials
The Holy Grail Layout with CSS Grid
In March last year Ire wrote a cool little tutorial on using CSS Grid to achieve the old three column layout which was dubbed “The Holy Grail Layout” in the early 2000’s. The wonderful thing is that Grid is now literally around the corner so it’s time to start getting familiar with the approach.
3 Things You’ll Need to Do When Using a Large Font Size
How we went about creating Input UI Elements for our Chatbot Platform
Sass Media Query mixin Spring Clean
Tools & Resources
High Performance Browser Networking
Do you like fast websites? No? Never mind then. Oh you… you at the back… you like fast sites? Well, this is certainly a resource you’re going to want to bookmark. This is an Orielly book from Ilya Grigorik which is available to read for free on the web.
CoffeeScript (CS) Introduction and Resources
If you’re looking at getting into CoffeeScript then this page gives you a bit of background and areas to look into to further your knowledge.
Understanding Perceived Performance
An excellent presentation (slides) on what perceived performance actually means
HelpMeAbstract
If you’re looking at getting to speaking but are a bit overcome by the whole “submit your talk proposal/abstract” then this can help you calm some of those nerves. Simply submit your talk abstract and have a speaking volunteer provide you constructive feedback.
Videos
What Comes Next Is the Future (2016) on Vimeo
If you haven’t seen this film already, WATCH IT. A wonderful look at the history of the web and interviews with some of the most featured members of the community. Oh, and I even managed to photobomb Ethan at 32:05… my 4 seconds of fame!
First Decoded Chat of the year: Paul Bakaus on AMP
In this video come podcast/interview Christian Heilmann (Microsoft Dev relations, formally Mozilla Dev relations) asks Paul Bakaus a tonne of questions on AMP to tease out the real story. It’s an hour long and I’m not quite through the whole thing yet, but AMP is coming out favourably (as you would expect from the lead AMP guy at Google).
Mobile Design Workshop part2
Luke Wroblewski talking about mobile in 2016 (and into the future)
Finally
That’s it for our first week back…. it’s good to see you again!
Now if you excuse me I’m off to record the first of 52 podcasts for the year. If that sounds like fun then head over to iTunes to subscribe. This year the podcast will be a mixture of just me riffing and having some actual quality guests who know what they’re talking about on the show…. I also think it’s time for some new music and I’m open to suggestions.
