Friday, May 9, 2008

» The latest CSS tools

Check this out: the latest in CSS templating.  It is a listing of common styles for reuse.

» Toolbox CSS

Also check out Meyer's resets.  These ensure that browsers have the same defaults for the styles of many elements:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Google's hartija print style sheet is totally worth a look too:

http://code.google.com/p/hartija/

- and if you find CSS frameworks useful, check out Blueprint et al:

http://webtecker.com/2008/04/17/list-of-css-frameworks/

If you need to roll up  your sleeves and get down and dirty and target browsers, check this out:

http://en.wikipedia.org/wiki/CSS_filter

For choosing fonts:

How many machines have certain fonts? http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Windows/Mac equivalent fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Embed fonts: http://www.alistapart.com/articles/cssatten

For working with grids:

column calculator: http://www.29digital.net/grid/

Dean Edwards' script that makes IE behave:

http://code.google.com/p/ie7-js/

Link style generator:

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/default.php?step=1

Monday, April 14, 2008

Web Directions North

Web Directions North

Slides from the conference

- a summary of the greats by Mark Simmonds (also at Ascentium) et moi =)

 

Andy Clarke – CSS, beautiful web-stuff

Workshop: Transcending CSS "For A Beautiful Web", Andy Clarke

Thought: If we don't push the edge of web design, what is the incentive for browser developers to innovate?

Wrong design approach: Create baseline that works for lowest common denominator, then add enhancements (sprinkles on top) for modern browsers. Right design approach: Build for newest browsers then degrade gracefully. Good example is TV; B&W to Color to HDTV.  B&W still can watch programming, it just isn't as good.

Start building out HTML/CSS ASAP instead of bringing Photoshop comps into the process, allows for quick changes. Don’t show Photoshop/Illustrator comps to clients.  They will expect site to look EXACTLY like comp in ALL browsers.

Thought: Can we pitch websites like a movie is pitched to a studio?  With lower resolution comps

W3C standardizes on what browsers implement.  This is the opposite of what most people think happens.

Thought: It is up to us (developers) to use the latest technologies so users have a reason to upgrade their browsers.

Don’t expect all browsers to see pages the same. Use all that’s available. Use CSS-3, training yourself for the future. Allow browsers (like IE6) that can’t use the modern styles (transparent PNGs, pseudo-elements) to degrade gracefully to acceptable-looking sites.

Use JavaScript & the DOM to plug the holes in CSS: use JavaScript to tell the browser how to render the effect in non-compliant browsers like IE6.

Use semantic markup & Microformats to create markup that is meaningful to search robots and screen readers, and can be effectively crawled and understood by them.

Organize data in semantic groupings – unordered lists, headings, etc.: and organize them in the page as is logical. Then style them to rearrange their order/structure/look. For instance, make an unordered list that contains paragraphs of text, then pull each list item out and position them absolutely to the left and then the right alternately.

Steven Champeon coined the phrase “progressive enhancement” in 2003. It is now widely used to relate to DOM Scripting, Jeremy Keith’s book.

Tantek Celik – built the rendering engine for IE5/Mac - also invented Microformats. (Trivia =) )

Semantic HTML is for machines first, people second.

In the modern web, there’s access to multiple sources and global sharing of data. Other examples of the semantic web (implementations and applications for these applications are years away):

RDF – Resource Description Framework

OWL – Web Ontology Format

Microformat implementations:

www.corkd.com - Wine reviews, contact info, relationships (xfn)

www.flickr.com - Geotagging

www.last.fm - Event info

The naming convention of microformats

Denote an hcard as vcard in html: talk about it as an hcard in reality: it’s just a way of talking about it.

Get these Firefox extensions for microformats

- operator and tails. Tails allows you to implement scripts on the in the page.

Fun selectors to use when styling using future web standards (don’t work in IE6):

Child selectors li > img – direct children

Adjacent selectors h4 + p - element follows another directly

Attribute selectors img [alt ] - element with a certain attribute

img [alt=”me”] - element based on its attribute value

a[rel=”self”] for <a href=”#top”>to top</a>

Pseudo-elements p:first-line; p:first-letter

!important overrides everything, including inline styles. Be very careful with it.

Descendant + class + adjacent - .nav ul li + li

