Hello and welcome to this weeks responsive design weekly newsletter where we’ll look at a new responsive book… which is amazing, a lovely new portfolio site produced by Super Friendly (we do a review of the build), and more!
I’m writing this on the London Underground heading towards Heathrow Terminal 3. I’m not flying out anywhere but instead I’m heading there to pick up my cousin who is coming to visit from Australia. YAY! The reason why I’m telling you this is because as I look around the tube carriage there are a number of different people from all walks of life and each on their own differnet journey. Surprisingly quite a few of them are reading actual books, but there are a number of glowing faces due to their back-lit mobile devices.
Some people are traveling to/from work with headphones. I’m one of those people, but I have a laptop open and I’m listening to some spotify tunes (currently this track http://ro.me which if you haven’t seen is amazing…). There are a few people lugging a heap of suitcases, who I assume are heading to the airport. One person in particular seems to be very frustrated and worried, tapping their iphone 5c (guessing from the bright colour) at each stop we arrive at. My guess is that he’s trying to download something using one of the wifi spots at the station, but the site he’s trying to load isn’t responding quickly enough. I get that A LOT. It’s a rare use-case but it’s one of those ones that are really important. I can imagine heading to the airport, running late, and not knowing which terminal I’m supposed to be leaving from. There are 5 terminals at Heathrow and it can take up to 30 minutes to between them… so when you’re running late for a plane being able to find the right terminal in the small window of internet access becomes incredibly important.
That’s just one really small reason why we need to ensure that we build our sites as fast as we possibly can. This can often be done by just looking at the simplest of things and getting those right. For example I just retested a clients site that we’re making some performance improvements on and now the staging site fully loads before the live site has even made the first paint. The changes? We enabled Gzip, switched Keep Alives on and set the default cache settings for all asset. We’re yet to look at compressing images, using progressive jpgs, swapping in SVG’s, UNCSS-ing the CSS, concatenating and compressing the CSS and JS or enabling Critical CSS. In fact I’m running a few performance audits for free.
Get the basics right, and make sure someone makes the right Terminal ;)
Before we get to the links I wanted to thank you to those that submitted sites for the Net Magazine Gallery. One of the sites that will be used is on the other RWD Podcast this week, but I’m still keen to get a couple more so let me know what you’re working of and you might just see your site in an awesome mag.
Lets look at those links.
At more than 500 pages and with 13 Authors/Chapters the new Smashing Magazine book is worth it’s weight in gold. Learn from experts including Daniel Mall, Ben Callahan, Eileen Webb, Sara Soueidan, Zoe M. Gillenwater, Bram Stein, Yoav Weiss, Fabio Carneiro, Tom Maslen, Andrew Clarke, John Allsopp, Matt Gaunt and Vitaly Friedman and their best efforts at making you better web designers and developers. We’ve got three copies to give away and all you need to do is send a tweet out why you want one and we’ll draw the winners before next weeks newsletter.
An amazing look at the web as it is today from the eyes of someone who hasn’t seen it for 6 years… and it’s not a good story.
The 2015 release of Dreamweaver CC includes Bootstrap integration, to easily build responsive websites that can adapt to any sized browser. Visual media queries make it painless to define breakpoints, and the new Device Preview feature lets you preview and inspect your responsive websites on actual devices.
For those of you that aren’t quite ready to jump into designing in the browser then maybe Sketch could be for you. But how does it really stack up against something like Photoshop? Take a read through a year of pain and joy
Show off all the data you’re saving through Opera Mini and laugh about the state of our overweight pages… (not really funny :(
A whitepaper looking into 100 popular websites and how they hold up with page weight and load times. The focus is around heavy images being sent to mobile devices (mainly because they’re selling this as a service), but the report has quite a bit of good data and makes very valid points, although I’m not sold on device detection by any stretch (capability testing is a different story though)
The performance discussion is becoming more and more common now, hoorah! Now the wonderful team at Vox Media are going back to their beautifully crafted sites and systematically working through and improving on their performance.
These rules are equally important to not break when designing and building responsive websites.
If you’re wondering which is better, Bootstrap or Googles Material Design, then you can at least cover off a few different areas like buttons, tabs, grids, tables, forms, components, layouter, dev experience and a few more.
This was one of the sites that I recieved a recommendation to review as part of the NetMag Gallery…. and infact I received two recommendations for it. I wasn’t surpised then to see Ethan and Karen interviewing the clever folks behind the site shortly afterwards. Great listen.
A great discourse from Josh Clark about mobile. I like the idea of reducing engagement and reducing time on the site. Lets not have users dwelling on our sites, lets get them what then need and back out again so they can enjoy life instead.
Tutorials and Tools
Grids can be hard to wrap your head around as they get more and more complex. Fortunately Susy helps with all the maths and this provides a detailed tutorial on getting started with Susy and Sass
This tool will check your ‘secure’ https site and tell you all the areas where you can do better, and chances are you can probably do better. This page is actually all the best practice recommendations to stay secure. One of the things that I don’t like, for personal reasons, is denying the x-frame options and disabling the ability to iframe your site. I know why it’s good, but the Ami.Responsivedesign.is site works by using iframes so the more people that do this the less useful it becomes. Like I said, selfish ;)
A new interface tool that gives you bootstrap modules to drag and drop and build up a site. It’s in beta at the moment so you can sign up for alerts.
There’s been a few great sites release lately and these are some of my favourites
That’s all for this week, if you missed the podcast with Matt Griffin last week it is WELL worth a listen.
If I’ve missed something you’ve been working on this week please take 2 minutes to hit reply and share it with me and include it in one of the up coming RWD Weekly, or use Ask me anything.
Last but not least, please don’t forget to hit reply and send me your thoughts on the types of sites and designs that might be included in the Net Magazine Gallery.
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.