Some thoughts on responsive design workflow

I’ve recently become more interested in design and user experience. I found a good talk on Responsive Design Workflow which my friend @sherylyulin recently shared. Responsive Design or more specifically, responsive web design has become a very big buzz word in the tech industry, but is actually quite important given where the internet is heading – internet access from anywhere and any device.

What exactly is responsive web design? Wikipedia defines Responsive Web Design (RWD) as “an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)”.

With more of the emerging world onboarding onto the internet via mobile and the availability of new and different device form factors, responsive web design has become increasingly more important.

I found some good examples via this Socialdriver post. If you go to the Boston Globe and Smashing Magazine website, you can resize the page by dragging the corner in and out to create smaller or larger dimensions. The design will respond and adapt to the changing size. The design is fluid (by using responsive CSS elements). I also came across this fluid layout style when playing with Twitter Bootstrap.

I have to admit that a lot of mobile websites look really crappy when viewed from my iPhone – the ones specifically designed as mobile websites. The culprits can be found on websites that lie on a m dot domain (e.g. m.hoyts.com.au). They usually seem to have a limited functionality set of the actual website and just look plain ugly – I’ve never liked them. With responsive design, the way that we design websites is changing – there are some things that just won’t work on a mobile device e.g. hover effect.

The thrust of the video is that web design itself is changing but the actual design process itself also needs to change. I’ve been through the design process multiple times at a web design agency, and working for a client can be quite painful because of the back and forth process on design, particularly using photoshop. I do like the approach espoused by the speaker to make it more efficient and to rethink how we do it by going from the wireframes to HTML/CSS/JS prototypes (but show them a JPEG version of it first) 🙂

I think that part of the problem is also the emergence of wireframing tools that allow you to make clickable prototypes with actual elements you’d find on an app or website. For example, I’ve used omnigraffle and I was able to re-create an iPhone layout using the exact buttons. I do like the idea of going really basic and using content reference wireframes and sketching. The problem with using actual elements is that it can restrict how you think about the design.

Responsive design and responsive design workflow is some interesting food for thought. The video is at a good pace and the speaker is well spoken, so hope you enjoy it.

I’m out like mobile websites,

Matt Ho

Wireframes – The blueprint of good web design

It is important before any website development or design begins, that wireframes are drawn up. Think first, then code. This is considered as best practice for designing websites. After the wireframes are finished and signed off, then designs and backend functionality are added.

What are wireframes?

So to my non-technical audience, I’m sure you are thinking, “what is a wireframe?”. My definition is that it is the layout of the fundamental elements of the website. It is the visual representation without the graphics.

Think about a new property development. You wouldn’t just build straight away. You would consult an architect, draw up a blueprint, thinking about the structure and where to put certain things like walls, windows, etc… I consider a wireframe as something similar. It is the skeleton of the website. Wireframes are also used for product design (i.e. real world products).

In an optimal process, we would produce one wireframe for each template. Some people like to also produce wireframes to show interactions on the page as well.

The developer will typically work off this “blueprint” along with documentation known as a functional specification (func spec). The func spec will describe in detail how the functions work on every page of the wireframe. E.g. How the interaction of a button on the website works.

Learning by doing

I’ve usually been involved with high level reviews of wireframes for websites in my role as an account manager. I believe that to be able to review wireframes properly and design a website, you need to have the skillset of being able to build a wireframe and understand what is good wireframing.

So I have decided to learn how to wireframe and to seek to learn what is good wireframing, interaction design, and user experience.

As someone that is non-technical (not a developer, designer or BA), I believe that the best way for me to learn is by doing.

Why you should wireframe

Here are the key reasons that you should start with wireframes:

  • It saves time and money. As it is less costly to update a wireframe than a design
  • Fairly easy to build a wireframe. There is software out there where you can easily drag in shapes, move boxes and fields around, add icons for function, construct a simple form, etc..
  • As it is the bare bones, people don’t get caught up in things like “this is the wrong colour”, which can easily be added later.
  • Can use this to build a clickable prototype to test.

Wireframing Software

At the most basic level, you could start by sketching it on a blank piece of paper or a whiteboard. It is about visualising the layout and the interaction. I would start with this (and I love sketching my ideas). I need to draw and it helps communicate my ideas.

There is also a lot of software products out there that you can use. Options include:

We use Visio at work and I’ve had a quick look at the other tools on this list. I’ve decided to try Omnigraffle, using the 14 day trial for the standard version. It looked fairly easy to use and had a large 3rd party community called Graffletopia which provides stencils. The stencils are wireframes you can build on top of.

As I’m interested in mobile and tablet apps, I downloaded a bunch of stencils for iPhone and iPad. It includes the Apple hardware elements, outline of the devices, keyboard, the UI (user interface), buttons. The examples I found look like this:

If you have any thoughts about wireframing, tips or good resources I should check out, please put them in the comments section.

I’m like sketching on paper,

Matt Ho.

Qualities of non-technical co-founders

Found this comment on Hacker News on the blog post: “Founders who can’t code“:

There’s a big difference between the HN stereotype and “real” business people. REAL non-technical co-founders:- Can raise funding and know funders well

– Have a massive network of people to tap into

– Can cold-call like no-one’s business

– Know how to negotiate a deal to the point of paranoia

– Have deep domain experience and connections

– Make plans for the future, but can pivot on a dime

– Can talk enough tech to understand well beyond buzzwords

– Know how to keep themselves and the tech side accountable

– Let the tech side concentrate on what they do best

Comment by Nick Pinkston.

My 2 cents

A lot of this is true. If you can’t code, you need to bring other things to the table. One thing that I have is a large network, can pivot, love tech and can talk to developers. I also have experience in a multitude of areas which are useful: business development, marketing, customer development, accounting, legals, etc…

I’ve always wanted to learn how to code – born out of a frustration on the limits on what I can do with technology. There’s a lot of free online resources as well as short courses I can do. In addition, I’m surrounded by tech genius both at work, at home and my friends. My brother is a PHP dev and has been building his own iPhone apps, and my cousin was a senior Java dev at Vignette in R&D.

My goal in the next 6 months is to learn the basics of programming. I’ve been talking to my developer friends, and it seems like learning how to code in Python or Java is the way to go. I thought I should learn HTML or CSS to begin with, but the consensus is to dive straight into those two.

I won’t be a competent developer for a long time, but it should give me enough to hack together a basic prototype if I have an idea or modify a wordpress blog. In addition, it will help me if I work with developers. It also expands my current knowledge and keeps me fresh – not off the boat btw =)

Resources

I’ve found these resources. Haven’t had a chance to sift through them yet:

Learn Python the hard way

Beginners Guide to Python

Teach Yourself Python in 24hrs

If you are reading this blog, please leave a word of encouragement and keep me accountable over the next 6 months! Ask me, “Matt – how is your programming lessons going?”, “Can you hack together a web app yet”. I would like to join the Startup Bus @ SXSW, so this will definitely help my case!

I’m out like the HTML,

Matt Ho

Everything You Know About Web Design Is Wrong

This is a good video about web design from SXSW (South by Southwest Festival). It’s all about the user – you need to start with them and end with them in your planning. This guy argues its not about the “elastic user” but rather its about the “specific user”, which kinda flies against the thinking of cloud computing. Because cloud computing suggests that the user can come from anywhere and you have to cater for anyone from anywhere.

Another good video from SXSW is about designing community pages for the wisdom of crowds (yes, its that book!). It’s not the actual author but someone who is applying those ideas to online.

I’m out like everything you knew about web design,

Matthew Ho