The Jay Cornelius visit

 So, Jay Cornelius [of coffeecup.com] stopped by to talk about new fronts HTML5 & CSS are conquering.  Why are web standards important?  He did bring some points home for me.  One thing he mentioned was that web standards are important because they aid in machine readability, SEO, portability [mobile accessibility] and for users who are impeded [e.g. blind and/or deaf people], web standards ensure that content is accessible to everyone.  An example would be the use of "alt" or "title" tags for an images, which would ensure that screen readers would be able to pick up.  As Jay put it, "web standards help us convey meaning to machines other than humans".

So Jay also explained the Acid Test, which basically tells how closely compliant a web browser is.  He did point out that the browser that adheres to web standards is Opera - who?  Though not as popular as IE/Firefox/Safari/Chrome, it is gaining popularity.  The reason for Opera's success can be attributed to [among others] one Håkon Wium Lie who is their Chief Technical Officer.  Håkon Wium Lie is the 'godfather' of CSS.  He is the guy who wrote the CSS spec so er' go.  Jay did talk about WebKit [a layout engine that allows browsers to render web content] and how close and quickly they are catching up but for now, Opera is clearly ahead of the web-standards-compliance race.

Jay cautioned against the using acid tests as a measure of browser rendering because, in his words, "the acid test does not tell how a browser tests in the real world".  Ever heard of the box model?  For one, thanks to Mr Cornelius, I now know that it was a key difference in the difference between Internet Explorer & Netscape.  I also learned that IE introduced CSS - kinda.  Shock right!? Only thing is they did it poorly which lead to great demand for change because of developer and user dissatisfaction.  So....[ahem] all browsers, developers, and users should thank IE for sucking so bad that the revolt resulted in greater innovation and web tools.

When designing a website, the issue of cross browser similarity in as far as appearance and functionality is an oxymoron.  It is extremely difficult to say the least - with the ever changing versions and capabilities of  new releases of software/computers - it is practically impossible.   As a developer, he advised that one does not have to deliver content that looks exactly alike across browsers.  What is paramount is to "deliver results fast, have a rich user experience for whatever browser the user is utilizing".  Lets face it - we are faithful to our browsers - I do not see Mac Users switching between IE and the same goes for the rest of the browsers.  Once we get used to a browser, it becomes our BOC [Browser of Choice] so - cater to the user and  less focus on cross browser similarity.  Those days are over!

Another tidbit I did not know - Internet Explorer [version 6+] - yes even IE - supports Doctype.  He advised against running IE is quirks mode and said using the right character type is crucial.  His suggestion- he suggested charsetUTF - 8.

All in all, it was a good visit.  I learned some new things and look forward to the promise HTML5 will bring.

SpoolCast: Luke Wroblewski and Innovations in Web Input

Nod to Sophia Petrillo

Question begs to be asked – What does a Golden Girl have to do with Luke Wroblewski & Web Design and Usability? Picture this: Atlanta – the year 2010. Find yourself at a Web Conference on Usability. You got there at the crack of dawn and are as hungry as a lark. You along with some guys are carrying on a discussion. Some guy is hogging the conversation and you're looking for a break without sounding rude. All your senses are drawn to the food that's just been placed at the catering table on the other side of the room. You, after all paid $300+ so you might as well get your food's worth. So, in an effort to mute the never-ending-chatter-person, you decide to finish said annoying guy's sentence in the hope of interjecting and moseying on along to the smell good table, but alas! Said guy is quick to inform you that you got it all wrong and that is not what he meant to say…. and now goes into another tangent and all you think is Why? Why? Why? [if you did not get the Sophia P joke too bad!].

Competition. A word I love when companies duke it out in an effort to garner customer loyalty [among other things]. Google recently added Google Instant. Real time search results as you type. Results update as you type. Woo hoo for Google right?! Well, according to Luke W., Yahoo! actually had this technology as far back as 2005. Makes me glad to know that the customer [me] is at the forefront of innovation. Unfortunately for Yahoo!, Google worked out all the kinks and rolled it out before they did. So this round goes to Google. However, what if, as you type, the results brought back were irrelevant to what you wanted – much like finishing somebody's sentence thinking you know exactly what they are going to say only to find out you were wrong? This feature would be totally irrelevant if not annoying. As Luke W. said, "there is a fine line between relevance and distraction..." Any results that are apart from your match criteria only detract from and could possibly lose you customers.  Another consideration is server load implications, which is the reason Yahoo! did not include it on their search. Real time searches mean that two or three searches are being carried out concurrently and can increase server load ten fold. This drastically increases server load and considerations have to be taken into account.

Mr. Wroblewski listed 3 innovations in Web Usability that would enhance user experience:

1. Rich Interactions:
2. Input can come from anywhere.
   Users are spending more time off your site than on.  E.g. Email clients, chat windows, bookmarks, browser extensions, calendars, e.t.c.  As opposed to previous experience that required user visits and filling in forms as a way to capture information.  Case in point - this blog is typed in Microsoft Word and published by a click of a button.
3. Providing information to Social Networking Systems.
   Since these networks already have the platforms that allow users to input information, many types of forms such as sign up , profile creation and any form that requires inputting information can be done away with.  User experience connections would only require hitting a button/link and make connections [case in point: uploading images to a website.  A practice that users do not like doing].

His metaphor at the end is not only funny but serves as a cautionary tale as well: " If a 160 million are driving down a road and I put a pile of dog poop on that road, chances are 1 million people will drive through it.  Numbers alone are not an indicator that you have a good product." 

Color on the Web

Color has the ability to evoke moods, excite or energize, calm or sooth.  Though mostly thought of when it comes to art and/or interior design, color is an integral design component in web design.  Bing, Google & Mozilla have incorporated wallpapers to their search Engine page.  A close examination of any wall paper or picture reveals a large amount of color combinations ...Think about it…. Why did all those famous fellows of old – Picasso, Degas, Michel Angelo – become famous [and make a boatload of money in the process…I digress…]?  Either we are seriously lacking in taste, or they mastered the art of using color to convey emotion with paint.  What if the Sistine chapel was painted a screaming yellow or purple?  Would the painting be what it is renowned for? 

When used correctly, color has the ability to help a web site evoke certain feeling or emotion.  After all, loosely interpreted, isn’t a picture is a combination of various colors/hues/tones/shades with varying boundaries?  For warm exciting tones, a picture will have varying tones of reds, oranges, browns, yellows, greens and/or golds.  For cool calming tones, the color palette will for the most part incorporate varying tones of blues, purples, grays, whites, and/or silvers.   

Another way to think of color design is to think of food.  We always eat with our eyes first.  Before our other sensory abilities kick in, eyeball appeal is the primary attention grabber.  Similar to web site design, color gives the first impression- ‘if you will’ - of the overall look of the website and intrinsically, defines your brand.

The Relationship of Colors:

Primary Colors
Red:-Yellow:-Blue:- Three colors that in different combinations make up the color wheel.  They cannot be reproduced by mixing and matching other colors.

Secondary Colors:
Orange:-Green:-Purple:- You get these colors by mixing primary colors together.

Complimentary Colors: Colors located on opposite ends of the color wheel.  They complement each other.

Monochromatic Colors: Hues/tones/shades of the same color.

Tips for using color on the web:

      ~ Know your audience and figure out what kind of feel you want your website to have.

      ~ Select a color scheme and ‘swatch’ your color choices to come up with the best combination.

      ~ Less is more:- One color used sparingly but smartly can work very effectively.

      ~ Use browser safe colors that will render well.

Web Standards [a visit by John Allsop]

John Allsopp stopped by last week for a 'passionate' talk about the importance of web standards.  I really enjoyed the talk and learned a lot from it hence this blog.


......Are you in need of a vacation from your life - where a beach, a cabana and a cold drink in your hand felt more like a necessity? Say you were to surf for vacay spots. You then decide on Tuvalu or Timbuktu [stay with me]. You search online using your preferred browser, make reservations and mozzie on over there. When you get there, everyone speaks a language you do not understand, and likewise, they do not understand you. Huge Problem! Thankfully, the world has an unofficial universal language a.k.a. English! A nice, funny and humor filled book about this fascinating language, (as per recommendations from Mr. Allsop) is The Mother Tongue by Bill Bryson.

So what does English have to do with web standards? Everything! well kinda. Albeit a metaphor, English, much like web standards affords consistency, eases the sharing of information, reduces cost, and saves time. In similar ways, web standards enable consistency of information across browsers and other electronic devices accessing the web, gives web pages a longer shelf life, eases the burden on developers to have code functional across browsers, and - of course - results in huge cost savings. 

Referenced from Designing with Web Standards

In his book Designing with web standards, Jeffrey Zeldman discusses forward compatibility in relation to web standards. He writes, "designed and built the right way, any page published on the web can work across multiple browsers, platforms, and internet devices—and will continue to work as new browsers and devices are invented..". He also goes into length of why web standards are important. Take browser sniffing code for example. Owing to the complexities in each browser and their upgrades, developers have had to write browser specific code, a practice that is not only costly and time consuming but births a myriad of problems such as double digit browser versions that Mr. Zeldman says shows "fallibility of UA sniffing..". [The User Agent (UA) is a "short string of text that contains the browser's name, version, and platform, and acts as a digital fingerprint for the browser", which unfortunately can be undetectable in certain circumstances. This in turn means that browser specific code is not executed] 

