May 2013
4 posts
Device fragmentation is a tenacious problem for...
Device fragmentation is a tenacious problem for content providers and advertisers. The rapid adoption of smartphones and tablets, the growing popularity of internet-connected TVs and the promise of web-enabled everyday devices like watches and eye glasses means digital content will need to be served to an ever-increasing number of screens, according to a new eMarketer report, “Responsive Design: A...
The Debate Around Responsive Design in Mobile... →
3 tags
Common Patterns in Styleguides, Boilerplates and... →
A perfect place to start when creating your live HTML Style Guide – Cloud Four documents interface patterns within popular responsive frameworks.
2 tags
What are Responsive Websites made of? →
Guy Podjarny deconstructs the performance of 500 responsive sites and finds that:
The responsive sites tested (1.2MB) were lighter than average (1.4MB)
The average page size and requests (41) don’t vary much across screen sizes.
April 2013
5 posts
10 Developer Tips To Build A Responsive Website... →
4 tags
Responsive Design Workflow →
A new book by the master of responsive workflow, Stephen Hay.
2 tags
8 Guidelines and 1 Rule for Responsive Images →
Jason Grigsby’s ideal scenario for responsive image processes and tools.
2 tags
Responsive Deliverables →
Dave Rupert talks about the deliverables required to create modern modular web systems.
2 tags
Media Queries in SVG images →
Did you know that you can embed media queries inside SVG images? Interestingly, the media queries react to viewport of the image itself, not the viewport of the browser.
March 2013
6 posts
3 tags
Rock Hammer, a curated, responsive project library →
Andy Clarke’s latest project:
A curated project library for Hammer For Mac. Rock Hammer contains baseline typography, plus styling for common HTML elements including images, forms and tables, as well as navigation, responsive modules and widgets.
Although, it’s made for Hammer for Mac, you can still use it without.
4 tags
Responsible Web Design →
Jordan Moore on the elements of Responsible Web Design – context-sensitive interactions, performance and progressive enhancement.
2 tags
Responding to Voice →
Jordan Moore’s latest experiment – a website interface that can respond to voice commands!
2 tags
Interactive Style Tiles →
A wordpress theme to help you create and present your StyleTil.es in the browser.
2 tags
Prioritizing Performance in Responsive Design →
Brad Frost with some tips on speeding up websites.
2 tags
Logical Breakpoints For Your Responsive Design →
Tactics for setting breakpoints using classic readability and typography theory (Smashing Mag).
February 2013
13 posts
“As people continue to use an ever increasing number of devices to get online,...”
– LukeW | Impact of Responsive Designs
3 tags
Prototyping Responsive Typography →
Last year, Viljami Salminen wrote a brilliant article sharing his responsive workflow. Today, he explains in depth, a new design phase he’s been doing:
The new design phase is somewhere between prototyping and visual design phases, and I think it might just be the most important phase in the whole design process. I call it the “Typography Prototyping Phase.”
1 tag
It Doesn’t Matter →
Brad Frost coins a new term “the gradient of adaptation”:
Adaptive interface techniques sit on a gradient. Some interfaces consist of elements that don’t have a lot of moving parts, while others require more thought and care.
2 tags
Responsive, horizontal multi-column layouts →
An experiment by Jordan Moore to move beyond the y-axis.
In an infinite canvas, it seems like a shame that 99.9% of the time we only make use of the y-axis. You could say “That’s what people are accustomed to, why change that?” - then why change anything? Doing the same thing over and over again isn’t going to push our medium forward. Asking difficult questions of the web...
2 tags
There is no breakpoint →
Ben Callahan from Sparkbox on inline media queries for components acting independently of system wide breakpoints.
By placing our media queries inline, immediately following the smallest styles, we can group styles by the components they impact and not worry about following a specific set of breakpoints.
2 tags
Designing In The Transition To A Multi-Device... →
A comprehensive Smashing Mag article by Francisco Inchauste – in this transition phase, look at what others are doing but choose your own path when designing responsive sites. I also love this advice: “designing responsively doesn’t change the fundamentals.”
3 tags
Improving Your Responsive Workflow with STYLE... →
Luke Brooker on the evolving responsive workflow and automating style guides to reduce friction in their creation. This presentation is in reveal.js so press the down keyboard arrow to delve deeper into categories.
3 tags
You like apples? →
A case study on O’Neill Clothing’s retrofit responsive site by Electric Pulp. iPhone revenue doubled and Android revenue almost went up by 6 times!
Healthcare Responsive Examples →
2 tags
Responsive Typography →
The text on the page resizes based on the distance of your face from the screen (and webcam). Proxemic interactions form part of adaptive web design which moves beyond the front-end techniques initially described in responsive web design.
Where to Start →
Trent Walton on where to start with responsive web design.
Responsive Tables →
Aaron Gustafson’s approach to creating responsive tables using HTML data attributes and CSS generated content. See the Codepen demo.
Ditching responsive design →
interesting perspective on when to consider other options … know your audience!
January 2013
24 posts
“Introducing modern.IE -
A new set of tools to help you support modern and...”
– Microsoft
The New Republic Aims to Broaden Its Audience →
The app and Web site have new, technologically friendly features, like audio versions of articles and the ability to let users read pieces on multiple devices, continuing on one at the spot where they left off on another. via NYT
Vox Product: An inside peek into the Polygon... →
The New Rules of the Responsive Web →
Matthew Carver advocates making responsive sites which focus on the user by abstracting content from design.
3 tags
Fashionably Flexible Responsive Web Design →
Andy Clarke’s presentation from his responsive web design workshop yesterday. It covers his “post-PC” design process, responsive patterns and implementation tips.
1 tag
The Annual Report Goes Responsive →
Everything is going responsive—even MailChimp’s Annual Report / Year in Review.
1 tag
Preparing Websites For The Unexpected →
To ask “what makes content mobile-friendly?” misses the point. Ask instead, “what makes content flexible?” and we address many problems at once.
1 tag
The responsive web will be 99.9% typography →
Oliver Reichenstein famously stated that “web design is 95% typography”. Welcome Brand argues that typography and simple layouts will play an even bigger role in responsive design since “anything else will ultimately end up being too complicated to remain device agnostic”.
29 new inspiring responsive designs on the web →
The Next Web has a nice roundup of some solid designs. They do lose a few points for counting themselves in the list and for making it a slideshow, but what’s there is certainly still worth a click.
Using Responsive Design To Rewrite Your Sentences →
Here’s another friendly reminder that Responsive Design isn’t just about media queries. It’s about taking a look at all of your content and UI elements and making sure they’re appropriate for the medium.
“here are 10 examples of ecommerce sites built using responsive design…”
– 10 brilliant examples of responsive design in ecommerce | Econsultancy
Responsive Email Templates →
A Comparison of Methods for Building... →
“If you’re using pixels as part of your responsive designs you’re probably making...”
– Simplify Responsive Design by Embracing the Flexible Nature of the Web | Webmonkey | Wired.com
Flexible Foundations →
A Comparison of Methods for Building... →
There’s a debate over which technique of creating mobile-ready websites is the best.
Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).
A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS...
How to Create Retina-Caliber Favicons →
2 tags
Designing a responsive, Retina-friendly site —... →
@stammy has a nice overview on his iterative process in the redesign of his site.
Why 2013 Is the Year of Responsive Web Design →
1 tag
Responsive Design for Apps — Part 1 →
Jason Grisby explores whether responsive design make sense for apps. Yes, yes it does!
3 tags
Skinny Ties and responsive eCommerce →
Great post covering a successful redesign of both the brand and commerce process. Excellent results as well:
3 tags
The pros and cons of responsive Web design →
A good piece discussing the opportunities for change in commerce design planning
