Responsive Workflow

Viljami Salminen, a UI/Web Designer and Developer from Finland explains his responsive workflow. He offers some great thoughtful descriptions on each individual step. His responsive workflow is broken down into the following steps:

Discover, Plan, Text Design, Sketch, Prototype, Visual Design, Test, Discuss and Iterate.

Some highlights included the free ‘Device Breakpoint Diagram’, the Text Design step (which was a new concept to me) and the Visual Design step which included some great typography tips.

‘Text design’ here means that we write (design) all the contents of the website down in textual form. This is one of the most important stages in the whole process, and yet it’s probably also the most underrated step.

Visual design. This step happens in iterations before and after prototyping. I still use Photoshop to do most of the design, but I’m moving more and more towards design in a browser. Especially typography seems to be something which is really hard to get working anywhere else than inside the browser (Although at the same time I have noticed that if I do the jump too early, everything will end up looking flat, uninspiring and somehow cluttered).

Web Design Weekly #44

Mike Kus and co released WordFu. Chrome overtakes Internet Explorer. Mr Zeldman has a great piece on web design manifesto. CSS variables land in Webkit and heaps more.

Using Fonts

A quick overview of how to use different fonts on your website. The screencast covers setting up your site to use the CSS @font-face rule. Working with Google’s powerful webfonts and using Adobe’s awesome Typekit service.

Web Design Weekly Workflow

During the last few months I have had a few enquires about the processes I use on a weekly basis to get Web Design Weekly out the door each Friday (whilst working full-time). The workflow has evolved and will continue to.

Sass vs. Less

Chris Coyier covers the hot topic of “Which CSS preprocessor language should I choose?”. He does a great side-by-side comparison. It is a great read if you are already using CSS preprocessors or not. Also be sure to check out the 160+ comments!

Web Design Weekly #43

Headlines Secret src There’s been quite a lot of action this week around the subject of standardising responsive images. Jeremy Keith looks at the two different matters in detail, the process and the technicalities. ( Responsive Images and Web Standards at the Turning Point The goal of a “responsive images” solution is to deliver images […]

Web Design Weekly #42

Headlines The Smashing Book #3 7 months of work. 44 people involved. As always, another top quality production by Smashing Magazine! If you haven’t grabbed yourself a copy, what are you waiting for? ( Cross-Browser Debugging CSS Nicole Sullivan got a little excited sharing her cross-browser debugging tips with a co-worker it ended up being […]

Web Design Weekly #41

Headlines The Vendor Prefix Predicament Most importantly, set a good example. Use web standards first and foremost in your sites, articles, and talks. When discussing or demoing experimental features or standards-in-progress, whether in one browser or many, be up front with warnings, and make it clear what’s shiny today may break tomorrow. ( JavaScript Style […]

Web Design Weekly #40

Headlines Adobe & HTML Adobe & HTML is a single place where the Adobe team can share everything they are working on. You can find up-to-date information about all of their different HTML projects, discover which events they will be attending and find out how you can join them in making the web better. ( […]

Web Design Weekly #39

Headlines A Baseline for Front-End Developers Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. ‘Times are a changin’. Rebecca Murphey gives a comprehensive overview of the new set of baseline skills required in […]