An Event Apart: They’re Letting Designers Code Now?

by Luke Wroblewski December 7, 2009

At An Event Apart San Francisco, Dave Shea discussed the ways Web designers can enhance their capabilities by embracing a bit of Web development in his talk: They’re Letting Designers Code Now?

  • Designers and developers traditionally do not see eye to eye. But designers can learn from coders to help improve their design skills and processes.
  • Tools for designing are very visual and differ from tools for creating code. Coding tools need: source code view, syntax highlighting, source control, code collapsing, code completion, project management, and more. WYSIWG development tools resemble design tools more than development tools.
  • Web designers must code. There may be some gray areas but you need to be familiar with your medium.
  • Increasingly server-side code is needed to open up opportunities on the front end. Server-side includes help you manage content across multiple HTML pages and you can include variables to adjust things on the page dynamically.
  • JQuery (Javascript library) takes away cross-browser issues and provides more opportunities to easily add interaction to Web content.
  • Graceful degradation: write to a certain level of browsers, then let other browsers render as much as they can. Progressive enhancement: start from basics (to make sure it works) then add additional functionality that may only have limited support.
  • Opacity element: makes UI components transparent. Should degrade gracefully in most cases. Text-shadow, box-shadow, border-radius: other examples of enhancements that can degrade well.
  • Services like typekit host fonts and handle cross browser issues for you. This enables real font usage on the Web.
  • Canvas enables custom, dynamic charts and graphs in the browser. No need for the server to render images and send them to browser. No longer need Flash to render rich graphics.
  • Webkit is available on Safari, Chrome, and many mobile browsers like iPhone Safari, Android, Plam Pre, and more…
  • CSS3 –transforms and animations. Transforms can rotate UI elements on the screen and bring attention to UI controls.
  • Generative graphics –Processing and other scripting languages allow you to manipulate graphics.
  • 2-dimensional dynamic graphics are coming to Web browsers soon through canvas and CSS3. Open GL (coming later) will bring in three dimensional elements