Design and Development Manifesto

I’ve written the following manifesto to inform and back the way we work with the modern device. It’s a primer in the very best web practices.

Overview

  • Good Quality Design is our Top Priority
  • You are a Designer, no matter what your role
  • Constantly revise, improve and change your process
  • Accessibility and Usability are core to design, not afterthoughts
  • Speed is important, responsiveness affects user perception
  • Be a researcher, learning new approaches is as important as improving current ones
  • You are the authority on your field, ignore the guidelines when you think it necessary

The Modern Device

Whether it’s a laptop, a tablet or a mobile phone, whatever we design is interactable.

Interactable means not static. It’s an alive medium. The small details are important.

Design uses familiarity as a hint to the user. It hints at interactibility. Giving the user feedback through visual cues helps them and you.

An example: the button.

  1. At the visual design level it should look like a button.
  2. When interacted with it should act like a button.
  3. In code it should be a button (this is especially important for web, so that it is more accessible).

The Web and it’s Technology

The modern web is not a version. It is a constantly evolving set of features that we can exploit to convey information to our user. Modern browsers are undergoing constant improvement. We can and should exploit this, but not to the detriment of our less-enabled users.

On HTML5, CSS3 and ES5+

These tools can make our pages rich with graphic flair, animation, multimedia, interaction and input. Touch, location, storage, canvas, audio, video – these are all means for meeting an end: the communication of information to our user.

If a feature is introduced in XBrowser, but is not available to users of YBrowser then it should be used as an enhancement not a core feature. Nowadays most browser features can be reliably detected, you should employ feature detection as an aid to allowing enhancement.

Polyfills are a technique for giving older browsers features or functionality of newer browsers. These should be employed wherever useful. If they adversely affect the speed of a webpage it is perhaps worth redesigning some part of each browsers experience to fit around the constraints of the device.

Implementing a Design

The visual/graphic designers role is to give a vision for the look and feel of a website.

However, this vision may not be completely achievable and is often not flexible enough for the web. Instead it is the front-end developers role to interpret this vision into code.

With modern web techniques it is not necessary to employ the photoshop chop method of implementing design.

Images should be used where one might expect images (such as logos or graphics). Where possible use CSS to implement the style of a website. Deciding when an image is appropriate, or when css is appropriate is the front-end developers job. They should take into account network transfer speed, rendering time and visual lag due to animations and effects.

Responsive Design

Most of the time our user is using a web browser as we expect it, but sometimes that isn’t the case. We should try our best to cater to every audience, but understand that a different experience is not necessarily a bad experience.

This means that users on different devices should receive unique experiences designed to meet their needs. Whether this is differences in layout, presentation or functionality.

A user on a mobile phone should be able to perform the tasks they expect a mobile phone to perform. A user with an old browser does not need the most modern interface we can build, as long as what they do get can serve their purpose.

Code Practices

The process of developing and coding is as much a design process as any other. Code should look visually structured and appealing. It should function in a sane, but exciting way.

Best practices can and should be ignored so as to facilitate a superior implementation.

Development speed is the most important part of development. The second most important being quality. Balance these aspects well. Use tools to help improve both, some of these tools are practices, some are actually tools.

All code should be managed.

Collaboration

We find that we constantly need to collaborate. So we use tools to facilitate this collaboration. This may be as simple as paper to draw wireframes. We’re always respectful of others’ views and opinions and never play ‘devils advocate’. We don’t know everything about our field, we’re always looking for external viewpoints to guide our decisions.

Just because it is unfamiliar, does not mean it is bad. Learn and understand anothers approach before passing judgement. This stands doubley for code.

Have fun!

We think that you have to enjoy what you are doing, there is no point being bored. If you are bored you are probably doing the wrong thing. Do what you enjoy instead. 🙂

The Tools

The things we use:

  • GitHub allows for storing, collaborating and managing code
  • Modernizr detects common modern browser functions
  • HTML5 Boilerplate gives you a great set of HTML+CSS defaults
  • This is a good list of Browser Polyfills
  • Less Framework implements Media Queries for Responsive Design
  • Ruby on Rails speeds up Web Development
  • CoffeeScript speeds up JavaScript development and improves Clarity
  • SASS makes CSS easier to manage
  • FontSquirrel allows you to build @font-face declarations for custom fonts
  • TextMate is a great visual text-editor. Also see: vim
  • Heroku reduces time to deploy and improves programmer productivity
  • Instapaper allows you to read links later, to stop from distracting you now – keeping up to date with technology is important
  • Google PageSpeed tester is a good set of default tests to run to allow you to see page speed optimisations
  • OS X gives you a quick (and sometimes dirty) unix. It has a real, very usable graphical interface with powerful unix underpinnings.

The Knowledge

The things we read:

  • Dive into HTML5 is a web book about everything HTML5
  • _Why Archive an archive of writings by the most influential Ruby programmer – read ‘Why’s Poignant Guide to Ruby’ at least
  • Hacker News to keep you up to date
  • Rails Guides the best way to learn Rails
  • Responsive Web Design an article by A List Apart
  • Nicolas Gallagher runs a great blog about modern CSS practices
  • The Pragmatic Bookshelf sell some of the best programming related books that exist
  • The HTML5 Specification in a readable format