Attribute sub-string selectors **** - new in IE7 & CSS 2.1

Box model

All elements generate a box of some kind.

Block-level elements : generate a box that can contain other elements.

IE6 treats height as min-height.

Sample of semantic markup in a form. Labels can be separate: they are just labels.

<fieldset>

<label for = “first_name”>

<span>your first name:</span>

<input type=”text” id = “first_name” />

</label>

<label for = “second_name”>

<span>your last name:</span>

<input type=”text” id = “second_name” />

</label>

</fieldset>

Expression engine is the CMS that he uses. It can be tricky.

To render page after the css is loaded, set the css to display:none, then at the end of the page (inline) have it load.

CSS3 – what’s coming – see also http://www.alistapart.com/articles/css3multicolumn

Selectors based on attribute/position, tr:nth-child(2n) – which is odd rows, type of child, etc.

Backgrounds, borders: multiples thereof.

Columnar layouts – define how many columns, their width – or both.

Advanced layout (modular) – slot letter: identify a slot to put stuff in; a place where stuff can flow into if the slot’s empty; a slot that can’t have stuff flow into it.

Media queries (dimensions on page, etc.)

Columns already work in Mozilla, multiple background images in Safari.

---------------------------------------------------------------------------------------

Workshop: Frontiers of JavaScript, Cameron Adams

JavaScript libraries are great for abstracting complexity.

Some libraries are much weightier than others.

JQuery is closing in on Prototype for most popular library.

Quality of documentation rated from best to worst; YahooUI, JQuery, Prototype, Dojo

----------------------------------------------------------------------------------------

AJAX Frameworks

Jonathan Snook, www.snook.ca

A basic conceptual structure used to solve or address complex issues.

AJAX is a design approach – data changing every few seconds (like Yahoo stock prices)

3 layers:

Working with the DOM

Application conveniences – the between-part

Can give you widgets

Basic characteristics of libraries:

Working with AJAX Frameworks, Jonathan Snook

  • Prototype:
    • Very object oriented approach.
    • Excellent for working with large amounts of data.
    • May have issues working with other libraries because it adds methods to the native prototypes.
  • JQuery:
    • Everything begins with the $ function (the JQuery object).
    • Lots of plugins available and very easy to develop your own, custom plugins.
    • Works really well with other libraries as all functionality is contained within the JQuery object.
  • ExtJS:
    • Great for application widgets.
    • Very flexible library.
  • Scriptaculous:
    • Heavy on effects.
    • Requires prototype.
  • Mootools:
    • A little bit of everything.
    • Object oriented approach.
    • Similar code conventions to Prototype.
  • YUI:
    • Yahoo global object – self contained, will play well with others.
    • DOM Collection – for traversing the document.
    • Event Utility – event handling.
    • Tons of available utilities and application widgets.
  • Dojo:
    • Core – DOM utility
    • Dijit – application widgets
    • DojoX – cutting edge techniques: drawing, offline support, etc.

------------------------------------------------------------------------------------------------------------

"Plays Well With Others": Simple Things to Make the Social Parts of your Service More Social, Brian Oberkirch

· Do One Thing, Do It Well.

· Write programs to work together

· Axioms of Web Architecture: Simplicity, Modular Design, Decentralization

· Closed system benefits: Control, Speed, Privacy, Clean Experience

· Missing: the power of remixable data (Kayak; Southwest misses out)

· Social networking fatigue

· How is updated data propagated?

· Now we give out a URL instead of just an email address to allow all forms of communication.

· How can we make social networks more hackable? Portable? Efficient?

· Don't make me repeat myself.  One location for data.

· Could these sites work together? We have the technology: Microformats, RSS, oAuth, OpenID, Creative Commons

Make it work and be meaningful for non-geeks

· Identity: OpenID

· Profile Import: getsatisfaction.com: pulls profile from other services (Flickr) using hCard import.

