Design Camp Boston 2010

Design Camp Boston was super! It was held on Nov. 6, 2010 at Microsoft NERD Center, Cambridge, MA. Web developers and designers gathered together at this free, community-driven event to connect and share knowledge through 18+ presentations. Plans are already underway for next year’s event, which has been renamed New England {UX}.

Everett McKay (Principal, UX Design Edge) kicked things off with his Keynote presentation. His message encouraged  “courageous design”. Take thoughtful risks, think beyond the ordinary, try new things.

THE SESSIONS I ATTENDED

Designing with Balsamiq Mockups, by Michael Bourque

This was described as a fun, interactive session, so I brought my laptop. Fun, yes; interactive, no. Nonetheless, Michael did a terrific job of highlighting the best functions and uses of this application. Balsamiq is a wireframing tool, basically a digital sketchpad, loaded with all of the common User Interface graphics found on a website: the sketch looks hand-rendered.

This tool is intended to be used early in the design process. It enables the designer to mock up a website, export to PDF, and share with clients for feedback. Balsamiq is easy to learn, fun to use, and helps get your ideas sorted out. Clients viewing Balsamiq mock-ups can focus on UI and layout, and won’t get distracted by design details that can be incorporated later (fonts, point sizes, colors, borders, drop shadows, etc.)

Key Features

