Archive | Conferences RSS feed for this section

The Perfect Prototype with John Farrar

19 Jun

Workflow is all about solving problems.

“Nobody knows what they want, until they see it.”

jQuery UI Themes recommended.

Site Design

When you think of any web site, you think of something visual. If you’re going to have a perfect prototype, why not work with a technology where you can use templates, libraries and patterns and apply a skin to change the look. Clients will often push back. You can push back too, just do it in a friendly way, you’re managing the push back.

Skinning is more than personality. If you can take your prototype and you can apply your company skin, people are going to feel better. When you’re doing your skin design, it’s all about the persona of the company you’re designing for.

Page Design

Usability is not optional. We know what a page does because we created it, when someone else sits down to use our application, do they know what it does, why it exists?

Page Intelligence

These principles can be extended to ASP and other server side scripting engines. They are in the process of building a reference library for this.

Designer to Developer Workflow Conference in Kansas City

19 Jun

D2W Sessions

D2W Keynote with Doug Winnie

Flash Platform, From Start to Finish – Book

“Workflow is about building a relationship.”

Building a relationship with those on your team, project stakeholders, and the project itself.

Design and development embody many different disciplines.

Design Disciplines

  • Visual Design
  • Layout Design
  • Interaction Design
  • Motion and Audio

Developer Disciplines

  • Architecture
  • Scripting and Coding
  • Data
  • Content and Structure

Each person offers a unique combination of these disciplines at varying levels. Design and  development must respect each other. Each of us have our own experience in both areas.

Adobe Creative Suite 5

Adobe CS Review allows stakeholder comments and feedback throughout the design process.

Adobe Flash Catalyst

Adobe Flash Catalyst has really nice features for building interactive prototypes and allows export to browser-based or Adobe AIR application. Click asset in Flash Catalyst and file opens in appropriate application. After edited and saved, content is updated in Flash Catalyst.

Adobe Flash Professional

Now can create mobile applications for mobile, including Android and other platforms.

Workflow Lab – Beta 2

Not a project management tool. Doesn’t have aspect of duration. Has ability to show time, but is a visual reference only. Create project workflows and define how team will work together. Link to web sites, local files or can export assets into a single folder and archive assets and workflow and how they came together. Once the project has started you can categorize different items within the project.

Dreamweaver

New features in Dreamweaver 5. HTML5, Media Queries, CSS Inspector, Improved Live View with Navigation and CMS Integration.

Visual Design Essentials for Non-Designers with Dan Rubin

13 May

Affordance

Something should look like what it does. If you over design you can break usability.

Rules

Fitts’s Law – Bigger buttons are faster.

It’s about balance and proportion.

Create patterns for margin and padding. Removes arbitrary decisions and ensures consistency.

Margin, padding and font-size are related to create a feeling of balance.

Patterns make it harder to make a mistake. Arbitrary decisions cause imbalance.

Are elements aligned along the left side, elsewhere?

Hierarchy communicates importance. Size explains hierarchy, larger elements are more important.

Color is more subjective, it’s more difficult to apply rules. Design solves problem, color tells a story.

Use photography to create color palette. Adobe Kuler allows this by uploading a photo.

Content

Design is about what best supports the content.

Most sites are based around text, unless you’re designing a photo gallery.

Relative text sizes create balance.

Leading = line-height in CSS

Range kerning = tracking or letter-spacing in CSS. Sometimes negative, has the most impact on larger type.

We read based on letter and word shapes.

Widows, fix using non breaking space between last two words in a paragraph. WIDON’T is JavaScript automatically does this.

Common mistakes

Line-height, there should be just enough space to differentiate one line from the next.

Improper treatment of emphasis. It shouldn’t distract the reader.

Hanging punctuation, use text-indent: on element

Primes versus quotes. “”  vs “  ”

Start without color to remain distraction free. Use as few visual elements as possible.

Grids

Another simple pattern to contain and organize content which allow design without guessing.

Nice, but only guides. Design doesn’t always have to align.

Simplify

Simple is often an improvement, often the best thing you can do is remove things.

Simplify the color scheme, typography and layout. Give typography structure, using relative type sizes.

Critiques

Critiques are good to help realize the easy things to fix.

Communicate your thoughts. Conduct with your team, and ask questions. Ask to see the goodness. Focus your efforts on what’s right, this will expose to you what’s not right and also what you need to protect in the design.

A good design critique.

An Event Apart Seattle 2010 Recap = WOW!

22 Apr

