background preloader

Responsive Design Workflow

Facebook Twitter

Mobile-myths.pdf. Content Parity. Whenever I hear “One Web”, I can’t help but think of Rastafarian web designers.

Content Parity

“Ya Mon! Let’s turn on some Marley and write some Javascript. One Web!” (This is partially due to my bizarre imagination, and partially due to my staggering lack of cultural competence.) Instead, whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for. It’s a myth that mobile users don’t want to do everything that desktop users do.

This is a realization of the One Web principle, whereby content should be accessible on a range of devices irrespective of differences in presentation capabilities and access mechanism. For those of you fell asleep while reading that blockquote, it’s basically saying it’s alright to optimize the presentation of content as long as the content remains accessible in some way, shape or form. Get what you ask for No Stairway? We're too rich for your device. Tips, Tricks and Best Practices for Responsive Design. Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design.

Tips, Tricks and Best Practices for Responsive Design

Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size. If you’ve never heard of responsive design before, Marcotte’s introduction is well worth a read. In a nutshell, responsive design means using fluid grids, fluid layouts and @media queries to adapt your website to the plethora of different screen sizes on today’s (and tomorrow’s) web. Whether your visitor is on a phone, an iPad or a gargantuan desktop monitor, your website adapts. Responsive design becomes an even more appealing tool when you start, as Luke Wroblewski says, designing for mobile first. So how do you go about building a good responsive site? Keep in mind of course that responsive design is a young idea and new ideas — and new tools — pop up everyday. See Also: Responsive Summit: Workflow. – February 24th, 2012 – These are my notes, conclusions and thoughts from yesterday’s Responsive Summit in London.

Last week, Alex Morris – UX Director at Mark Boulton Design, Chris Armstrong, Designer from Front, the company responsible for Typecast, and Josh Brewer, Principle Designer at Twitter, were discussing the idea that – whilst Josh is in the UK – we should all get together and have a chat about Responsive Web Design; the problems we share, the tools and solutions we’re individually developing, and how we can collectively we can get a better understanding of what RWD means for us and our daily business. Yesterday, the ‘Responsive Summit’ took place in Microsoft’s offices in London. And huge thanks must go to Martin Beeby from Microsoft for not only providing the room and also the tea, coffee and lunch. Oh, and cake. In attendance were: In Person On Skype. Responsive Design Workflow: Mobilism 2012. Smashing Conf: Responsive Web Design is Easy/Hard. Adaptive design: what is it and why should I be using it? If you’ve dismissed adaptive design, think again.

Adaptive design: what is it and why should I be using it?

Designers and developers explain why it’s crucial for crafting a usable, accessible and future-proof web experience Before deciding whether to embrace adaptive web design, it’s necessary to define what it means. Some consider it a ‘rival’ to responsive design, preferring specific layouts for set viewports over a fluid approach. But Easy Designs founder Aaron Gustafson argues this merely describes some adaptive layouts; adaptive web design as a whole is about “designing websites and apps without taking anything for granted, embracing the inherent variability of how people access and consume content”.

In other words, it is about context. Old hands will recognise this as ‘progressive enhancement’, a key component of considered, quality web design. “It’s incredibly important to provide as good an experience as possible to everyone,” enthuses designer Laura Kalbag (left). Layers of code Positive experiences. Responsive Design Workflow. Responsive workflow. Posted on 28 May 2012 During the last week I was at the Webshaped conference listening Stephen Hay’s talk about responsive design workflow.

Responsive workflow

This post isn’t going to be strictly about that, but as Stephen’s way reminded somewhat the way I work myself, it made me want to write down some thoughts about my workflow and how it has evolved during the past two or three years and how it might still evolve in the future. About three or four years ago—when I mostly did just static width sites—my projects went through the different phases in the order illustrated below, which looks like a typical waterfall process. Back then there wasn’t much room for revisions, and what clients saw were either the wireframes or almost finished Photoshop designs. That model *kind of* used to work back then, but now there’s just one problem.

The new way This is the process I use today when doing responsive web design (illustrated below). Discover Plan.