RWD Podcast Episode #24 : Advance Techniques part I
Listen to episode
Hi, everyone and welcome to another edition of Responsive Design Weekly Podcast. This week we are up to episode number 24. Now, for those of you that might be hoping for a special guest this week, I’m sorry. It is just me.
Next week though, it is going to be quite exciting I think. I’ll be talking with Mr Stu Robson. For those of you that don’t know Stu, he looks a lot like David Bowie on Twitter. He was featured as one of our interviewees as part of the PDF book that we released a few years ago over the Christmas break. Stu is Mr. Sass — as in the CSS precompiler — and does some wonderful things. He’s a freelance front end designer, developer and just an overall nice guy.
Next week, we’re going to the The Web Is, the web.is conference which is held in Cardiff and is put on by Mr Craig in Wales. It promises to be a really, really good conference. You’ve got Brad Frost talking. Andy Davies is talking about performance. There’s a whole bunch of people who, the names escaped me at the moment so I’ll quickly Google them for you but it’s going to be awesome.
Basically, we’re celebrating 25 years of the web. Andy Clarke is talking, Scott Jenson, who else? Robin Christopherson, amazing talk at the Dusseldorf earlier this year for Beyond Tellerrand. To be honest, I really hope he is going to do the same talk again. It was a beautiful talk. You can see that on Vimeo. I’ll post that on the show notes but he’s speaking again which is very exciting [00:02:00].
Keir Whitaker is talking. He’s coming from Shopify, Sally Jenkinson who spoke at Responsive Day Out really, really clever, clever freelancer, just very awesome. Chris Murphy who I think has been behind, I don’t want to mislead anyone but I think he was behind the Manual Kickstarter that came out recently and maybe did the XOXO Festival.
She was speaking a few years ago on the An Event Apart around games and gaming consoles and how well we design for them, looking at how some of the … a lot of people, some people, a segment of people were using gaming consoles to access the web. She just spoke about how there were a lot of accessibility issues when using a controller, the size of the screens, the browsers that we’re using, very, very clever, again another freelance designer developer as well.
There’s a whole bunch of other people who I haven’t actually seen or heard speak before but I’m very, very excited. Craig always puts on an awesome conference. You can see them all at bsquare.com. There’s also his video company where he records a whole bunch of different conferences as well [00:04:00]. That’s on next week.
I’m solely speaking with you. We’re going to do a podcast from the pub. That will be interesting to see how it goes. I’m tossing around the idea of maybe just … We just ask the same question or the same set of five questions and we just answer it again after each pint or each hour goes by. Towards the end, it could be more of an M-rated podcast but we’ll see how that goes. One of their previous guests, Patrick Hamann is very keen to see us through that. He showered us with support on the Twitter’s.
Before I get into this week though, I just wanted to mention the sponsor for this week. It is MailChimp. MailChimp, I use every week. I love MailChimp. If you are thinking about doing any kind of newsletter or communication, just use MailChimp. Forget sending e-mail. Even if it’s a small group of people that you’re sending it to like you have a workgroup, just say, you send around weekly links.
In fact, I encourage you to do this if at your work, there’s no one in your team or your entire organization that is sending around a weekly e-mail to brief people about what’s happening in the world of the web or the world of the design or … This is about responsive design so obviously, you’re listening and you’re interested in responsive design. If you have people that aren’t aware or if you’re an organization who’s not receiving e-mails about this sort of stuff or there’s no one entirely sending e-mails to brief people on what’s happening in the world, I highly encourage you to be that person.
You’re listening to this so you obviously enjoy learning new things. Whatever you learn, the chances are no one else in your organization [00:06:00] or in your team knows as much as you because you are taking the time out of your regular work day to listen to things like this and read blog posts. Share that knowledge if you can.
If you can share that knowledge, instead of just sending an e-mail around, just opt in everyone in. That’s kind of spammy but maybe send a couple of e-mails to begin with or just ask if anyone’s interested. Opt them in to a MailChimp list. Sign up to MailChimp.
Write your newsletter through MailChimp. It will still send from your e-mail address. It will still go to all your company addresses but at least then you can see who’s actually opening the e-mails, who’s clicking on them, if anyone’s just not like worrying about opening them at all. You see people. They can unsubscribe if they don’t like what you have to say.
MailChimp is so awesome. It’s really, really simple to use and it’s free. If you’re in an organization of less than 2,000 people, you get a free account up to 2,000 users. You can send, I think it’s 10,000 e-mail a month. Even if you have 1,999 bottles of beer, that many people at your company, you could still send once a week and stay under the 10,000 threshold. It’s immensely useful.
Check out MailChimp. Thank you very much MailChimp. They actually make my job a lot easier each Thursday night when I’m writing my newsletter. The system’s just awesome to use. You should totally check it out. Anyway, thank you to them for sponsoring this podcast.
What I thought I’d do this week is … It was my incredibly fortune. I met a guy called Oliver Lindberg in Dusseldorf early this year when I went for the Beyond Tellerrand Conference which is a fantastic conference. I recommend [00:08:00] anyone go to the Berlin 1 which is coming up very shortly if you can. I got chatting with him and we had some philosophical chats around responsive design and for instance, had a really good time. It was a great conference.
Anyway, I received an e-mail from him a couple of months ago and he very generously asked if I could contribute to the magazine that he is the chief editor for which is Net Magazine, a super fantastic magazine. I was really fortunate a few years ago to pick up one of their Net Magazine awards for a side project.
If you’ve ever seen the ami.responsivedesign.is, it’s a series of devices. It’s four different devices where Mac are entitled. There’s an iMac, MacBook , an iPad and an iPhone and basically you type your URL that you want to test, you hit enter and it displays your website inside each of the devices. I built it because it saves me time. The newsletter I send out each week always has a featured image in the header. It’s always about responsive design that have been released that week or one that someone had made me aware of which I thought was quite cool.
It took me forever to resize my browser, take a screenshot, resize my browser again, take another screenshot and then put all of those into Photoshop and then I’d crop them if they would need it and put them inside. I had a whole bunch of browser, Chromes, the outline of browsers and then I have to adjust the layers to make sure it was in the right layers so it wasn’t front of it but it wasn’t behind it. It wasn’t in front of another device.
Then, if I wanted to move them around, I had to move combined layers and move it. I’m terrible at Photoshop. That process used to take me 15 minutes to half an hour every time I wanted to do it. I spend some time and [00:10:00] do this thing, the Am I Responsive thing and I got no word for it. I was really chuffed and very, very surprised but I think it’s because of you guys that listen to this and the people that read the newsletter. You voted for it which was great. That’s how I managed to sneak in the award.
Anyway, he very kindly asked me to make a contribution towards it and that was published this month. Go out and get edition 260 of the Net Magazine. It’s on the cover. It’s got responsive design, a pro’s guide to responsive design. In it, it goes through some of the things that are very interesting about responsive design.
What I’m going to do now is the article that I ended up submitting was a cut down version because of print. You can’t go on forever. I tend to woffle. This is a perfect example of how I tend to woffle. We haven’t actually covered anything and we’re probably already 10 or 12 minutes into the podcast. I’m sorry for anyone that wanted to hear things straight away but you will be used to it by now.
Anyway, I highly recommend go and pick it up because the magazine is actually really cool. It’s got whole bunch about SaaS as well, there’s some design challenges where a bunch of designers have to solve problems. They submit a design. It’s a great magazine.
Sometimes, it’s nice to flick through a physical copy of a magazine. Totally, you could learn everything online, read everything that’s in the magazine on a blog at some stage. I know they’re going to publish the articles from this edition over the next couple of months. Sometimes it’s nice just to flick through a magazine and have a reading and give your eyes a rest from the screen [00:12:00].
I highly recommend go pick it up because there’s a lot of stuff in it. It’s got this stuff as well so you’ll be able to have this actually printed down so you can re-reference it instead of trying to find it in a long woffly podcast. What I thought I’ll do is I’ll just read through the topics that I spoke about as part of the article. I’ll just have a quick drink.
This was about advanced responsive web design. Now, that we’ve mastered flexible grids and media queries, it is time to take our responsive design to the next level. To begin with, responsive web design is incredibly simple. It’s flexible grids for the layout, flexible media, images, videos, iframes and then we apply media queries to update those measurements to best arrange the content across any viewport. You have one source for that content and millions of viewports. It doesn’t matter how many we have. We are able to serve for every single one of them.
Now, in practice though, it seems simple. In practice, we’ve learned that it’s not really that easy. Really small issues crop out during every project and that keeps us scratching our heads and occasionally carving trenches with our fingernails into our desks as well.
Now, ever since I began creating the Responsive Design weekly newsletter, I’ve been really fortunate to speak with yourselves, our listeners and also feature your experience each week. With a few hundred great tips, I wanted to know … I’ve got a few hundred great trips which I already say but I wanted to know now what you wanted to find out more about it.
Now, with those topics in mind, I ran a series of podcast which were in fact our last six podcasts except for last week’s was … I asked industry leaders, the people that I spoke to as part of the podcast what their advice was around the advanced responsive topics.
As you will have heard, their answer was unanimous. Focus upon getting the basics right before you even start worrying about the new and exciting and advanced features within responsive design because by taking things back to the basics, you’re able to build up a robust interface for everyone and you’re able to layer upon that robust interface or the features that the device or the context will allow you to shine through at the appropriate time.
What are these advanced techniques I can hear you asking? Stephen Hay summed it up the best when he told me as the final part of our interview what the best technique was. In his words, the ultimate responsive design technique is to start off by not using any advanced responsive design techniques. That’s it.
Start from the basics and go from there. You start with structured content and build your way up only adding in a breakpoint with the design breaks and the content dictates it. That’s it. True [00:16:00] words have never been spoken like that really is it. Start focusing on your content. Build it up at breakpoints where it matters.
In the article, we’ll still look at the responsive design techniques but to start off with, we’ll look at the basics and then look how you can layer upon that experience with complexity as the situation allows. Responsive images or fluid media was a key part of responsive design when it’s first defined by Ethan, we’d set a width of 100% and a max width of 100%. That still works today. There’s no problem really with that implementation.
These days, the responsive image landscape has become a lot more complicated. The reason for that is because we’ve increased the size of our screens. We’ve increased the density of the screens and the number of devices that we support. We’ve craved greater control of the images that were being provided on the screen.
The three concerns that cover of this responsive design image problem was defined by the Responsive Images Community Group. Now, the first one was the kilobyte size of the image. We’re sending over the Ys how big it was. The next was the physical size of the image we’re sending to high DPI devices. The third was the image crop in form of art direction if we were serving images, the same image to multiple or the same content to multiple different viewports.
Now, your advice with a lot of help from you guys, the community has done the majority of the work for the Blink implementation which has gone live now. We’re in Chrome 38 now. It’s out and about. Opera released their browser based off the Blink rendering engine as well. That’s supporting Firefox [00:18:00] releasing extremely soon if not, already by the time … No. It won’t be already, end of October or November I think it is.
WebKit I think are working towards it. They’ve implemented source set but not sizes yet so you can do your 2X but you can’t put in sizes and Microsoft. Now, they’re coming along … They don’t usually open up what they’re doing too much but there has been hints around them contributing towards IE and making responsive images based on the Blink implementation, a reality which is awesome.
Safari will ship source set and sizes and the picture elements though for Safari isn’t yet implemented either. There is a great tutorial or great Screencast with your advice on the responsivedesign.is going to the articles or use the search and look for your advice on responsive images and check that. He goes through it in a lot of detail.
With the arrival of anything new to our web development process, it can be difficult to get started. Something new, we don’t like change. It can be hard. The markup itself can be really, really confusing. I stepped through the markup. We start with the image tag, IMG and we declare the source, SRC, the same way that you would normally do an image tag. Declare the source and I would declare the smallest version of your image. In my example, I have host-350.jpeg because it’s 350 pixels wide.
The next, we declare all the image sizes in source set so we use SRC, SET is equal to and then we put all of the different sizes that we want to have an option of loading [00:20:00]. For example, host-350.jpg is 350 pixels wide. I put the file name, space 350W to indicate to the browser this is how wide the image is.
350W is effectively telling your browser this is 350 pixels wide, comma because I’m going to add another image and that’s how we separate our images within the source set, declaration and then we say host-500.jpeg space 500W because it’s 500 pixels wide.
Do the same thing, host 1024 space 1024W and finally, the one we put in there is host.jpeg which is the latest version of the image and that is actually 2,000 pixels wide so I put 2000W.
Then, so you declare for source set, source set equals quotes host 350, 350W, host 500, 500W, host 1024, 1024W and the quotes. That’s the source set. You’ve told the browser what different versions of the image you have and what size they are.
The last one is sizes. We see you say sizes are what tell the browser about your site layout. You can say here, what we’re going to say is that for any viewport that is 64Ms and bigger using image that will occupy 70% of the viewports so that’s normal. You think of a blog layout. Once you stretch past sort of 64Ms which is just probably past the landscape version of the tablets and we’re talking Apple here, just think iPad, just past the landscape views, I think it’s that. It’s 64M.
As soon as you changed that around, instead of doing a single column, you probably want a two-column layout. This is very general. You probably want a two-column layout and you’re probably going to have one column at 30% and one column [00:22:00] at 70%.
For the sizes, what you declare is you put sizes equals quote and then in brackets, you put min-width64M. That’s your media query. You’re saying the minimum width is 64M. Then, after that, you put 70VW, 70 viewport width so 70% of the viewport is how big in area the image will be out with to occupy at a minimum width of 64Ms. Right now, if the viewport isn’t … and then comma, where you declare the next one. If the viewport isn’t that big, then for any viewport, that’s 37 and a half Ms and bigger using image that occupies 95%.
Then, we put in brackets, min width around brackets, min width 37.5 bracket and then we put 95VW because we wanted to take up 95% with the guess that we have 2 1/2% padding in the design. Then, if your viewport’s even smaller than that which is crazy small, then we just put 100VW at the end. We don’t have to declare a width or a media query. We’ll just put 100VW which means just use the full size of the screen. The last thing we add is an out text for in case nothing loads.
That’s how it’s laid out. This is why you need to go and buy the magazine because in your head, that didn’t probably make sense at all. Fortunately, this will be transcribed so you can actually, you might be able to see that or I might put the code example into the show notes but probably not. You should go buy the magazine.
From a performance point of view, you can put min width and max width as the media queries. Now, as we know mobile first, if we use a min width, it’s generally the [00:24:00] media query that we use when we do our layouts. It doesn’t matter with responsive images. There’s no set Y. You can use max width or min width but remember, it will use the size that matches the first query. It won’t go through all of them and match the best query. If the first query fits, it will use it. Just think about that when you use max and min width.
When you’re beginning with the picture element though, this particular element, this is just the image tag as well, not the picture tags. The picture’s more used for art direction which I’m not going to cover. This is done within the image but we still refer to it as the picture element. Jason [Groves 00:24:47], he wrote a really great post to that, how we need to change the name of the spec because picture is very misleading.
Anyway, when you being using this picture, image implementation, remember that you’re hard coding the sizes, attribute to be directly defined against the layout of your site. Now, this might cause images moving forward when you’re redesigning your site later having to revisit all the image or picture tags and redefine it all again. Just be careful about that when you’re going through and doing this.
This could be overcome as part of a build process. If you’re using a CMS, you can … WordPress already has a plugin to help by defining the source set on the WordPress standard image varieties. It then allows you to declare sizes in a central location. In the pages generated from the database, it’s swaps at any mentions of the image tag within the content area and replaces it with the picture implementation proposals and the sizes that you’ve defined. You define it in one area, it affects everywhere.
The basics for that, if you think about where you really [00:26:00] need to … When we talk about responsive images, go back to the very basics. Think about whether or not you really need to include an image at all.
Don’t put a big bowl of salad. Just put the word salad. Don’t load things that don’t need to be there just because it looks all right. It should add some meaning to the content rather than, “I’ve got a blog. I need a header image.” Is it telling part of the story? Is the image core content or is it decorative? One less image will mean fast load times for your website.
The next thing with basics is have you optimized your images? Use something like ImageOptim and have you set expire headers for your images as well? Make sure they’re being cached for the right amount of time so you don’t download them every time you visit the page.
You can also use picturefill which is a polyfill for the picture element that was developed by Scott Jehl in the Filament Group. He has an excellent article about that as well. It has like some double download issues with Chrome, with the Chrome implementation and picturefill. I’m going to pull picturefill for my site because I would be unhappy to serve up the smallest image for every single screen if they don’t support the picture element or the proposal because I’m not an image-rich site. I just simply don’t care. It can look a bit grainy. That’s fine.
The advanced stuff, lazy load your images. There’s a bunch of lazy load plugins around. Use HTML image elemental sizes and HTML picture element for feature detection. This is shipped with Modernizr. If you’re using Modernizr, you can use that feature to detect whether or not sizes and picture element is supported. I have links for the picture plugin with WordPress and some great articles as well. Buy the magazine. You’ll find that.
Now, Patrick Hamann who’s the technical front end in late at the Guardian, he’s broken a thousand millisecond barrier at the Guardian which is an amazing feat but introducing a mixture of front end and back end techniques. The Guardian’s approach is to ensure that the required content to the article itself is delivered to the user as quickly as possible and within that 14 kilobyte magic number.
The way that they worked this is let’s just say a user comes from Google. They click on a new story. There’s a single blocking request to the database for the article. It doesn’t go to the … WordPress goes to the database and goes, “Oh, give me the article and then I’ve got yet another related post plugin.” I’ll query all the related post and then what are the latest posts and then what are these, what is that? Then, it all, like I said [00:30:00], all those database requests got off and get done and then it sends all of the content back.
With Guardian, it just requests one. It gets the content for the article and brings that back. All the rest of related stories and everything else that you see on the page, they are made as lazy loads are, conditional loads I think. It does the single blocking. Then, the HTML is loaded containing the critical CSS.
The critical CSS is the CSS that’s required to display the top part of the page, the page that is within the viewport. Then, it cut the master processes undertaken and any conditional elements based upon the user device features are loaded and any content related to supporting the article itself like related article images or article comments and things, they’re lazy loaded into place after the page has rendered to begin with.
Now, using that approach means that the heads, like I said, the information between the two head tags, opening and closing head tags, for them, it’s like 232 lines because of the CSS but it’s not much. It’s very lightweight when you Gzip and you’re sending it down the wire. It helps them break the thousand millisecond barrier.
Their deployed process contains test to ensure that any changes to the design in the back end doesn’t break that 14 kilobyte barrier as well. If it is, then they send it back and tell them that you can’t have that redesigned.
The next one is around conditional and lazy loading. Conditional loading, I had this question what’s the difference between the two. Conditional loading is improving the user’s experience based on the device features [00:32:00]. Tools like Modernizr allow you to test these features but you should be aware that sometimes, the browser will say that it offers support but it doesn’t actually mean it offers full support.
It might say, “Yeah, sure. We support SVGs but no, not if you want to do that with an SVG. We don’t support that. That doesn’t work at all.” I can’t think of exact example because I took it out of the article but just be mindful of that.
Instead of doing the feature detection with Modernizr, you could use the cut the mustard approach. Now, that kind of approach is putting a whole bunch of devices into a couple of categories, one, your not-so-good category and the other is your amazing category and then rather than detect against every single one of the possibilities that doesn’t have this and this and this and this and this.
What cutting the mustard does is it doesn’t have these two or three core things that are vital for what we’re going to deliver you, no. Here’s the content and nothing is special. You get what you are after. If you do have those two or three awesome browser features, then here’s this amazing awesome website, still with content but a whole bunch of released stuff around it as well.
Another approach might be to hold offloading [00:34:00] something until the user shows intent to use that feature. This would be considered conditional based upon the user’s context. You can hold offloading inside the social icons until they use the hovers or touches the icons and then you can load it in to allow them to share or to show how many other shares have already occurred.
You can also avoid loading an iframe for Google Map on smaller viewports when they’re more likely to prefer linking to the embedded map interface they have within their phone, not embedded but they will have their own map interface as well.
Lazy loading, on the other hand, is defined as something that you always intend to load on the page, images that are part of the article or comments or other related articles but it doesn’t need to be there for the user to start consuming the content. Instead of holding off and loading images, the page loads a lot faster and you don’t punish a user for using up their bandwidth on their phone if they don’t scroll all the way down and see your three megabyte image of a leafy salad.
Now, for the basics for performance, enable the Gzip of your files. Set expire headers on all set of content. Lazy load where you can and there’s a link to the lazy load jQuery plugin as well. It’s great.
For advanced techniques, if you set up something like Fastly or CloudFlare, CDNs are able to deliver static content to the users faster than your own server. The idea behind this is Iike I have a server in New York which runs the responsivedesign.is site. It’s Digital Lotion but you are everywhere.
You’re in England. You’re in Australia. You’re in New Zealand. You’re in Germany, in Spain, in France, in India [00:36:00], Indonesia or in Japan and China. I can’t deploy service to all, every single place there. I run CloudFlare. What it does is CloudFlare has service all around the world so when you request a page, it doesn’t just download it from the New York server. It downloads it from your closest server. You’ll get the page faster. It’s awesome.
I did an earlier podcast about HTP 2. If you want to learn more about that, you can go check that out. CloudFlare is free by the way for basic accounts. It’s really awesome. If you’re not using it, you absolutely should be. Sign up for it. Use it.
Any of those sites though is that they have a Google Analytics app to make sure that your analytics still work fine. I got zero bounce rates when I enabled their app. Nothing else was wrong but zero bounce rates, I thought I was doing such a good job keeping you on the site that no one bounced off but I wasn’t. Be careful of that. Test that out.
SocialCount allows you to conditionally load your social icons. Check that out. That’s a Filament Group thing. Brad Frost built out an awesome code pen for static maps with a Google API. There’s also another AJAX included pen [00:38:00] by Filament Group. It’s part of a package called SouthStreet which is very cool. You should go check that out on GitHub as well.
At the moment, I’m half the way through. I’ve hit responsive typography which is when I start talking with Jordan Moore. What I’m going to do is we’ll turn this into a two-part. I’ll wrap it up here because it is just me bellowing on and we’ll all continue the discussion around the pro responsive design take next. If you want to know more, you don’t want to wait till the next time I’m missing a guest. You know what to do. Net Magazine issue 360, go and get it.
In fact, I’ll be running a promotion for the Net Magazine around Christmas time where you can get a discount and you can pick up a bundle. For those of you that would like to get your significant others, brothers, sisters, mothers, fathers, sons, daughters, cousins, someone close to you for Christmas, if you want a good gift, you could get them a Net Magazine, a subscription to that. It’s cool. I love that magazine.
That’s it. Thank you very much this week for tuning in. Thank you very much to MailChimp for the sponsorship. Next week is responsive … Sorry. Next week is responsive. The Web Is is next week. I’m really looking forward to that. I cannot wait.
Next week edition should be a bumper edition. I do apologize in advance if I offend anyone or still offends anyone or if anyone from the recording studio at the bar, offends anyone but it should be a fun podcast with lots of truths spoken about responsive design. We might focus upon experiences with clients in responsive design as well [00:40:00]. We’ll see how we go with that.
Again, thank you very much for listening. My name’s Justin Avery. If you’re not subscribed to Responsive Design Weekly, go to responsivedesignweekly.com and subscribe and start responsive. See you next week guys and girls. Bye.
Hi, everyone and welcome to another edition of Responsive Design Weekly Podcast. This week we are up to episode number 24. Now, for those of you that might be hoping for a special guest this week, I’m sorry. It is just me.