Bright Matrices

Writings & musings of Mike Zavarello (a.k.a. brightmatrix), a "red mage" web developer.

Tag: web design

“Use Browser X”? Spare Me This Mockery of Justice!

Spare me this mockery of justice!Today, I experienced something that, as a web developer, really burns my blood. When I inquired about a specific web application’s flaws within a certain web browser, I was informed that I should be using “browser X” instead. As the doomed Transformer proclaimed when condemned to the Quintesson pit in Transformers: the Movie, “Spare me this mockery of justice!”

There are exceedingly few reasons why you should ever tell the users of your web application to use a specific browser over another. If you’re on the public domain, or, if your users can pick from more than one browser to get to your application, account for it. Don’t force the users to bow to your decision; it comes across as exclusionary and elitist. The days of “best viewed in Internet Explorer/Netscape Navigator” are far, far behind us.

Of course, there are plenty of whiz-bang features in HTML 5, CSS3, etc. that have yet to be adopted by all browser variants. Publishing experimental or proof-of-concept websites and web applications that push the envelope and challenge previous assumptions on how we interact with the web is perfectly acceptable. However, if you intend to have a product that will be used by a broad audience, alienating a key portion of your users will do you no good, especially if the “unworthy” browsers introduce glitches or errors that break a key feature. Even minor flaws will make it seem as though your product is buggy, incomplete, unprofessional, and sloppy.

Now, I certainly don’t advocate building something that conforms to every browser variant throughout time; that’s a fool’s errand. Your web analytics program can educate you about which browsers and variants your audience is using. Pay attention to that data and use it to establish your lowest common denominator. My basic rule of thumb is to code for all browsers with greater than one percent of your total market share. You can also choose to “degrade gracefully,” where any fancy features unreadable or unusable for less modern or less compliant browsers can still be operated effectively and correctly. Check your statistics regularly, as market share can change quickly. Usage can often differ dramatically between countries, so, if, for example, your European users prefer Firefox over Internet Explorer, make sure that version of your website is ready for them.

Pay attention to your mobile users as well. Those folks using iPhones and iPads will show up as Safari users in your web analytics, so keep track of your mobile device usage in tandem with your browser statistics. You may wish to consider a mobile-friendly version of your web application, a dedicated app, or a responsive web design that transitions smoothly no matter where your users are browsing. Again, pay attention to your percentages to decide what path to take. It never hurts to ask your users directly, whether through site intercept surveys, focus groups, or simple e-mail questionnaires.

There are plenty of ways to avoid the “browser X” debacle. Spare us all the mockery of your self-imposed justice and build your web application for everyone. You have no excuses!

Image source, Google Images: http://www.anivide.com/gallery.html?view=158846&pid=1318514144.

Some Helpful Advice from a Nitpicky Web Developer

Ever heard the phrase “the devil’s in the details?” I’m here to tell you it’s true!

For every clean, elegant, and professionally designed website or web application, there are droves of slipshod, sloppy, or just plain lazy pieces of code I encounter every week. What pains me most is that many of these quirks are really simple to fix and can go a long way to adding to your reputation and credibility.

I’ve put together six examples of detail work that you should include in your digital design and development. These suggestions may seem nitpicky, but as a professional web developer who’s been coding and designing websites for over a decade, these “fit-and-finish” items are the ones that always jump out at me when browsing a site or web application.

1. Display Current Copyright Dates

Most websites these days have copyright dates in their footers, usually followed by the formal name of the company or organization and legal text such as “all rights reserved.” Make sure the year displayed here actually matches the current year! Nothing says “out of date” like a mismatched copyright year. This is especially glaring following New Year’s Day. Scripting languages such as ColdFusion, JSP, PHP, and JavaScript can easily handle dynamic dates, as can content management systems.

2. Match Link Names and Page Titles/Document Names

Your users want to get to your content as easily and quickly as possible, so don’t make the process more complicated or confusing by using mismatched names in your website links. Make sure the language you’re using in the link text is a good match, if not exact, to the document or resource at the other end. You want your users to be confident that what they clicked on is what they needed. And please, avoid acronyms or business jargon! Simple language is best.

3. Use Accurate Singular/Plural Descriptors

This is one of my personal pet peeves: if you’re going to display a list of items, show a group of updates, or otherwise show a collection of objects dynamically, always add a condition in your code to change the descriptors from plural to singular when there’s only one item. I can’t stand to see phrases like “1 search results found” or “1 new tweets.”

4. Link Banner Graphics Back to the Home Page

Users have come to expect that clicking on the website’s banner or logo will take them back to the main page of the site. Make sure your banner is linked this way so users won’t get frustrated, or, at the very least, give them an obvious way to get there using a “Home” link or icon (a house is typical). For mobile applications, a “Home” icon in the contextual menu can help solve this problem.

5. Use Clear and Distinct Timestamps

If you’re managing a news website, blog, or any site or application that has time-specific or time-sensitive content, always show the publication date or the “last update” and make sure it’s easy to locate. This is especially important for users arriving at your site from search engines; they’ll want to know that the content you’re providing is the most current or up-to-date for their needs. I personally prefer to see timestamps right below the headline/byline, or, if that’s not possible, at the bottom of the article before any comments.