An Event Apart = WOW!

Jeffrey Zeldman and Eric Meyer really know how to put on a conference & they’re darn nice, down-to-earth guys! If you work in user experience, interface design, web design or web development, An Event Apart is for you!

Highlights from An Event Apart Seattle 2010

My session notes from at An Event Apart Seattle 2010

Your Top Questions on Web Form Design with Luke Wroblewski

22 Apr

Form Length

Better to have form on one or multiple pages?

  • Evaluate every question, then ”Keep, Cut or Postpone”
  • Perform best practices audit using spreadsheet & breaking up by section & data collected.

Apple check-out system uses dynamic accordion form. Makes use of accordion to collapse sections after you enter form data.

Inline multi-step do not affect conversion, though people were fastest with it.

Are there accessibility issues with accordion forms? Build form out to work with plain HTML, then progressively enhance using code & CSS.

Primary & Secondary Actions (or Next & Previous)

Primary & secondary actions. Should Next be on the right and Previous on left? Depends on how form labels are aligned. If you’re going to use this, be sure there is enough space between buttons so secondary action doesn’t align with your form elements.

Consider changing form labels. Continue & Go back instead of Next & Previous. Take emphasis off secondary action by using a link instead of a button or using more subtle style.

When primary action is inline with rest of form, users performed the most quickly.

How about tab index on secondary actions? Leave out in most cases, depending upon user goals.

Button & Links

Consider button for primary action & link for secondary.

For help differentiating forms from applications, see Forms vs. Applications by Jakob Nielsen.

Mad Libs Style Forms

Questions are layered into paragraphs with blanks. Some sites have seen consistent increase in conversion & completion rates.

“Mad Libs” Style Form Increases Conversion 25-40%

Vast.com uses Mad Lib Style Forms.

International Forms

There are many ways to present forms that collect postal addresses. Relying solely on text inside form fields causes usability issues.

Be sure your forms are tuned to the country your form is targeted towards. Can use automatic-detection based on IP address WiFi, or GPS. HTML5 has geolocation-based API.

Use generic format that covers multiple regions or countries. Example form fields, City/Town, State/Province/Region, ZIP/Postal Code. When it comes to form validation, realize the variations in different countries. Some countries don’t have postal codes, some have numbers and alpha-characters.

More on postal addresses & forms

Flexible inputs for form fields

Use input maps is fine, but don’t change answers while users are entering them. Set expectations up front or modify after entry. Don’t hide form hints in your form fields.

HTML5 allows additional input types

  • number
  • range (implements slider)
  • date (implements calendar)

Two-Column Form Design

People will scroll if there is something to scroll for, if it’s clear your form continues. People will jump right in, skipping help text if they want what’s on the other side.

Scan line for form completion. Left aligned items have a much clearer scan lines. Be careful not to scatter input forms across the page. Draw straight lines as guerrilla metric between different sections of your forms.

When you encounter a form on mobile & enter your cursor, Apple does form field zoom. Android doesn’t so form fields are

In general, it’s a good idea to avoid two-column form designs because of loss of scan line and issues it might cause for mobile devices.

Q & A

Cancel and reset buttons on 1-page forms: Get rid of cancel or reset buttons when you can.

How about help links? Help links can work when content is relevant.

Label position on forms: Use top-aligned for speed and higher completion rates. Also best for mobile, accessibility, etc.

Lightbox use in forms: No concrete data yet, inserting follow-up questions in lightbox can be more successful than full form. Okay for adjustments & additional inputs. Stay away lightbox for a complete or multi-page form.

Auto-populate city and state, based on ZIP code: Read post on auto-populating city and state based on ZIP.

Explore CSS3 with Dan Cederholm — A Day Apart Seattle 2010

7 Apr

Dan Cederholm

Font stack is a very early example of progressive enhancement. Compare black & white to color TV’s. When color TV’s came out, program directors’ didn’t say we’re going to keep filming in black & white. Providing visual rewards to those with advanced browsers. CSS3 is a series of modules and was designed that way so browsers could implement them in stages.

Optimal ordering for vendor-specific CSS.

  • -webkit-border-radius
  • -moz-border-radius
  • border-radius

Vendor prefixes are important for testing implementations, precursor for standards and allow you to use this now.

What works today?

Transforms, Transitions & Animations (Safari) – These actions occur outside the flow of the document, it doesn’t affect the box that it’s in and will not affect the rest of the layout.

Transitions

See hovers on tabs at http://handcraftedcss.com/tugboa

