Smartial Wayback Machine Text Extractor
This article contains 3826 words.
Web Directions North
Web Directions News
RSS Feed
Working with Ajax Frameworks by Jonathan Snook
- Frameworks provide ready-made solutions.
- Often force a specific style of code e.g. the jQuery object.
- 3 Layers to Javascript/Ajax:
- Core – working with the DOM (the actual document).
- Application conveniences – manipulating/processing data.
- Widgets – design/interaction/code
- Popular frameworks:
- jQuery
- Dojo
- ExtJS
- YUI
- Mootools
- Scriptaculous
- Prototype
- Snooks favorite framework? It all depends on what you’re trying to accomplish. Each framework has its own strengths.
- 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.
- CSS:
- Reset
- Base
- Fonts
- Grids
- Dojo:
- Core – DOM utility
- Dijit – application widgets
- DojoX – cutting edge techniques: drawing, offline support, etc.
- Jonathan also covered some common techniques e.g. show/hide/toggle, autocomplete, sliders using some of the popular libraries.
Posted by Jeff on January 30th, 2008 | 1 Comment »
Tara Hunt on government in the Web 2.0 era
Tara Hunt, the powerhouse behind Citizen Agency, gave a talk at Web Directions North today on how the very different worlds of Web 2.0 and government can collaborate and co-exist.
Hunt highlighted openness, collaboration and community as the core tenets of Web 2.0, as well as the concept of trust. None of these concepts have traditionally been at the forefront of government. Neither has the very public way in which today’s digital generation lives unabashedly online, or the “work in progress/public beta” approach to blogs and web development that encourages collaboration and innovation in real time.
Hunt said Government 2.0 is about actually working with the public, and not being afraid of open betas. But most importantly, she said government 2.0 is about trusting your citizens as partners.
Hunt highlighted the work of two designers who tackled the hideous Caltrain site and remixed it into iamcaltrain, a web 2.0 site that is much easier to use and isn’t eye-scarringly ugly. The only response from Caltrain was to tell the developers to not use their logo. By contrast, the Toronto Transit Commission collaborated with organizers to create TransitCamp, a Barcamp-like unconference designed to brainstorm making public transit better both on and offline. Transitcamps are now happening in cities across the world, and, at least in the case of the TTC, with interest from a government agency.
Hunt also pointed to bloggers coordinating help during crises like the recent San Diego fires, as well as the phenomenon of photos flooding Flickr during natural disasters. While the media made it look like San Diego was doomed, ordinary citizens were coordinating rescue efforts and getting both good and bad news out to the public. Hunt highlighted other efforts at public citzenship such as Fixmystreet and Chicagocrime.org. In effect, average citizens are working around the limitations and slowness of current government and lobbying, advocating and in some ways replacing government services using Web 2.0 technologies.
There have been some inklings of progress. The US Library of Congress has placed their collection of photographs on Flickr, allowing everyone to tag, identify and use these photos for their own creative ends. But it remains to be seen if government will embrace the open nature of the web or stay mired in bureaucracy and secrecy.
Posted by Warren on January 30th, 2008 | No Comments »
Five Essential Composition Tools for Web Typography with Kimberly Elam
An excellent introduction to typography on the web. Elam presented many visual examples of good and bad typography on the web. She also pointed to a number of graphic design principles that can transfer to the web.
- The typographic pledge:
- “I will not squish or stretch type.”
- “I will not outline type.” – each character becomes multiple strokes and becomes harder to interpret visually.
- “I will not stack type.” – ascenders and descenders crash into each other; makes it very difficult to read. Look to spines on books for the proper way to add text to a tight vertical area.
- “I will use prime marks and quotation marks appropriately.”
- “I will appropriately use hyphens, en dashes, and em dashes.”
- “I will honor the classic families of type.” – to develop an appreciation of types and familiarity of types.
- “I pledge not to commit crimes against typography.”
- “We all know what bad typography looks like”:
- Example: Longscycle.com (found via webpagesthatsuck.com)
- Too much happening on the page.
- Logo repeated multiple times throughout the page.
- Tons of logos from all their suppliers crowded together – provides no value to the user.
- Bad typography:
- Disorganized
- Unstructured
- Unreadable
- Unclear
- Good typography:
- Organized
- Structured
- Readable
- Clear
- Steps to good typography:
- Content organization
- Visual structure:
- Grids are important to provide a visual hierarchy to information.
- Nonobjective Elements:
- Geometric elements such as rules, lines, boxes, circles, rectangles, squares.
- Provide reinforcement to the structure of the page when used properly.
- “Circles are like visual electromagnets.” Vision is strongly drawn to circles e.g. bullets.
- Tone:
- Text color.
- Text weight.
- Can change the meaning of text to a reader, or even how the text is read/interpreted.
- Good typographic practice:
- Line length: 8 to 11 words per line.
- Background color & texture – solid color makes text easier to read. Textured backgrounds often reduce readability.
- Use upper and lower case properly – all upper case screams at the reader.
- Color deficit – approximately 8% of males have a color deficit disorder.
- Background & text color – best contrast is dark text on light background.
- Picture superiority effect – a picture is worth a thousand words, but show restraint in the number and type of images used. Coupling text with images works well.
- Overall: make typography and design purposeful.
Posted by Jeff on January 30th, 2008 | 2 Comments »
From bedroom to boardroom with Josh Williams
One of the problems a freelancer or small start-up can run into as they grow and takes on clients is the rapid changes that happen in the move from a garage or spare bedroom into a more corporate environment. Designer and icon guru Josh Williams concentrated on how designers experience this change, but his lessons apply to anyone in similar circumstances. He referred to D.N.A. (designer’s natural aptitude), which includes personality, education, hobbies and education, as well as your “bent,” which essentially means what your particular unique take on a subject.
In terms of success in the bedroom environment, after you’ve left your corporate job, it’s important to concentrate on a niche, rather than trying to be everything to everyone. Instead, become an expert in your area of expertise, which will encourage awareness of your skills. Williams also said deviating from your niche to make extra money will eventually wear you down and deviate from your chosen focus, which may mean short-term gains but will result in long-term misery.
With growth, you can become a target, so Williams counseled preparation for negativity and hostility from other companies and fellow small firms. He also said to be careful working with friends and family, and not to align with people simply for the sake of alignment.
Building awareness consists of keeping an email list, which is a simple but critical step to creating buzz for a product, as well as “making it remarkable,” which Williams termed as distinguishing yourself from the pack in order to be noticed. Even if you get a little negative publicity. Williams highlighted his own firm’s use of “garish green”, which garnered some negative blog posts but also drove traffic. He also highlighted work he’s currently doing on a Facebook application, which he said “wouldn’t make you sign up twenty friends in order to use the app.” By crafting a refined app in a space such as Facebook, where apps commonly weigh down your profile page with useless ephemera, Williams follows his own principle of making a “remarkable” product.
Williams also pointed to IconBuffet as a site that didn’t make as much money as it did build awareness and drive clients towards his firm for other projects.
Williams wrapped up by saying that the designer of tomorrow goes beyond design to embrace creation, and can transition between focused niches, all while raising the bar for the industry.
Posted by Warren on January 30th, 2008 | No Comments »
Real World Accessibility for Real World People with Derek Featherstone
- The real world is messy when it comes to a lot of things including accessibility.
- Build things that follow the guidelines but ensure a good experience for everyone.
- Checklist syndrome – people know they need to be accessible, but always turn to guidelines. They don’t know why they need to comply. They just want to be able to state they are compliant.
- This removes the person from the equation and just follows the ‘rules’.
- The checklist is a means to get to accessibility, but not the endpoint.
- Small usability barriers for average users can become huge issues for a person with a disability.
- Advanced search page:
- Differentiation between like elements: simple search box in the header vs. advanced search in the main content area of the site.
- Poses a usability issue for everyone.
- News items:
- “News for September 22, 2007”
- Users expect current/daily news
- Also expect to see an news archive elsewhere on the site
- Changed wording to “Highlights for September 22, 2007”
- This changes the expectation for the user
- Real people need to be involved in testing to identify these issues.
- Dopplr:
- Sharing your trips with another user: notification appears out of context of the clicked action.
- The notification could be displayed near the action link in source order, but use CSS to move notification visually.
- Question: “does this change if you’re using a full page refresh vs. an ajax call?” On page refresh, give the focus of the page to the notification. Possibly include an indication of the notification in the tag.
- The most important thing to remember is to remember that the interaction should have a logical (linear) path.
- Dopplr:
- Managing notifications.
- Clicking with the mouse maintains context (ajax functionality maintains context). Good for sighted users.
- Click using the keyboard shifts focus back to the top of the page. Loses context for keyboard users.
- Clicking with keyboard should reset focus to where the click occurred.
- You won’t find this issue in any checklist or guideline. Will only find this by seeing how real users interact with the application.
- Custom Map Widgets (Google Maps):
- Need to provide the controls in an accessible way.
- Voice recognition software can’t identify the map controls as a link or a button.
- Requires many steps to use mouse grids to narrow down the screen to click a map control.
- Keyboard users can’t tab to any of the map controls.
- Replace Google map controls with custom controls (button elements). Use image replacement and CSS to make them look nice.
- Now, VR software can recognize these controls and keyboard users can easily tab to the controls.
- Makes this interface accessible to all users.
- Amazon.com:
- Tagging mechanism
- Clicking an existing tag’s checkbox adds the tag to a text box.
- Checkboxes aren’t real checkboxes, they’re just emulated with images/Javascript/CSS
- Not keyboard focusable, not visible to VR software as a checkbox. If it looks like a checkbox, it should be a checkbox.
- British Rail (Alternate accessible versions):
- Toilet sign: text and braille.
- Flush sign – braille for title, but not for the additional description (could be a critical instruction that’s not available to non-sighted users).
- Another caution sticker, critical instructions, but no braille available.
- Flickr:
- Inline text editing.
- Instruction only appears when hovering over title with mouse.
- Keyboard users can’t hover with the mouse.
- They provide an alternate link (version), that provides the functionality for keyboard users.
- Inline editing
- Hovering over list item displays a ‘nubbin’ (37signals term) – edit/delete/reorder list items.
- There is no way to interact with them with a keyboard.
- Created a user script (Greasemonkey) that will go through the page and expose all the ‘nubbins’. Allows keyboard users to interact with them.
- A viable one-off solution.
- Live updates
- VR software can’t always keep in sync with live updates on the page.
- Created another user script to refresh the page on live update to allow VR software to keep up.
- Another viable one-off solution.
- Proximity
- Instructions are placed away from where action is occurring.
- Error messages often have the same problem, not placed in context of where the error occurred.
- The future is emulation.
- role=”menu” – <ul role="menu">
- Roles as an identifier for widgets.
- Backed up with plain old HTML, but role added for emulation.
- Beds example: “It still matters what’s under the covers.”
Posted by Jeff on January 30th, 2008 | No Comments »
Web guru Jeffrey Zeldman opens Web Directions North with wide-ranging keynote
Jeffrey Zeldman, the web design and standards expert behind zeldman.com, alistapart.com and myriad other websites, delivered the opening keynote at Web Directions North on January 30th in downtown Vancouver. After fighting for standards and accessibility on the web for the past decade, Zeldman gave a state of the union address to a rapt audience of his fellow designers and developers.
In a talk dubbed “Web Standards: The Return of the King”, Zeldman broke down the early history of web standards advocacy, and explained how in the early days, the mere adoption of the term “standards” forced people to think of web design in different terms. In Zeldman’s words, “if you make something that looks like crap, no designer will want to sign on to work on it.”
It was the adoption of CSS that web standards hit a new milestone, though in the late 90’s CSS implementation across all browsers was in a woeful state. He also covered font scaling, the eventual adoption of the Gecko engine by Netscape (which later became Firefox) and the DOCTYPE switch, which allowed support of older browsers for new standards-compliant content. Selling web standards to designers consisted of sites like CSS Zen Garden, which demonstrated how beautiful standards-compliant design can be, and selling standards to Web 2.0 startups and developers was a matter of explaining how much quicker, more efficient and cost-effective standards compliant sites are compared to custom solutions. In terms of business, standards don’t waste the user’s time or the site’s bandwidth.
Importantly, standards compliance is in effect “honest SEO,” a way to let Google find a site easily while making the web a better place for designers, developers and end users.
Posted by Warren on January 30th, 2008 | 2 Comments »
Not too late
While the Web Directions North Conference kicks off tomorrow, it’s still not too late to sign up. You can do so online, or at a pinch turn up tomorrow morning and we’ll sign you up there.
Workshops are well underway, and there is a great buzz in the air.
See you tomorrow!
Posted by John on January 29th, 2008 | No Comments »
Birds of a Feather sessions announced
As we announced a few weeks back, this year during the lunch breaks at the conference, we’ll be helping to facilitate “birds of a feather” sessions. These will be entirely opt-in! Here’s how it works.
In the lunch area (nice big sit down tables) we’ll have 6 large tables set up each day, with whiteboards/flip charts, and a moderator for the table’s area of interest. Simply turn up, say hi, and join the conversation.
There’s a broad range of interesting technical and strategic issues to choose from. Titles below, and full descriptions on our BOF page.
Thanks so much to all who proposed topics for the sessions, all were great worthwhile suggestions - we came down to available space in having to limit the total number of sessions.
And the sessions are:
Wednesday
1 year ago: from unemployed to Web Developer at Yahoo!
Klaus Komenda
Large scale CSS Frameworks
Tom Cartwright and Richard Northover
Ambient Personalisation
Seamus Leahy
Selling Web Standards
Andrew Pritchard
Progressive Enhancement
Tim Wright
Web standards in K-12/Secondary and Teritiary Education - is there a way?
Matt Harris
Thursday
CMS + web standards
Miyuki Fukuma
Security 2.0
Scott Baldwin
Doing it all yourself: being a Jack or Jill of all web trades
Ricky Onsman
Where do the browser and the desktop meet?
Ryan Stewart
Front-end Certification
Tyler Roehmholdt
Putting Sharepoint on a Diet
Mark Simonds
Posted by John on January 24th, 2008 | 4 Comments »
Interesting times
We live, as the Chinese adage says, “in interesting times” when it comes to the core technologies of the web. In recent weeks, days and even hours, there have been significant developments when it comes to core standards like CSS and HTML, and technologies like the browsers without which we don’t really have a web at all.
Whatever your position on these debates and developments, you’ll find very significant contributors to the development of these technologies and standards, from companies like Microsoft, Opera and Adobe, from the W3C, from the Web Standards Project, as well as others keenly interested in making the web work right at Web Directions North. There’s no better way to cut to the chase, or even put your case, than to meet and discuss these issues with those best placed to influence and implement them.
One thing I’ve learned over the years in meeting and chatting with folks like this is its best to leave your preconceptions at the door. They are just as committed to and passionate about the web as you are. Passions can run a little high from time to time about some of these issues, which is both a great thing (people really care) and can lead to difficulties in the heat of a discussion. But if we keep in mind that at the bottom, we are all on the same side, then the differences can be seen in the context of differing challenges faced by different people and organizations in the web ecosystem.
So if you see folks from Microsoft, Adobe, Opera, the W3C, Wasp at Web Directions North - people whose names you may recognize, whether speakers, or attendees, go and say hi - that’s a significant reason why they come along. Chat about the issues that interest you - your opinion will definitely be respected, though maybe debated and discussed, so be prepared for that too.
Posted by John on January 22nd, 2008 | 3 Comments »
One week to go
It’s only a week to go now until Web Directions North kicks off. Already numbers are far more than last year. Final preparations are underway. So, if you were thinking about coming - don’t miss out! The lineup is amazing, the location is wonderful, and the atmosphere will be electric. Start making your final preparations, and we’ll see you in a week!
Posted by John on January 21st, 2008 | No Comments »
« Previous Entries
Next Entries »