· Friend Import: Dopplr: Add people from other networks (Twitter, hCard and XFN on all contacts

· Identity Consolidation: Pownce: rel="me" added to Other Profiles

· Authentication: oAuth: Open Protocol for API access delegation, "A valet key for your data"

· DISO: Distributed Social Network (Chris Messina): Using Wordpress with: OpenID, XFN formatted friend lists, hCards, OAuth

-------------------------------------------------------------------------------------------------------

Information Visualization as a Medium

- Eric Rodenbeck

www.Stamen.com

projects: http://www.stamen.com/projects

Many excellent examples of dynamic mapping tying in to various APIs – Virtual Earth, Digg, Flickr, etc.

Particularly fun sites:

House price/commute time live maps:

http://www.mysociety.org/2007/more-travel-maps/

Digg swarm: mapping popular sites:

http://labs.digg.com/swarm/?upcoming

-------------------------------------------------------------------------------------------

Web Typography

- Kimberly Elam, Ringling College of Art & Design

http://www.wpdfd.com/profiles/kimberlyelam/

You will vow:

I will not stretch out or squish type

I will not outline type

I will not rotate type 90 degrees (stack type)

I will use prime marks (quotation not “)

En dash & em dash appropriately (-, - ).

Use classic typefaces: Baskerville, Bodoni, Helvetica, Times, Caslon, Century, Serifa, Garamond

Bad typography:

Disorganized, unreadable, unclear

Ways to organize information (LATCH):

Location (where they happened)

Alphabet (alphabetically)

Time (when they happened)

Category (according to their category/type)

Hierarchy (largest to smallest, first to last, etc.)

Organizing information – structures:

Pentagrams’ structure (they’re a design firm):

http://pentagram.com/en/portfolio/

Grid structure: 3 cols, 3 rows. Your eye has expectations, like reading a book,

Top row – heading, nav;

Middle – content;

Bottom – sub nav, incidental text.

TED (Technology, Engineering & Design – they spread ideas):

http://www.ted.com/

User chooses visualization by picking a checkbox to pick options on left:

The images displayed are in a 12 by 12 grid, with a 3:4 ratio – every image.

Biggest image is 8 x 8, then 8 x 8, then 2 x 2, then 1 x 1.

SamataMason

www.samatamason.com

Always a large cropped image, a teaser.

Color image, the rest monochrome.

Vertical transparent column overlapping image for nav, horizontal at bottom for content.

Natural eye flow: a triangle – very ergonomic.

Menu to sub-menu: you never get lost.

Using non-objective elements:

Use rules for: emphasis, organization, direction or balance; they must be functional.

Use circles – carefully – they pull the eye incredibly powerful. Think of bulleted lists.

Use them for emphasis: in successive sizes, in how close they are to text.

Use tone: it’s under used. Use it, even subtly. It imposes hierarchy.

Light colors stick out. Try light color, darker stripe, darker, and so on.

Details:

Pay attention to horizontal – and vertical – grids.

Use 8-11 words a line.

Choosing between text & background? Lose background image.

Lose uppercase text where you can – it’s tougher to read. It screams & makes text very tight J

Think of color deficit folks: 6% of males, 2% of females have some sort of color deficit.

Pictures are more impactful than text – stick important text in them.

Use hyphen (-) for breaking a word into syllables, en dash (–) for direct relationship in two words or time span, em dash (—) for change in thought

Font weight, color, background all affect the way content is interpreted.


-----------------------------------------------------------------------------------------------------

Jeffrey Zeldman

Started Web Standards Project.

Half accessibility is worse than none - story of disabled hospital access road-person gets across the road. The story: a person in a wheelchair crosses the road because there is a wheelchair ramp into the road: then can’t get onto the next sidewalk because there is no ramp there.

Non semantic markup:

    • Wastes users time
    • Wastes your bandwidth
    • Hides your content

Semantic markup = findability (SEO made easy)

The fight for Standards was done piece by piece: they resulted in Netscape taking on the Gecko rendering engine (as Mozilla), and a gradual standardization through petitions & talking..

They told folks to stick to standards – and fix heritage rendering issues before enhanced CSS support.

They got a standard default font size & font scaling & Doctype switch.

Brought in @import tag – Netscape 4 can’t follow, everyone else can.

Separate style from content, so you can use semantic markup: be SEO friendly.

2000 – XHTML came out – supposed to be supportive of xml.

2007 – Bad: xhtml 2 & html 5. They confuse the issue. Good: microformats.

2008 – browser targeting, using the meta tag that IE8 will require.

----------------------------------------------------------------------------------------------------

The Mobile Web Landscape in Canada and Beyond

Brian Fling, Blue Flavor (Seattle)

http://www.blueflavor.com/wdn08 - slides.

Will be at Web Design World, Seattle, July 21 2008.

www.developersmobile.com – building pages for the web

Globally:

2.9bn have mobile devices, as many as there are people in China.

1.3bn have access to the web using mobile devices.

1.1bn have access with a desktop.

The major growth area is in third world: wireless infrastructure is easier to set up

The prediction is that in 2 years: half the population of the world will access the web through mobile devices.

Mobile reaches anyone in any medium – TV, location devices, internet, audio, etc.

LBS (Location Based Services) are being widely used: Tom Toms, etc.

When designing for mobile:

Think where folks are - physical context

Think of which media is appropriate (audio, static, video?)

Think of what the user wants

Think of the user’s expectations of the interface/devices’ capabilities

Find a need and fill it

Balance goals: business goals, user goals, financial goals. Find the sweet spot in the middle.

Watch the 3 Cs:

Cost (to you & to customer)

Content – think of navigation, image sizes, page weight & scripts

Context – how does your info add to their mobility? Do you add value to their physical location?

Mobile is the 7th Mass Media:

1 - printing press

2 - recordings

3 - cinema

4 - radio

5 - TV

6 - the Internet

It is the first device that feels personal – you don’t even share it with your spouse.

It’s the first always on mass media (always online), always carried.

You can bill stuff to your phone bill, so you can buy ringtones, etc. easily: so they sell more.

It offers a point of thought – you can instantly post/message.

It interacts more closely to your thought patterns than ever before.

It can do everything that all the other media can do – and enhances it.

Companies facilitating the growth of the new web: Google, Apple, Opera

Canada has relatively cheap fixed line telecom, so they don’t use mobile so much.

67% of Canadian homes have a mobile device. The carriers get a lot of volume from data.

There is a growth of around 9% a year.

80% - 90% is normal in the west.

Standards support in the browsers.

Webkit & Opera have much better standards support than the 50 or so other mobile devices currently.

20m iPhones by the end of 2008 – that’s the prediction.

4M were sold in first 90 days - 20% of the market.

Example of the kind of app that’s especially useful in this new world:

http://www.iwantSandy.com & www.jot.com (just bought by Google =) )

Watch the video of Jason Devitt challenging the control that carriers have over the airwaves and restrict use:

http://www.youtube.com/watch?v=UzuD0d0BS4A

Phones should be able to innovate, install applications, change carriers, share networks, etc. – like sharing roads, phone lines & electricity. Currently, to run apps, customize(hack) phones and protocols we have to ask permission: including from our competitors. This will obviously change.

-----------------------------------------------------------------------------------------

Keynote: Innovation is Overrated, Indi Young

· Book: Mental Models: Aligning design strategy with human behavior

· Understand Innovation

o The innovative idea isn't enough to jump ahead of competition

· Book: The Myths of Innovation

· Model Your Customers

o Mental model

· Spend Time with Details

o Moviegoers mental model

§ Decide to Watch a Film

§ Choose a Film

§ Learn more about a Film

§ Choose a time

§ Go to the theater

§ Watch a Film at home

§ Eat Dinner

§ Watch the Film

§ Identify with a Film

§ Interact with people about the film

§ Follow the Industry (movie buffs)

o Look for opportunities to make a difference at a step

§ Identify: partner with other brands (product tie-ins), share online (top 10, favorites)

§ Choose a Film: opportunities to peruse, seasonal films (Halloween, Valentines)

§ Go to the Theater/Eat Dinner: Find restaurants near theaters.  SpotScout (parking spot finder)

§ Watch the film: Comparing film to book, compile metacritic reviews mentioning book

o http://www.ok-cancel.com/archives/article/2005/08/mental-model-building-step-by-step.html

o Real Client: Engage.com

§ Figure out how to deal with an attraction

§ Get a better sense of a person

§ Go out with a person for the first time

o Adaptive Path

§ Initiate a project

§ Conduct weekly client meeting

§ Ensure client is satisfied with work

§ Weekly meeting with other PMs

· Looking for insights

o Find a gap to fill

o Look for scarce or weak support

o Redefine & augment existing feature

o Look for surprises

o Combine Related behaviors & features

o Look for emotions

o Examine spaces formerly crossed out

o Rethink features that don't match a behavior

---------------------------------------------------------------------------------------------------


The 3 Stages of Dynamic Systems

Boris Mann

UGC – User Generated Content

CMS – Content Management System

CMSs that he mentioned – Drupal, Expression Engine, Joomla, Wordpress

Frameworks - .NET, Rails (Ruby), Django(Python), Symfony(PHP)

Their characteristics:

They may have calendaring, IPod functionality

They may have the ability to include links to Open ID

<link rel = “”opened.delegate” – this triggers you to get to a page with Open ID triggered.

When you set it up you should:

Have a structural sitemap, for Search Engines

Have realistic lorem ipsum text

Use structural tags, to make the content more meaningful to Search Engines and accessibility aids

Have a live preview available

Have image resizing available for the users

Need configuration, expertise to interface with client and teach them blogging, forums, ratings systems SEO, etc. etc. People need support after they get the system.

Set up a group of features/plug ins and stick to them. Don’t spend time thrashing new ideas around: focus on what you do well.

Put it into phase 2 of the project if the client has requests out of the box.

Don’t build from scratch. Rest on the shoulders of giants, in other words.

1. Simple content management

· client wants to edit their own pages

2. Beyond the blog

· calendars, forums, wikis

3. Building web applications

· "I'm pretty sure we need a custom function for that"

· User-generated content (UGC)

· strip out/close tags

· live preview

· image resizing (crop/scale/placement)

· WYSIWYG editors: we hate them, clients love them

· Growing demand for Community Managers to attach to clients.

--------------------------------------------------------------------------------------

Serious Business: Putting Social Media to Work, Anil Dash

· OpenID

o 400,000,000 IDs have been created

o Yahoo, AOL, etc.

o Banking industry in Europe is starting to use OpenID

· We have the ability to make these things real.

· We can move the rest of the industry.

· Reliability

· Scalability

· Measurability

· Manageability

o Example: Twitter's intermittent outages during conference

o There will eventually be an enterprise version of Twitter.

· You cannot put your business processes in someone else's hands.

· Point to successes that already exist.

· Finding the opportunities

o Identify where email (or other tech) is failing.

· Find out where serendipity would help. (accidental discovery)

· Think about permanence.  (Archiving)

· Think about impermanence. (People come and go.  Project groups)

· Emphasize Iteration. (Office 2007 causing problems for clients on older versions)

· Get involved in an appropriate relationship with a coworker.  (XFN inside the enterprise)

· Play nicely with others. (Interoperability.  Employees are resistant to change.)

· Be patient.

· Find the advocates.

· Choose "all of the above".  (Facebook and MySpace are both used by people)

· What's Next

o gesture (poke, tweets)

o implicit expression (inferring meaning)

o more nuance, more empowerment, more control

o Stop rewarding those who shout.

o Action (Action Streams/Life Streams, Facebook News Feed)

o Identification & Expression (OpenID, Avatars)

o Connection & Collaboration (OpenSocial, Widgets & APIs)

o Notification (Jabber, Twitter)

-----------------------------------------------------------------------------------------------

Real World Accessibility for Real-World People

Derek Featherstone – www.37Signals.com, www.furtherahead.com, www.boxofchocolates.ca

Make sure focus isn’t lost/moved after AJAX actions.

Error messages need to be in close proximity to what caused the error, so that users don’t have to move around the page to find them if they are zoomed in, and find them tough to see.

Don’t fall victim to checklist syndrome when attempting accessibility compliance.  You don’t have to meet EVERY requirement (unless client says you do) forsaking true usability.

Allow for simple keyboard navigation and usage.

Accessibility isn't limited to visual impairments; physical impairments need to be considered as well – for instance carpal tunnel/arthritis.

Bad examples:

2 advanced search boxes close to each other on same page – unclear to folks with partial sight.

Parentheses around text (as in ‘name(s)’

– problem to partially-sighted because they find it difficult to see.

If people see “News for September 22, 2007” – there is an expectation set up that there will be an

archive somewhere. This happened on one of their sites, so they changed it to “highlights for Sept…”

– the kind of thing that you only see when you test with real people.

When he clicked to enable a friend to see his trips on www.dopplr.com, the notification to say that it

was enabled appeared on the screen above where he clicked. Problem: the screen reader would have passed that point. You could move it with CSS, or notify the user in the title bar.

Using AJAX is great to maintain state & focus. However if you are designing a form, ensure that the user

can tab to the next form field – especially someone using AJAX. Put in tabindexes. www.amazon.com – graphic checkboxes that can’t be operated by a keyboard. They are not recognized by screen readers, and you can’t tab to get to them without performing a few tricks.

Flickr – the titles above the images are editable: you can’t discover this until you mouse over. That’s a negative point against them. You won’t end up at this editable region if you work using a keyboard, and so they put in a list of info and links telling you how to edit the title, and giving you a different way to do it – so no alternative page, but an alternative option for people. That’s a point for them.

Have large radio buttons & buttons so that if they navigate with difficulty with a mouse/touching the screen, it is easier to navigate.

When you zoom in, it can be tough to navigate because you lose parts of the screen as context for

where you are on the page.

Keep explanations and text short so that there is not so much to navigate through, and keep tooltips

short & close for the same reason.

One solution to the various screen readers and how to enable features is to have folks have their local

machines run scripts that make their version look different – an employee, for instance.

-They could use Greasemonkey: https://addons.mozilla.org/en-US/firefox/addon/748

- https://addons.mozilla.org/en-US/firefox/addon/1891

-or bake their http://www.visionaustralia.org.au/ais/toolbar/

Have error messages close to the fields that they pertain to.

Then it is more obvious, and folks who have to zoom in can see it.

WAI: ARIA support – (Accessible Rich Internet Apps):

have attributes in divs that are role=”error”, and have the markup be semantic, and thus meaningful to screen readers.

Voice activated technologies such as Jaws use buttons & links. In Google maps, they use divs with an onclick event. In this situation, you could use image replacement and custom controls, so that a keyboard can focus on them.

An example of a screen reader: JAWS

FireVox, a screenreading Firefox extension: http://firevox.clcworld.net/downloads.html.

Dragon is another accessibility app: http://www.aidis.org/shop/details.php?id=44

Firefox extensions that enable users (or their admins/organizations) to surf with scripts that run to interact with some or all web pages:

https://addons.mozilla.org/en-US/firefox/addon/748

- free translation service for this: www.babelzilla.com

http://groups.csail.mit.edu/uid/chickenfoot/

------------------------------------------------------------------------------------------------------------

What Makes a Design Intuitive?

Jared Spool, User Interface Engineering: uie.com

Know what web defaults are (asterisks for required fields, etc.)

“*” means required (Avis did the opposite), who decided this? When did it become un-intuitive to do it another way?

Let people think they weren’t trained to do stuff.

Designs Can't be Intuitive

o Designs don't intuit anything

o People intuit things

o Calling a design "intuitive" is a shortcut to: users can intuit what to do with the design right away. Or user doesn't perceive training is necessary.

It’s not intuitive when the user:

o   Looks at it and doesn't know what to do

o Feels it takes too much time to figure it out

o Becomes frustrated

o Flash scrollbars that don't work as expected

o   e.g. Multi day picking for hotel reservation.  Am I getting one night or two?

Intuitive is Personal

o What users currently know (audience)

o Their previous experiences

o Use language they understand.

o Intuitive Design is Evolutionary

o Knowledge spectrum

- Know nothing about design to know everything about design

- Current Knowledge Point: What the user already knows.

- Target Knowledge Point: What the user needs to know

- The Knowledge Gap: Space between, where design happens

The Knowledge Gap

The knowledge gap is between the person’s current knowledge point & the target knowledge point.

Different types of knowledge:

tool knowledge – specific to the tool you use

domain knowledge – area of expertise about the site/area of data

- You can train folks how to use the product by giving help text (e.g. wizards)

When is Design Intuitive?

o Either:

- Current = Target Knowledge

- They are at the same point

- The user already knows what to do

o Or

- The knowledge gap is very small

o Two Types of Knowledge

- Tool: new tool means new rules

- Domain: Law, medicine

How to make your site intuitive

Techniques for Creating Intuitive Design

o Field Studies

- Help identify Current Knowledge

o Usability Studies

- Help identify Target Knowledge and Gap

o Personas

o Patterns

- Methods to communicate knowledge about users and solutions to entire team

Making things Intuitive

o Reduce target

o provide clear clues to increase current

- without resorting to training or help

o Wizards work well for this.  We go in small steps.  Small gap in each step.

- Must be within the gap.

o Reducing Target Knowledge

- Necessary to make design seem intuitive

- Has to match the user's goals

Exploratory Discoverability

o New trend in design

o Popular with AJAX and RIA Support

o Makes interface feel like a game

o Give clues whenever possible

- careful design can reduce/eliminate clutter

Setting up an instant message service

Skype & Microsoft ask a bunch of questions.

Yahoo messenger setup has inline help text for setting it up with/without proxies, watching for firewalls, etc.

AOL has an “Autoconfigure“ button. If it doesn’t work, you’re on your own L

A design is intuitive when:

Site requires the current knowledge level

Site requires a little learning

------------------------------------------------------------------------------------------------

Dash – Serious Money: Putting Social Media to Work

Anil dash - http://dashes.com/anil/

Tools that he finds useful:

TypePad, MoveableType, Vox

The web is used by us the same when we are at home as when we are at work.

The web needs to allow free communication lines at work – texting, file share, twitter etc.

Think about reliability, scalability, measurability, manageability – that’s what management thinks about. They will benefit from seeing these in action at work.

When thinking about which apps to implement, look at successes & learn from them: look at the social impacts.

Email was designed for a different social environment. You get spam & dumb messages, and archiving doesn’t work well. There are better and more dynamic ways.

Blogs, wikis & other web surfing allow you to make more connections.

Think about whether the information that’s passed around needs to be permanent/temporary?

You can iterate incorporating new forms of communication, so that it doesn’t snarl everything up.

Be patient and make sure that the new media forms play nice with existing systems.

Find advocates in your company when you innovate communication techniques like this.

Next:

More empowerment, more nuance of expression (how well you know someone, more subtlety in how you say things) & stop rewarding those who shout the loudest.

There will be active tools that can manipulate & organize the data.

You will have many online ids & ways of express yourself.

There will be many ways to connect & collaborate data.

There will be more notification systems: interoperable chat systems.

What is influential in the latest web technologies?

Facebook news feeds,

openID avatars (no login info required for social/chat sites)

openSocial widgets & APIs.

Jabber & Twitter

Wednesday, March 26, 2008

unobtrusive popups-single & multiple

<script type="text/javascript">

function ShowPopup(page)
{
window.open(page,"_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=no, resizable=yes, copyhistory=yes, width=400, height=400");
}

</script>


<a href="../JavaScript/playtime.html" onclick="ShowPopup(this.href); return false;">

SEO-meaningful text here
</a>



=================================
- Multiple popups in a page:
=================================

<script type="text/javascript">

function ShowPopup(page, thisWidth, thisHeight)
{
window.open(page,"_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=no, resizable=yes, copyhistory=yes, width=" + thisWidth + "px, height=" + thisHeight + "px");
}

window.onload=popups;

function popups()
{
var catPics400 = document.getElementById('cats_400');
var catPic = catPics400.getElementsByTagName('a');

for (var i=0; i <
catPic.length; i++)
{
catPic[i].onclick=function()
{
ShowPopup(this.href, '400', '400');
return false;
}
}
var catPics600 = document.getElementById('cats_600');
var catPic = catPics600.getElementsByTagName('a');

for (var i=0; i <
catPic.length; i++)
{
catPic[i].onclick=function()
{
ShowPopup(this.href, '600', '600');
return false;
}
}
}

</script>

In page:
<ul id="cats_400">
<li>
<a href="page.html">
SEO-meaningful text here
</a>
</li>
<li>

<a href="page.html">
SEO-meaningful text here
</a>
</li>
<li>
<a href="page.html">
SEO-meaningful text here
</a>
</li>
</ul>
<ul id="cats_600">
<li>
<a href="page.html">
SEO-meaningful text here
</a>
</li>
<li>
<a href="page.html">

SEO-meaningful text here
</a>
</li>
<li>
<a href="page.html">
SEO-meaningful text here
</a>
</li>
</ul>

Tuesday, February 12, 2008

It's all about podcasting, baby!

It's all about podcasting, baby!

As a born multi-tasker, I never have the time to settle to any single thing at one time. Podcasts were totally made for me. There is so much out there for web devs to play with, and it is important to be informed about what is hot - and what is not.
I have been an avid listener to podcasts from the BBC and the NYTimes for a while now: and I love the brief overview that the front page of the NY Times gives me, the
in depth international views from the BBC documentaries: and everything in between.
The subject mattters vary, and I get a wide perspective on many aspects of life.
The only trouble is that there are so many, and they all look so darn good :)

The absolutely grooviest discovery that I have made of late in the podcast world is young Mr. Dan Carlin. My kinda guy. An off-the-cuff and real world look at what's happening - and what happened way back in history.
Dan Carlin, we think you de man

Big in the web geek world - I am finding these intriguing as an overview, and a Brit view on these things:
boagworld, and of course
the .net magazine podcast
- this guy talks a little funny: but I can relate :)