Transition goes on normal state of element. Transition can be used onclick, without JavaScript using the active state.

Example:
background-color .4 linear
property duration timing-function

There is also an all property.

Background transition background image on hover.

2D Transforms include rotate, scale, translate (move) &  skew.

Tranform translate moves image away from mouse. Skew uses X, Y coordinate and causes text to slant to one direction.

Animation

Involves defining and naming a keyframe.

Borders & Backgrounds

Some of the most applicable right now.

border-radius for rounded corners on a box

When you get into individual corners, the syntax differs for -moz. If you don’t specify each corner, all will be rounded.

border-radius.com – to get entire stack without worrying about syntax

Text-Shadow

CSS2 supported in webkit initially.

-text-shadow: 0  -1px 1px #300;

You can use multiple text shadows.

Box-Shadow

Box shadow goes out into the gutters and doesn’t affect the box model.

-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000;
box-shadow: 2px 2px 4px #000;

Border-Image

Allows you to stretch images around the edge of a container. It can be confusing. There are nine sections. Causes extra work to be sure it degrades well and is confusing to grasp.

Multiple Backgrounds

Syntax is simple, comma-delimited URL’s & supported in latest Firefox, Safari & Opera. List critical background images first, so it degrades gracefully.

Color & Transparency

RGBA = Red / Green / Blue / AWESOME (or amount of transparency) – can give a bit of the same effect as overprinting in print work.

Example: rgba (255, 255, 255, .8) 80% transparency

Specify solid color before rgba for non-compliant browsers (Internet Explorer)

RGBA for text – Examples: http://www.wilsonminer.com/ & http://24ways.org/

Use RBGA for transparency on backgrounds that cover images. Also works well on textures to let texture come through.

Use opacity for dimmed image, opacity: .5, on hover opacity: 1.

Selectors & Typography

:last-child & :first-child

:nth-child

:nth-child(5n) (every 5th)
:nth-child(5) (only the 5th one)

Zebra Tables – :nth-child(odd)

Beware of relying on :nth-child for layout

attribute selectors

input[type="text"] {width: 200px;}
disabled=”disabled” or enabled=”enabled”

Substring matching

ID’s that begin with … or end with… or wildcard

CSS3 Selectors Explained

Compatibility Table for CSS3 selectors

Typography & CSS3

Drop caps. Old way was initial character in a span, so we could style it differently. New way is using :first-of-type:first-letter selector.

Use the Best Available Ampersand

CSS3 Layout

Multi-column layout. Set up 3 column layout & set up borders for in between them using column-count, column-gap, column rule. Not practice for long articles where you might have to scroll up and down to read multiple columns. Good for print style sheets.

Font Embedding

http://en.wikipedia.org/wiki/Embedded_OpenType – Legal issues, someone could just grab font. Many free fonts available, http://www.theleagueofmoveabletype.com/ & http://www.josbuivenga.demon.nl/

How to use @font-face. This article overstates complexity of implementation. Go with the simple case of true-type and open-type and let IE default back to standard web font.

Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading.

Font is cached when using TypeKit. They work through legal issues and you pay them.  Uses JavaScript you paste into your document. Many of TypeKit fonts are also re-hinted for the web.

Using CSS3

To enrich user experience, when site stats rule, experimentation, mobile dev and prototyping.

That’s it. My cache is full. I’ll be editing and organizing this content soon.

Example sites: http://css3exp.com/moon, http://handcraftedcss.com/tugboat & http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

Understand HTML5 with Jeremy Keith – A Day Apart Seattle 2010

7 Apr

Jeremy Keith

History of HTML

There never was an HTML 1. The first version was HTML 2 in November 1995. HTML 3.2 in January 1997, HTML 4 in December 1997, HTML 4.2 in December 1999. XHTML 1.0 in January 2000, XHTML 1.1 was problematic because it  must be served as mime-type: application/xml in May 2001. XHTML 2.0 never happened (it was going to deprecate the img element at one point), because there was a disparity between reality and what W3C wanted the web to be. Internet Explorer 9 to feature support for XHTML 1.1, “that’s so cute.” Plucky rebels from WHAT-WG put forward proposal to use existing XTHML with new features, W3C disagreed. WHAT-WG initially worked on Web Applications 1.0 & Web Forms 2.0, eventually the two merged  into HTML5, the lack of space between HTML and number 5 is intentional, this is not a new version of HTML. In October 2006, Tim Berners-Lee finally realized HTML5 was the way of the future, got W3C HTML Working Group to agree. WHAT-WG still exists and specifications are slightly different, occasionally they are ported to W3C. January 2008, HTML 5. Timeline: HTML5 Candidate Recommendation in 2012.

