Hello everyone and welcome back after a weeks hiatus. It wasn't a planned break so I do apologise that you didn't receive the email as per normal but it turned out to be a much-needed break.
For those of you who weren't aware, last week I was incredibly fortunate to attend the Adobe Max Conference in Las Vegas and even more so I had the opportunity to speak about Responsive Design and Web. A massive thank you to Adobe for having me, and a bigger thank you to those of you that attended the session. It took a huge amount of time to put together and although at times, many many times, I questioned if it were worth all the effort, at the end of the day I'm happy to say that it was. Not only for the experience of going, but for everything I forced myself to learn in the preparation even though much of it didn't make the final presentation.
One of the coolest things that came out of it is this weeks feature image, which was an amazing sketch note of the talk from Sam Otis (click on the image to see the full version on Twitter)
The attendees have been given access to the slides and I'm putting together a 'talk page' with Codepens and code examples which I will make available to you next week (once the jetlag has passed, I've caught up on work, and get time to finish it off of course :)
Right then, let's link! | | Headline This is a little demo that I put together for the talk last week. It only works in Chrome but once you approve it to use the microphone it will allow you to perform a voice search for any resources on the RWD site. This was really valuable when I was testing the RWD.is site out using WebVR and the Samsung GearVR headset as typing for items is a pain in the butt. In the resources this week we're also covering some Voice resources from Clearleft.
Bootstrap is still the most popular framework getting around so here's the latest update. They've improved customization, documentation, build tooling, and naming inconsistencies all while fixing hella bugs. | | | Start selling your products, or drop shipping someone else's products today and be safe in the knowledge that your site is responsive and optimised for every device through the wide selection of free responsive themes. | | Articles I'm pretty sure you've heard of this communication tool call Slack, right? Well, it's kinda popular. Check out how they rebuilt it and managed to shave 53% off their pricing page load time!
Variable fonts are so hot right now, and Adobe is now supporting them in PS and Illustrator. I think variable fonts will be a great addition to the web, seeing as it's the most variable of all outputs.
Performance is an incredibly important part of the budget for any project... and I'm not talking about the money the client is paying you from their budget. It's not just about a visually fast loading site, although that is important, we also want users to be able to interact with the content as soon as they see it.
Typekit now has a visual search available. Find a font you like, take a picture of it, upload it to typekit and get the result back.
This exceprt is from Chapter 3 of Rachel Andrews new A Book Apart book and is well worth a read (just go buy it really). Another bit of news which is wonderful is that Rachel Andrew has also been made the Editor in Chief of Smashing Magazine moving forward and I'm looking forward to seeing a wonderful publication get even better.
Last week one of the questions that I received the most was "how do you stay across all of the updates on the web?". My response was to essentially create a newsletter like this one. It forces you to follow lots of smart people on twitter, follow lots of great blog RSS feeds and to find all the hidden gems of articles that you wouldn't usually come across.
One of the tools that I use is Feedly and I've got about 500 RSS feeds that I go through, thankfully they don't all post every week. This week feedly annouced that you can now curate and send newsletters directly through the feeds that you've got making it easier to produce newsletters for folks that want to get startd (although I'm sticking with Mailchimp).
Tutorials Designing a voice interface? Here's a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer.
If you're wondering how you can get started with writing some great CSS then this is definitely a post you should be reading.
I touched on the iPhoneX notch in my talk last week and Julian has also provided an in-depth overview of the issue and how to deal with it.
A set of best practices for writing clean HTML and CSS... but please do take it with a grain of salt. What is one person's best practice, is another person's least favourite approach.
.design domains were just released and some of the best ones are still available. Normally cost $35 but Responsive Design subscribers get them now for FREE
// sponsor
Awesome codepen examples I was really keen to create a website within a virtual box using transforms and CSS Grid, and this comes pretty close to my initial idea. This kind of stuff becomes even more interesting when you start to apply the Z index and bring the content into WebAR or WebVR which is really starting to peak my interest.
If you liked the CSS Grid Persective example but can't quite get your head around how it's done then this little tool is for you. Play around with the perspective, rotateX, rotateY, rotateZ and the transform origin to see the different shapes you can make with a simple square element.
A lovely fluid type example that changes as you update the viewport. I particularly love the fact they've used the Old Man and the Sea as the text.
A fun experiment with CSS Grid Layout whereby Jonny has built the (American) Monopoly board on the web. He can definitely pass go and collect $200... nice work!
Finally
That's it for this week. Thanks for putting up with a dud week last week... it's great to be back again and next week I'll be going through the Chrome Summit updates, a closer look at AR.js in practice and much more.
Cheers,
Justin. | | | |
No comments:
Post a Comment