There's also Talk Crunch and
The Web 2.0 Show - crazy stuff. Looking forward to diving into these very much. So much to hear...

Saturday, February 9, 2008

post-Web Directions North

Fabulous!



Talented line up: it is really incredible to me how many people are involved in working on mind-bending apps and tools on the web. It was fun to discuss where standards are headed with folks like Erik Saltwell, dev manager of Expression Web and other star-studded celebs.




Microformats, mashups and forward-looking site designs were all the rage - designing for standards-based browsers (bearing in mind that IE6 users will lose out on certain features), looking at different hardware for accessing the web/receiving feeds, incredible ways to build mashups, and on and on.




Links:


NGenworks


Flickr pics




More later....

Tuesday, January 15, 2008

Incredibly useful web tools

Mozilla extensions:

Web dev toolbar - enable & disable scripts, CSS, etc. Highlight elements, classes, etc.
ColorZilla - detect and identify hex colors
Firebug - identify elements & classes, view the node tree, debug scripts
YSlow - see page load times, and how to improve it


IE extension:
Dev toolbar - identify elements & classes, view the node tree


General tool:
Meazure - pixel tool, see the grid

Saturday, January 12, 2008

Web Directions North

I will be at Web Directions North at the end of the month: and it will be an awesome opportunity to swat up on the latest developments in the web world. I am particularly excited about the JavaScript workshop with the fabulous Mr Adams - and I can't wait to transcend CSS with the venerable Mr. Clarke.