The web standards process is a lot like sausages, they taste good, but you don’t want to see how they’re made. -Jeremy Keith

The dates are only of interest to the standards body. We don’t wait until a spec is complete to start using it. We use it when browsers support it.

HTML5 design principles value users over authors (us) over implementors over specifiers over theoretical purity. Pave the cowpaths based on what people want and what people need & evolution not revolution (backward compatibility). Standards and working groups will often pay more attention when they see working code with theory behind it.

Doctype & Character Encoding for HTML5

Doctype for HTML5 (authors first) - <!DOCTYPE html> - *applause* - doctype is only needed/intended for document validation. This will trigger standards mode, if you’re using quirks mode, don’t use this.

Character encoding for HTML5 - <meta charset=”utf-8″>

HTML5 must be served using the text/html MIME type.

Syntax, you don’t have to close li, img and certain other tags *yikes*. Attributes don’t need quotation marks *nooo!*. We need a lint tool for HTML5.

Error handling, HTML5 is the first time this has been approached in specifications. Currently browsers reverse engineer from expected behavior & copy each other. This is one of the most ambitious parts of HTML5, all of the browser makers want it, but it’s not something authors (we) need to worry about.

HTML5 Introduces Rich Media Elements

Audio <audio src=”song.mp3″ controls preload><!– fallback content–></audio>

Fallback content isn’t the same as accessibility content. In the example above, you could have a Flash fallback, a fallback linking to mp3 on page.  Control elements can’t be styled, however you can use buttons & JavaScript to style.

Video <video controls width=”200″ height=”200″><source type=”video/ogg” src=”movie.ogg”><source type=”video/mp4″ src=”movie.mp4″><!– fallback content –></video>

“Patents are the root of a lot of pain in the ass.” -Jeremy Keith

Different browsers support different file-types. Firefox doesn’t currently support MP3, but does support Flash. Browser will interpret the first one it supports, list your preferred format first.  Important to note, these are HTML elements and can be styled using CSS. Example: HTML video player.

Canvas <canvas> and JavaScript for drawing on the screen. Example: Canvas & jQuery.

Forms

“For accessibility, a native control will almost always be better than a scripted, emulated control.” -Jeremy Keith

New input types –  input type=”…”
tel, email, url, datetime, date, month, week, time, number, range, color, datalist, placeholder, autofocus, required

Styling – can be styled as other input elements, but date picker and browswer native styles cannot be styled. Browsers will display differently, in the future browsers may compete for best looking native styles.

“Chrome is a pile of shit when it comes to accessibility” -Jeremy Keith

Semantics in HTML5

Deprecated is deprecated. Items have now been “removed” from HTML5.

Removed from HTML5

  • Presentational elements: font, big, center, etc.
  • Presentational attributes: border, bgcolor, etc.
  • frame, frameset, noframes, acronym, axis, summary (tbd)

Changed in HTML5

  • a may be wrapped around entire paragraphs, lists, tables, entire sections as long as no interactive content within.
  • b changed to a span of text to be stylistically offset from normal prose without conveying extra importance.
  • i changed to span of text to be stylistically offset without conveying extra importance.
  • hr a paragraph-level semantic break.
  • small for small print

Extensibility

Semantics in HTML5 – A List Apart, John Allsop

Structure in HTML5

New elements

mark, time, nav, article, section, aside, header, hgroup, footer, details, figure

With sections, you’re creating mini-documents. Even if you’re not ready to use elements, begin using semantics (class names) to transition new elements now. At the very least, you can also change your doctype and use ARIA roles, change doctype, class names and ARIA roles or if you’re feeling really brave doctype, new elements and ARIA roles.

Creating an outline

…

Sectioning roots

…

Scoping styles

…

ARIA roles

…

How the Web Works – Jeff Veen — An Event Apart Seattle 2010

6 Apr

Jeff Veen at An Event Apart #aea

600 years of typography. In 1993, the web came about and we had very little control of typography.  2008, we have 18 fonts, most still use four or five fonts.

@font-face comes about, but still isn’t used. First supported in Opera, then Webkit, Firefox and Internet Explorer in a proprietary way. When a couple of things converge, technical disruptions happen. How do you respond?

Look past where your revenue model is today and ask what we’re trying to do here. The qualities that contribute to the success of the web are the qualities that will make us successful too. We are native to the web

