Responsive Design Weekly #64

resize-me

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…

Headline

Responsive Interview with Froont

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.

RESIZE.THATSH.IT

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?!?! ;)


Sponsor

Time is running out!  Move Beyond the Desktop Today and Save $100!

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! Breaking Development Conference


Articles

Sizing (Web) components

Resize your web components responsively by setting everything in EM’s and changing the size simply by updating the base font-size.

Reimagining The Way Websites Are Built

Brad Frost talks to Keynote about responsive design with a focus upon performance.

Engineering works: Transport for London’s responsive website redesign

A great overview of the TFL beta site, I love love love this site.

Responsive Design on Mobile Devices Not a Panacea

CMS Wire take a stab at the differences between something that most of us do on our mobile devices, email and banking.

Google Glass Browser, HTML5 and Responsive Web Design

A look into how the new google glass web browser handles websites. Good news is that it honours the width=device-width viewport declaration.

Mastering CSS Layout with Flexbox

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.

Mobile Web Problems and How to Avoid Them

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.

A Designer’s Guide to Grumpicon

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

RWD Doesn’t Replace Native Apps – Publishers see role for both

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.

Responsive design and server-side code

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.

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton

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)

TOOLS

ReSRC.it

ReSRC.it delivers responsive images on-demand, direct from the cloud.

Mail Designer Pro

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.

Bring Your Design Changes Into Focus: Introducing TwentyTwenty

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.

CSS Media Queries for iPads & iPhones

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 ;)

Test Responsive Web Design With Our Free Tool

Dimensions features a “Preview Mode”. This enables you to preview your design in various types of devices.

TUTORIALS

Centering Percentage Width/Height Elements

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.

Responsive Web Design in Sass: Using Media Queries in Sass 3.2

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.

Blueprint: View Mode Switch

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

Blueprint: Responsive Icon Grids

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.

PRESENTATIONS

CSS3 for Responsive Web Design (full day workshop)

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.

Pragmatic responsive design

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

MEETUP(S)

RSVP for Refresh Boston

Live in Boston? Want to learn responsive? Hmmm, however about a presentation from THE Ethan Marcotte!!!!

Portland Sass & Front-end Meetup

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).


Feature Sites


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 an 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.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>