Hi and welcome to issue #64 of responsive design weekly. This week’s image comes from our headlines and is a pretty funny little game that pokes funs at folks like you and me moving our browser window around each time we find a new website.
This week is the final chance to get a discount to the Mobile Web Design Beyond the Desktop conference hosted by team from Breaking Development. They have an amazing line up of speakers so if you’re in the San Diego area you’d be crazy not to get a ticket.
Alright then, lets get onto the links…
A few weeks ago I managed to get in touch with Anna & Sandijs from Froont.com. Froont is a great new tool that allows you to build responsive layouts in the browser and does a pretty good job at it as well. Check out the interview.
This is brilliant. I had to bail once I hit over 100 seconds because I had this newsletter to write. Some of the images, although cartoons, could be considered risque (by others, not me) so do be a little mindful. Plus, why are you playing games at work?!?! ;)
Join 200 other mobile website designers and developers at BDConf in San Diego for two days of mobile inspiration and a day of optional workshops. Speakers include Luke Wroblewski, Ilya Grigorik, Divya Manian, Jason Grigsby, Eric Bidelman & more!
Use discount code SD13RDW & save $100 — Register today!
Resize your web components responsively by setting everything in EM’s and changing the size simply by updating the base font-size.
Brad Frost talks to Keynote about responsive design with a focus upon performance.
A great overview of the TFL beta site, I love love love this site.
CMS Wire take a stab at the differences between something that most of us do on our mobile devices, email and banking.
A look into how the new google glass web browser handles websites. Good news is that it honours the width=device-width viewport declaration.
An excerpt from the Sketching with CSS book this article takes you through Flexbox before showing you some real world examples of how it can be used on the front end.
Brad takes us through a range of terrible web experiences on the mobile and how to overcome them. Warning…. there’s a lot of them.
The other week we featured the Grumpicon web app. This week we’ve got an in-depth post on how a designer was able to introduce it into their workflow
It’s not all RWD fan-fare here (but there is a lot of it). This article explains why it’s not always the be-all and end-all, and why there is always going to be room for other options.
This is an interesting approach to RESS using PHP to pick up the screen resolution and then deliver content based on the result. I wouldn’t recommend using this though, try and stick with the one single source of content approach where ever you can. Thanks to Ed de Jong for sending it through.
This is a great overall comparison against Responsive CSS Frameworks from vermillion design.
(We’re running this again because it was updated a few months ago with the release of the next iterations of Foundation and Bootstrap)
Tools, Tutorials, Presentations & Meetup(s)
ReSRC.it delivers responsive images on-demand, direct from the cloud.
I came across this a while ago and was lucky enough to get a free trial of the product. I’ll be having a play over the weekend and hopefully have a little bit more to tell you about next week.
TwentyTwenty is a responsive slider JS plugin that allows you to easily compare two images in the same screen space. Confused? Yeah well click through and check it out especially if you’ve ever had to show design changes.
Before you click through to use this, remember that you should be building your sites to be responsive for ALL screen sizes and not focussing on specific devices. Right, now that has been said you can go and enjoy ;)
Dimensions features a “Preview Mode”. This enables you to preview your design in various types of devices.
Trying to position an element in the middle of a page is tough, especially when you don’t know the height and width of the element. Chris has found transform can help save us.
An oldie, but something we’ve never covered before. Get started all over again with some easy ways to get going with media queries in Sass.
A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive
A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.
Check out Andy Clarke’s slides from his RWD workshop. There’s no ‘real’ information you can learn from the slides, but if you have an idea about you’re doing it’s a good guide to go through and see how your process stands up.
This week @stephanierieger‘s presentation came back on my radar after tweets from@StephenHay and @StuRobson. If you haven’t already seen it, it’s worth a look. If you already have, it’s worth another look
Live in Boston? Want to learn responsive? Hmmm, however about a presentation from THE Ethan Marcotte!!!!
Sass isn’t always about responsive design, but these guys promised me this meetup was going to be all about it (or at least a little).
That’s all we’ve got for this week, I hope you found one or two things that helped you out today, as always if you’ve written an article built a toolmake sure you reply to this email or shoot me a tweet and let me know. I’d like to say a big thanks to the BD Conferences for sponsoring the newsletter for the past 12 weeks. If you’re interested in supporting the newsletter and would like an exclusive weekly spot that reaches more than 10,000 readers please get in touch.
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.
Leave a Reply