I am extremely passionate about creating a solid script library for Ascentium: and evangelizing best practice in the industry, so this stuff really lights my fire.

Creating buildings became more complex when government agencies and legal bodies got involved: it is now mandatory to include wheelchair access, fire escapes, air circulation, sprinklers, etc. When institutions become available to the public, the public develop expectations. The web is becoming an increasingly important tool on the world stage for: brand image, PR, advertising, community building, retail, and on and on. People feel possession of what they read online: they feel that the web must enable them. They expect search engines to show them realistic listings of relevant content. They want to be able to resize text, view pages on mobile devices, quickly download video, be able to check out sites with screen readers, and so on. Professional web developers are therefore finding that our page structures and content have to take into account new factors as the web matures. Semantic HTML, SEO-aware AJAX, accessible markup, separating content from markup and behavior - these are all admirable ways to achieve many of the new challenges.

On a personal note, it will be interesting to see how fellow web developers see their role. As the web expands and develops, the roles required to produce quality sites also develop. The front end developer's role has increased exponentially in the last year or two. it now requires an in depth understanding of: HTML, XHTML, XML, CSS, JavaScript, SEO, accessibility, Microformats, meta tags, mime types, favicons, behaviors, expressions, hacks, design concepts, pngs, PhotoShop - and various server-side languages.

A few years ago, it was as if the front end was a low-entry point for developing pages: and if you wanted to get serious, you had to go into programming, and you probably would never put too much effort into the front end again after that. Now that more and more sites are regularly over a thousand pages and need to be maintained over many years, there is an increasing need for web devs who can maintain searchable and maintainable sites with light and modular pages.

It will also be interesting to see if there is any discussion about a future front end certification. I am sure that this idea is germinating somewhere: and I am sure that unobtrusive JavaScript that degrades gracefully will be a big part of it.

Exciting times: more later....

=)