1. Runs almost anywhere (Adobe AIR; Windows, Linux, Mac, etc.); not yet available on iPad
2. XML (lightweight; easily share designs)
3. Has all sorts of buttons, arrows, stars, tabs, calendars, drop-down menus, etc.
4. Can export to PDF for easy sharing with client for feedback, with developers/designers for implementation
5. Screen shots of existing sites can be placed & locked into background to use as template for redesigning specific sections. Useful if only certain sections need refinement.
6. Can use for also showing thumbnails, information flow, and flow of pages
7. Can use for any diagram or instructional mock-up (non-web)
8. Can show pop-up windows, portfolio windows,
9. Free on-line version (http://balsamiq.com/)

Lucky  Attendees

At the end of the session, Michael announced that he had 5 free copies of the software to give to some lucky souls. “Stand up,” he said, “if you’ve got a good story about how you’d use Balsamiq.” I jumped out of my seat and was the third person to tell a story. Today, I received my free Balsamiq and I am totally psyched to begin using it!

Why You Should Be Creating Buzz-Worthy Content, by Michael Durwin

How do you draw traffic to your website? How do people find out about your site? How do you get people to return to your site and share your site with their friends and colleagues? With great humor and straight-forwardness, Michael answered these questions with one simple solution: “content that is interesting, engaging, sharable, and buzz-worthy.”

What kind of content is buzz-worthy? Videos, Music, Causes, News
How does buzz-worthy content help you? Fresh content & awareness (expressed on your blog, Twitter, YouTube, FB, Vimeo) gets shared via word of mouth, links, FaceBook Likes, emails, tweets, search engines (meta data created from titles, tags, keywords)

How do you create buzz-worthy content?

1. Identify your resouces (find staff/co-workers who have the interest, passion, and/or tools)
2. Assign tasks
3. Identify outposts (FB, Twitter, LinkedIn, YouTube, Flickr, Vimeo, MySpace, Ustream (there is a free version)
4. Identiy ambassadors (your customers/fans, esp. the young and/or passionate ones)
5. Supply your outposts (blogs, images, video, tweets, status updates, RSS feeds)
6. Supply your ambassadors (blogs, images, video, tweets, status updates, RSS feeds); make your stuff sharable (add buttons to EVERYTHING & tell EVERYONE)
7. What else? Monitor & respond 1x/day or 1x/week (do it regularly).

Design and Internet Explorer 9 – HTML5, CSS3, SVG, and More, by Chris Bowen

The Internet Explorer 9 browser is more web standards-compliant than previous versions of IE. Compliance means less code hacking for developers and designers.

Complete list of IE9 capabilities: http://ie.microsoft.com/testdrive/
Overall Hardware Acceleration

IE9 Compatibility

1. HTML5 Semantic Elements (<article>, <nav>, <section>, <header>, <footer>,  etc. ), Audio, Video, and Canvas (2D API, Bitmap Based, JavaScrit Driven, Hardware Acceleated, Rectangles, Paths, Lines, Fills, Arcs, Curve, etc.)
2. SVG = Scalable Vector  Graphics. Supports interactivity, styling (inline & CSS), basic shapes, filling, stroking, marker, & color, gradients & patterns, paths, text). Adobe Illustrator-to-Canvas plug-in: Ai2Canvas
3. CSS — complete CSS2.1 support; CSS3 support (Media Queries; Selectors
4. Icons (taskbar, new tab page, jump lists)

IE Developer Tools

1. Microsoft Expression software: http://expression.microsoft.com/en-us/dd565874.aspx
2. Browser Compatibility Check for IE v5.5 to 9: http://www.my-debugbar.com/wiki/

WordPress 3.0: Beyond the Blog, by James Coletti

James certainly knows WordPress inside and out, and he provided an extensive overview of this platform. If you are new to WordPress, this session was a good introduction to the power and extensibility of this platform. If you’re familiar with WordPress (as I am) and wanted to know more about “Beyond the Blog”, you may have walked away a bit disappointed.

WordPress Information Sources: Boston WordPress MeetUp (Blog, Forums, Jobs), Codex
Main Features of WordPress: Control Panel (web-based & mobile), which includes a Dashboard, Post List, Page List, Appearance Options (Themes, Widgets, Menus), Users & Profiles (authentication & roles), Content types (which you can define), Taxonomy (content organization), Media management, Link management, Built-in SEO, Comments, Plugins: Akismet, e-commerce, Feeds, API

Architecture

1. wordpress.zip includes WordPress Core, Themes, Plugins, FileUploads
2. Database Side = Posts & Pages, Comments, Links, Options/Settings, Taxonomy, Users (be sure you back up db)

Designer’s Dream: Separation between data layer (database) & presentation layer (theme).

THEME customization

1. Required files are style.css and index.php
2. Base = header.php, footer.php, comments.php, sidebar.php, page.php, single.php, active.php
3. Additional customization options
   •  “The Loop”
   •  Child Themes — Create new themes which inherit styles of parent theme. Particularly useful when parent theme is updated. Typically override: style.css, functions.php, and templates of the parent. Good way to modify parent theme without hacking parent theme.
   •  Multi-Sites — Operate a network of related WP sites from a single dashboard
   •  Subdomains and Subdirectories

Additional Resources

1. WordPress Codex (Template Tags, loop query parameters, etc.)
2. WRRecipes, com, WPTavern.com, and other WP-related blogs
3. WP video tutorials ffrom the source: http://wordpress.tv
4. WordPress.org free themes & plugin directories
5. Commercial themes: custom admin. Panels & premium support
6. Book “Digging into WordPress”2:30 Designing Faster Websites

Designing Faster Websites, by Jonathan Klein

Building faster sites is one way to gain a competitive edge on the web. Jonathan presented fascinating documentation about performance speed and how it correlates with bounce rate, conversions, and overall user satisfaction. He also provided many useful tools and tips for improving site load time.

A faster site will: increase conversion and reduce bounce rate/exit rate; reduce hardware costs; improve SEO
Load Time = Server side generation time & Client side generation time
Measuring Performance: www.webpagetest.org; Firebug; YSlow; PageSpeed; DynaTrace Ajax Edition; Google Webmaster Tools; Yottaa.com

RULES to make pages faster

1. Make Fewer HTTP Requests
2. CSS Image Sprites (combine images)
3. Combine CSS & JS files
4. Combine images
5. Put stylesheets at the top
6. Put scripts at the bottom
7. Make JS & CSS external (ideally, only 1 CSS file & 1 JS file per page, except for CMS pages, which often use more than one)

Design

1. Reduce, Reuse, Recycle; Consistency; Use PNG for graphics (not GIF); JPGs can be saved at 75% quality
2. Image Optimization: (a) Limit overall no. of colors & combine similar ones; (b) avoid whitespace; (c) reduce anti-aliased pixels; (d) avoid diagonal gradients (CSS can repeat pixels horizontally or vertically with repeat code); (e) change gradient color every 2-3 pixels.
3. Smush-it compresses sizes of images (smush.it.com) by stripping out unneeded meta-data
4. CSS Grids System reduces the amount of code used to build your site. Easily build complex page layouts; Flexible, reusable, works in all browseers; Save time, bytes.
   Yahoo (URL no longer available)
   Blueprint = http://www.blueprintcss.org/
   960 = http://960.gs/
   

Use Data URIs/MHTML When Possible: Eliminates HTTP requests; Encode image data directly in your CSS
JavaScript: Render first, JS Second”; Avoid using blocking JS when possible; Use a library (YUI, JQuery)

3 Buckets for Frontend Performance

1. Reduce no. of requests the browser has to make
2. Reduce overall pg. weight (KB on the wire)
3. Make browser do less work (executing code, applying CSS, painting, etc.)

What Did You Learn at Design Camp?

Which sessions did you attend? What did you gain from each session? Please feel free to share what you learned at this year’s Design Camp.