Initial proposal was JavaScript-based styles. http://www.w3.org/Submission/1996/1/WD-jsss-960822 After discussion and conflict, consensus was reached, but style needed to be separate from scripting. After some code was developed, the team was able to agree on what eventually became CSS.

Moving forward we can achieve rough census, but we must have the code to demonstrate. Proposal for img tag, consensus wasn’t universal at the moment, but code for Mosaic browser shipped with code for inline images using img tag.

Gauge feedback for features and write blog post about proposed features, see where that goes. Get something out there, get the idea in front of your users.

“If you’re not embarassed when you ship your product, you’ve waited too long.”  -Reid Hoffman

Watch what your users do and say. When you see a pattern, adapt your product to meet the users needs. Iterate, get things out as quickly as you can. You might not always get it right the first time. Speed of iteration, beats quality of iteration. Trying to get to that perfect release really slows you down.

We must stay on the top of our game to be successful on the web.

A Dao of Flexibility – Ethan Marcotte — An Event Apart Seattle 2010

6 Apr

Ethan Marcotte, The Dao of Flexibilty #aea

What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and its child, the web. And it’s time to really understand the relationship between the parent and the child, and to let the child go its own way in the world. -John Allsopp

The number of access points for distilling information has never been greater. Because of the iPhone, clients are finally realizing what the mobile web can do for them. Mobile webkit blows them all away.

Responsive Architecture

Looking at the way space can adapt to the needs of the people inside it. Is there something we can learn from this?

Responsible Web Design

A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.

We know the good guys, we know the bad guys, but there is a secret robot lurking within. http://robot-or-not.com/

  1. Flexible Grid
  2. Flexible Media
  3. Responsive Design

When handed any piece of work, do a visual inventory and translate into markup sketch and set global CSS parameters.

Font size = 100% == Font size: 16px

Simple Formula: Target / Content (16px) = Results (ems, don’t round them)

Fluid grids can be built the same way using percentages. We can do so with the same simple type setting formula. Six-column grid of 95px each = 637 pixels wide. Target / Content = Results. Figure out pixel width of columns and get percentage.

How do we accommodate fixed with images. Original image, 1024×768. Image will overflow container. What if we can set a rule to resize the image proportionally, but never exceeds the width of it’s container.

  • img { max-width: 100%; }
  • img, video, object {max-width: 100%;}

What about IE6? Width is a very different rule, so must be applied intelligently so it doesn’t scale non-relevant items.

  • class.img, class.video, class.object {width: 100%;}

Windows platform has issues with pixelation. Using AlphaImageLoader filter turns on a super power for flexible width items in Internet Explorer 6.

Hardboiled Web Design – Andy Clarke — An Event Apart Seattle 2010

6 Apr

What the hell is hard boiled? As Andy sips a Manhattan.

This is what CSS3 was made for, http://www.anthonycalzadilla.com/css3-ATAT/index.html.

We use standards to tell us what we can’t do, not what we can do.

Progressive Enhancement

Builds for least capable devices first, then moves on to enhance those documents to allow a richer experience for those users with modern graphical browser software.

Rethink notion of progressive enhancement. From the top down, instead of the ground up. We can’t be stuck on a doctrine written seven years ago without enhancing it. We should be using these as the core of what we do, instead of just visual treats.

Letting Go

People need to let go of the notion of sites need to look the same in every browser. They can’t! Carry on. Then try to find ways of explaining that to the ones we work for.

W3C is not an innovation body. CSS working group is made up of pay-to-play organizations and companies with the goal of advancing their business objectives. CSS animations, Safari was the first to implement this – try to imagine their objectives for this.

When is the last time you checked your site in san-serif? You design for the first font in the list.

What Does Browser Testing Mean?

Making sure the design people see is appropriate to the device that they are using, so they don’t see something that looks broken, incomplete or inappropriate.

Vendor Prefixes. http://www.w3.org/TR/CSS2/syndata.html

Just say no to Microsoft filters. If their customers are having a lesser experience, this should be their motivation to innovate.

CSS3 pseudo class selector for IE 5.5 – 9. http://www.keithclark.co.uk/labs/ie-css3/

Modernizr, a JavaScript toolkit that allows you to use cool new CSS3 and HTML5 features while maintaining a fine level of control over browsers that don’t. http://www.modernizr.com/

Universal IE6 stylesheet – http://code.google.com/p/universal-ie6-css/

← Older Entries
Newer Entries →