Welcome to week #50!
Oh wow, we’ve reached a half century, and in another 2 weeks we’ll be celebrating the anniversary of the very first newsletter that went out to a whopping 18 users. I decided to write a blog postabout how the whole thing came about and to give you a better idea about my weekly process.
Ok lets get into those links
Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way.
The online, live 3-day conference about responsive web design covering everything from performance, workflow, and much more! Register now w/ 20RDWEEKLY and save 20% off.
Typecast is a fantastic tool for designing your typography, and they hit the nail on the head with a content/typography first design.
SVG’s, backgrounds, fav icons, this article goes into detail about implementing sites with retina considerations
A few techniques to help you along when designing sites for retina displays (mostly revolve around the use of media queries
When I first saw this I have to admit I thought “Oh no, not another link-bait targeted bashing of RWD for hits”. Fortunately Alvaris does a great job at pointing out some common issues with RWD but goes on to explain why they are issues and how you avoid them. Hoorah!
Jordan believes that it can be a good thing to add an option to switch off responsive design and proposes another icon as a visual aid. As I’ve said in the past I’m not a fan of providing something that covers a poor implementation, instead just spend more time improving the design.
This is back to the “Should there be a responsive opt out option”. I don’t think so, but hey if there was
Long and skinny viewports, like an iPhone in portrait orientation, are a natural fit for websites. Their width is perfect for single-column layouts, and their height works well for seeing a whole block of content at once. Turn that sideways, and things get a little weird.
Divya takes a look at why we’re using so many decimals places when it comes to percentage based widths. why, Why, WHY?
There’s a great tutorial below about connecting CSS to scss in Chrome Web Development tools, but this is the future.
Sass Source Maps are the natural next step in tying CSS to the written Sass, but rather then using the comments within the CSS generated by Ruby it uses a JSON formated map that explains the tree.
Scott takes a look at his workflow and wonders whether his SASS/Compass only plugins are a bad thing for the community. I’m on the other side, I think you should build amazing things with the tools that best allow you to achieve your goals, then open that up for people to improve/copy in other areas
You can use rem to scale some elements in a document while leaving others in place. An interesting guest post on CSS Tricks takes a look at this and other options
This post looks at the theory of using a combination of min/max width along with pixel density to get a faux reading for physical device size.
Tools, Tutorials, and Workshops
A great way to explain responsive design to clients without putting up real websites. Simple move the slider bar along to see how the content reacts.
This Sass plugin allows you to work with unicode a little easier in your css.
A nice little tutorial about using Wirefy to build responsive wireframes. Personally I would approach Foundation and Bootstrap in the same way.
Over the last six months in particular, responsive email design has begun to gain acceptance, with some verticals adopting the practice more quickly than others.
If you’re looking to give your users an eject button from RWD then this is the post for you.
I really like 456 Berea Street but totally disagree with the approach here. I think it’s a stop gap solution that is an attempt to hand hold where that really isn’t necessary. The only argument I could ever agree with is some customers not realising that the website is the same because of the layout difference, but I also think that comes down to inconsistent branding across viewports and user education </rant>.
Now you can find that pesky problem you see in web developer tools and trace it easily back to your scss file.
A great technique for including blockquotes without adding additional markup or repeating your content for screen readers. This also allows us to hide a pull quote if it’s not necessary on other viewports without feeling dirty.
In this workshop Richard Rutter will describe how to make web typography work across any number of different devices, and how it can and should be the basis of any responsive web design.
A one-day workshop in Providence, RI with hands-on learning for how you can incorporate responsive web design into your current projects.
Interdisciplinary By Design With Sara Wachter-Boettcher, Aaron Gustafson & Jason Cranford Teague
For those of you in the UK missing some responsive workshops we’ve got some good news. Brad Frost is heading to London in June to run a full day responsive workshop, highly recommended.
This week our feature site is Cotton Bureau. The site is brought to us by the guys that run the United Pixelworkers site and is a beautifully simple design.
Please never do this on your site, but a funny little quip from Andy Clarke. Maybe instead make a full animation rotation so the content is still usable.
Oh dear. A responsive ad. Not a responsive ad, but an ad about a responsive site.
That’s all we’ve got from this week. If you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.
Thanks for subscribing and making it all the way to the end!
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.