Jan 31, 2007

Gmail Usability Issue

Filed under: Usability — Adrian @ 5:57 pm

A minor nuisance that I am annoyed with daily: When logged into my Gmail account, the main page shows a “Report Spam” button to the left of the “Delete” button. However, if I navigate to the Spam section of the account, “Delete Forever” is on the right of “Not Spam.” For better consistency, all buttons with similar actions (Delete, Delete Forever, Discard…) should appear in the same locations, regardless of which page you’re on. I can’t count the number of times I’ve reported spam then accidentally marked the same messages as “not spam” while trying to delete them.

The jumping Delete button can also be seen in both the Trash and Compose Mail sections.

Main » LEFT: Report Spam  |  RIGHT: Delete

gmail_1

Spam » LEFT: Delete Forever  |  RIGHT: Not Spam

gmail_2

Compose » LEFT: Save Now  |  RIGHT: Discard

gmail_3

Trash » LEFT: Delete Forever  |  RIGHT: Move to Inbox

gmail_4

Jan 24, 2007

Semantic Naming Conventions

Filed under: Web — Adrian @ 11:00 pm

Andy Clarke’s recently released, Transcending CSS, has an interesting bit on naming conventions (the labels designers give to elements). Though the subject is not new, it will no doubt be revisited more in the future as designers continue to focus on semantic coding.

A while back, Andy, along with the aid of Eric Meyer, peeked under the CSS skirts of 40 well known designer websites to see if they could reveal a common trend to naming elements. Unsurprisingly, the results showed that most of the element names used were commonly the same or very similar. Nevertheless, because there is no set format for naming elements, there will always be variations between designer’s stylesheets. For example, some like to use “container” for an all inclusive div while others opt for “wrap,” “wrapper,” etc.

So why does it matter? Well, it doesn’t hurt to use unique titles but the benefits of consistent naming conventions are well worth considering:

  • Save time for yourself by not having to wonder what each element should be named.
  • The ability to reuse stylesheets (at least the basic structure) from one project to the next.
  • Quickly edit completed websites from the past without having to decipher what the names mean.
  • Save time for others who may be working on the same website. Logical, meaningful names will make it easier to recognize the parts of a website and reduce the amount of mistakes caused by confusing labels.

Andy touches on the idea of further naming images to correspond with appropriate sections on the page, such as a simple_man.jpg might become branding.jpg to match the “branding” div. I would take it one step further and pose the idea of creating a naming convention for folders as well. Images should go in “images,” Javascript in “js,” etc. This would allow for easier referencing and better management. For example, If Douglas Bowman and Dave Shea decided to swap designs again like they did on April Fool’s Day in 2004, it would be easier if both of their image folders were the same name (rather than “i” and “img”). Furthermore, all branding, content, footer, and other main sections of a webpage could have their own image folders within the main image folder (i.e. /images/branding/branding.jpg).

For more reading on naming conventions:

Jan 19, 2007

Top Firefox Extensions for Web Developers

Filed under: Web — Adrian @ 1:29 am

Firefox being my choice web browser, the following is a list of extensions I’ve found most useful. Each image is linked to the corresponding extension install page. Enjoy and if you have any recommendations, feel free to add a comment!

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

firebug

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

ff_web_dev

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and more.

fireftp

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C.

html_tidy

IE Tab allows you to embed Internet Explorer in tabs of Mozilla/Firefox. This is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.

ie_tab

Greasemonkey allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.

grease_monkey

SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

seo_ff

View Source Chart creates a colorful chart of a webpage’s rendered source code, making it easier to identify nested containers, structure and hierarchy. Source Chart is an intuitive way to analyze source and is a great visual aid tool for learning environments.

source_chart

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

colorzilla

Jan 17, 2007

Web Directions North Scholarship

Filed under: College and Internships, Conferences, Web — Adrian @ 12:10 pm

web_directions_north

According to WDN:

As conference organizers, speakers and attendees, Dave, Derek, Maxine and John have long been aware that while a good conference can be an unbeatable benefit for your career, they are definitely out of the price range of those in our industry who might benefit most — students. We strongly believe that today’s students will have an important role in the future of the web.

30 conference seats will be set aside at $195 (CDN) each for qualifying students — regular cost is $895. Great deal and opportunity! To take advantage if you qualify, use the regular registration page and enter the following code to receive your special discount: WDNSCH.

Now if only the airlines could offer me a similar discount to get me out there!

Jan 4, 2007

Writing For a Purpose

Filed under: Blogging — Adrian @ 6:06 pm

Jonathon Snook wrote another great article the other day that really made me think about blogging’s usefulness, specifically the business potential. The writing topics for Shifting Creations have evolved since the start of 2005, beginning with more of a journalistic style about personal events and transforming into a sandbox for work plans and web ideas. One of the many benefits a blog can offer any business, particularly small teams or individuals, is the chance to display their work knowledge in an informal, comfortable fashion.

A resume, for example, is a generic, impersonal summary that contains limited information. A blog is often a regularly updated peek inside the methods of a business that may include the process for completed projects, current work focus, future goals, or other details that may describe their quality of work and subject command better than any resume or online portfolio. When beginning a client project, I will often recommend websites that are related to the project’s needs to help them better understand the tools and technologies we’ll be working with. I would say about 80% of the time it is a blog that I recommend. Think of any major web designer or developer and it is almost always their blog rather than portfolio that is well known and attracts the most attention. Compare the Alexa traffic rankings of Zeldman to Happy Cog, Avalonstar to Revyver, or Adactio, Clagnut, or Andy Budd to Clearleft Consultants.

Link Love

View the Latest

Recommended Reading