6. Make Your Social Channels Prominent or Easy-To-Find

Is your organization or corporation on Twitter, Facebook, or YouTube? That’s great, but don’t curtail your efforts by burying the channels in your “Contact Us” or “Resources” pages. If you’re actively using these channels, place social icons in prominent locations, such as the header (near the search box is a great spot for visibility) or anywhere where other contact information, such as phone numbers, is displayed.

What Advice Do You Have?

What about you, my faithful visitors? What common mistakes or omissions do you come across in your browsing that you would suggest as improvements to the site’s owners and developers? Share your recommendations in the comments below.

Where Users Fear to Tread? On the Heels of Great Footers

Of all the elements in a modern website, the footer is probably the least appreciated. Users have come to expect basic contact information, privacy policies, and other legal-oriented details to live in the footer, but that doesn’t mean footer designs need to be dull collections of links or tiring repeats of the main navigation. Done well, footers can be helpful, informative, and even mischievous elements in a website’s overall visual design.

In this post, I cite four examples of well-crafted and thought-out footers I’ve come across, leaving room to expand the list as I discover other fine specimens. Of course, suggestions are welcome!

1. Marketwire


Marketwire is a Canadian communications corporation that offers unique solutions to help organizations listen, monitor, analyze, measure, and connect with their audiences in both traditional media and “new media” channels. Their suite of tools and dashboards allow their clients to gather valuable insights into their customers and competitors and make actionable results to increase their value, influence, and reputation.

Marketwire chose to let their website’s main content sections do the talking, so the footer is tasked to show essential contact information with a few informative links. The sweeping gray stripe offers a clear separation from the main content and neatly caps off the overall design. Critical touchpoints, national and international phone numbers and social media channels, are presented in a clean and prominent fashion. Large, colorful social media icons pop nicely off the monochrome background and into focus.

This is a simple but effective design that gets straight to the point and doesn’t leave current or potential customers wondering where to go next.

2. Federal Reserve Bank of Kansas City


The Federal Reserve Bank of Kansas City is one of the twelve banks that make up the Federal Reserve System, the central bank of the United States (Disclosure: I work for the Federal Reserve Bank of Philadelphia, part of the Federal Reserve System). Alongside their dual mandate of monetary policy and bank supervision, the Federal Reserve Banks promote community development in their districts, enrich financial literacy among the public, and publish research data and documents on a wide array of economic topics.

The Kansas City Fed’s footer displays their site’s major website categories, a listing echoed in the top navigation. These categories, however, are shown in alphabetical order vs. the more topical choices in the top navigation, and surface the next level of content to help users find what they’re seeking. All titles are short (no more than four words) to ease scanning.

Bold category headings stand out nicely and draw the eye to key starting points. Common footer elements, such as a link back to the home page, contact information, privacy policy, and FAQs, are centered and offset from the primary and secondary categories to be easily discovered. The bank’s address and phone number have a third distinct style to complete the typography in the banner and headings. Seals at the top and bottom of the footer provide nice visual breaks.

Most Americans aren’t familiar with the inner workings of the Fed and can get lost amidst the vast amount of online content they offer. The Kansas City Fed’s footer delivers a lot of options, but does so in a roomy, clear presentation that can help ease information overload.

3. Wall Street Journal


One of the most recognized news publications in the United States, the Wall Street Journal delivers a staggering array of financial, national, and international news to its readers.

Offset in tones of deepening gray with ice blue links, the five columns of links in the WSJ’s footer are easily scanned and digested despite the fineness of the font size. The reversed contract color scheme is easy to read and distinct from the otherwise busy conglomeration of content in the main section of the site. As with the Kansas City Fed’s footer, key sections are in boldface. The WSJ’s RSS feed and social media links are embedded with small icons whose colors help them to stand out in the crowd. Alternate editions of the WSJ are collected together in the rightmost column and ruled off with a thin, dashed white border.

With nearly 100 links to various content pieces throughout the WSJ’s digital empire, the footer possesses a clean and pleasing design that gives a great overview of the wealth of available information.

4. ThinkGeek


A veritable gold mine of geeky goodness, ThinkGeek is a Fairfax, Virginia-based company specializing in collectables, apparel, games, and all manner of merchandise appealing to the geek in all of us. ThinkGeek is well known for its infectious creativity, whimsical demeanor, inventive products, and outrageous April’s Fool fake-outs.

ThinkGeek’s footer is another clean arrangement of major site categories divided into easily scannable lists. Bold, bright color gradients give richness and depth without sacrificing readability. Timmy, the impish monkey mascot of ThinkGeek, directs your attention to the company’s Twitter stream, videos, and blog from his vantage point at the footer’s left edge. Random “customer action shots” offer additional bursts of fun, user-contributed content that keep the experience fresh.

Best of all, the scene of rampaging robots that grace the bottom of each page turns into a mob of marauding zombies upon reaching the footer. It’s a subtle touch, but an extra bit of awesomeness to reward users for adventuring this far below the fold.

© 2020 Bright Matrices

Theme by Anders NorenUp ↑