My browser of choice currently - Firefox. Firebug plus other Firefox add ons make it my to-go-to browser. I also enjoy an online game or two. What I really dislike is a message - IN RED no less - that I cannot play said game on Firefox... and I have to switch.... bla bla bla. Annoying!! To say the least. Now - if all browsers conformed to web standards - such uniformity would make for a much richer user experience.

The CSS Zen Garden is an excellent website that shows just how powerful web standards can be. Each of the designs incorporate the exact same base HTML code and the examples therein [with the help of CSS] exemplify the many ways design can vary, despite having the same code.

Invalid Markup is another problem that web standards will take care of. I have written code in times past, where I inadvertently forgot to close a tag or two. Most browsers have rendered the page but a few catch the mistake. Bad Markup that is not picked up by browsers will only cause problems down the road which makes debugging/redesigning more difficult, where old problems crop up as new ones. This only adds to time and cost spent on the whole development process.

There is yet to be a browser that is fully compliant with web standards [as laid down by the W3C ] but with more noise generation from developers and users alike, the future does look promising when compared to times past when browser compatibility was - to a much larger extent - wishful thinking.

Information Architecture

Ever visited a website whose eyeball appeal was magnetic and made you go WOW? Whose hypnotic design invited you to 'enter' and stay a while - and while you stayed [hopefully not on Ceasar's time], you glided smoothly from page to page finding what you were looking for without much trouble? Though I have yet to spend a red cent on their products, one such website - in my opinion is - is The Swoosh Guys.

Effectively designed websites are in part a result of solid Information Architecture (IA). Below is a definition of Information Architecure as defined in Louis Rosenfeld & Peter Morville's book "Information Architecture for the World Wide Web":


in·for·ma·tion ar·chi·tec·ture

1. The combination of organization, labeling, and navigation schemes within an information system.
   
2. The structural design of an information space to facilitate task completion and intuitive access to content.
   
3. The art and science of structuring and classifying web sites and intranets to help people find and manage information.
   
4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.
   

IA can be broken down into four components:

1. Organization Systems
This refers to the technique/study/classification of a site's content. It is the way a site content is presented.
2. Labeling Systems
These help describe categories, options, links using descriptive and appropriate language. They help the user know where they are, what the page is about, where and how to search and get what they are looking for, leave feedback, e.t.c
3. Navigation Systems
Navigation systems aid users movie easily throughout the web site and the content therein.
4. Searching Systems
Search systems give users the ability to search content locally(search within website) or globally(search the internet) to find exactly what they are looking for.

Web Writing [summary taken from Erin Anderson et. als’ book : InterACT with web standards: A Holistic approach to web design]

A visit to any website reveals that all cyberspaces – good or bad – contain text. Think of any horrible ones? Click on the link to see some Web Pages That Suck.

Properly designed and organized text generates eyeball appeal. Words tie the whole website together – be it image tags or paragraphs.

What constitutes good web writing?

• A balance between user needs and business goals:
  
  • Knowing what your users need and how to present it.
    
  • Help the user accomplish a task.
    
  • Be consistent
    
  • Answer user questions
    
• Having a good strategy
  
• Following the rules of good composition
  
• Being able to solve content problems to ensure that the voice, tone, style, business objectives and customer goals are met.
  
• Having solid web design and development e.g. knowing how to break text into visually appealing blocks.
  
• Having good metadata that helps your website become more visible to search engines and findable by users.
  
• Understanding the online/offline user experience.
  Goals and expectations of online and offline users differ. Online readers are task oriented – they know exactly what information they require and want to get it in the shortest time possible and move on.
  On the other hand, offline readers are passive and relaxed readers.
  
• Taking into account all your users even the ones that lack visual abilities and access the website through screen reader devices.
  
• Engaging content
  

Good web writing has the ability to solve business problems and can help an organization form a lasting relationship with its customers. It can also help strengthen the company brand and solve many business problems.

Some challenges that come with web writing:

• Not being part of the design process from the inception.
  
• A website is a representation of the firm as a whole and therefore ensuring cohesiveness might present a challenge as each business entity within the organization might want content written in a specific way.
  
• Also, lack of editorial oversight as no one part of the business owns the material thereby leaving web writers without clear leadership.
  

TOP 10 WEB WRITING TIPS

1. Love the inverted pyramid.
   
   
2. Believe less is [almost always] more.
   
   
3. Avoid sounding like an infomercial.
   
   
4. Make your copy easy to scan.
   
   
5. Write killer headings.
   
   
6. Lead with Active words
   
   
7. Use simple sentences
   
   
8. Keep your promises
   
   
9. Set up a good review process
   
   
10. Benchmark off good websites