Tag: Web Design - Page 4 - UNDERDOG of PERFECTION

Google’s redesign: a second look

I want to follow up on my post about Google’s redesign from a couple weeks ago, as this redesign has, unsurprisingly, continued to evolve (or at least, reveal itself through ongoing usage).

It’s clear that Google is phasing in a massive overhaul, not just of how their products look, but how they work, and more specifically how they work together. This is a full-scale rethinking of the Google brand, and I’m not sure I like it.

The natural inclination for most users when something is unexpectedly changed is initially resistance. (Just look at how TechCrunch announced their redesign yesterday. They knew what the reaction would be.) And I frequently fall into that too, only to finally come around after a while when I finally “get it” or just get used to it.

But there are unprecedented challenges for Google with this redesign, owing mainly to two things: 1) users’ absolute dependence on Google tools for certain online tasks (search and mail being the most obvious) and 2) the vast scope of products and services Google is attempting to graft together.

The first is hard to avoid: the more users depend on something, the more upset they’ll be when you change it. (Like this.) The second is not. The second is neither necessary nor obvious. It didn’t have to happen at all, and it doesn’t have to happen the way it is. And as time goes on, I realize that’s what I dislike most about both the initial shoddy execution and the plan and goals underlying it.

As I consider it more, I realize that my disappointment and frustration stem from the fact that this massive integration effort affects my dependence on Google products in a way more profound than I would have expected. I have a Google Apps account for my room34.com domain, and in the conversion Google has forced upon that domain, I am running into numerous issues as I’ve had to merge my personal Google account with my domain account (which I didn’t even realize were separate, since they both use the same email address). Certain data didn’t survive the transition (like my Reader subscriptions); third-party applications that tie into these services are no longer working because of the “2-step verification process” which itself isn’t working, for reasons unknown; certain tools are unavailable to my domain, without explanation (I can’t create a Google Profile, which also means I can’t use Google+); and worst of all, whenever I run up against one of these issues, all Google can do is direct me to outdated and irrelevant documentation. No answers, only more questions.

I’m left with the impression that all of this was not fully thought through. But then again, I don’t think all of it could be thought through. I think it’s damn near impossible to integrate all of these disparate products and services into a cohesive whole, when most have been developed by relatively autonomous internal teams or acquired from outside, and were never designed nor envisioned as one day becoming integrated. And while I applaud Google for its (apparently sudden) focus on this grand new vision for its products, I’m not sure it’s something I really want anyway. Google is already a bit frightening and monolithic, with its vast stores of personal data collected about each of its millions of users. Despite its “Don’t be evil” motto, (former) CEO Eric Schmidt has said things like this (as quoted on Daring Fireball):

“We don’t need you to type at all. We know where you are. We know where you’ve been. We can more or less know what you’re thinking about.”

That quote is taken out of context, but the context doesn’t really help it much. With thinking like that trickling down from the top, do you really want Google to seamlessly integrate all of its products? Their disarray was the only thing providing a modicum of security-through-obscurity for Google’s users. Google may just be collecting all of this personal data to help it more effectively deliver ads to your eyeballs, which is how they make their money, and is bad enough. But that data is there. Who knows how it will be used by Google or whoever else might get their hands on it in the future?

Then again, maybe I shouldn’t be too paranoid. Google’s incomplete efforts at integration are probably a good thing after all.

Google: anatomy of a (half-assed) web redesign

There are many things Google is good at. Internet search and targeted advertising clearly being the top two. I use and appreciate several of Google’s products, especially Gmail, Google Reader and Chrome. But I only use Gmail as a reliable email provider with great spam filtering; I hate the web interface, and check my mail using the native mail clients on my Mac and iPhone. I use Google Reader solely to manage my subscriptions, whereas I actually read my RSS feeds, on all of my devices, with Reeder. And the only times I fire up Chrome are when I need to use Flash, per John Gruber. In general, I like Google’s products for the power of their underlying technologies, just as I hate them for their miserable user interfaces.

I think there are very few people who would consider design to be one of Google’s strong suits, from their traditionally un-designed home page, to their hideous logo (which, nonetheless, went through several apparently well-, or at least extensively-, considered revisions), to the notorious case where, engineers to the core, they logically weighed the relative merits of 41 shades of blue.

If you actually use any of Google’s websites directly, you’ve surely noticed in the last 24 hours that there has been a redesign. The most distinctive feature is the jarring black bar now at the top of all (well, most) pages. Personally I’d prefer something a little more subtle, but it’s tolerable, and presumably achieves its goal of getting your attention by being the only solid black area on your computer screen.

What really bothers me about this redesign is the lack of internal consistency as you dig deeper. To wit, let’s have a look at the landing pages of Google’s three biggest search tools (as determined by their placement in the black bar): Web, Images and Search:

The main things I notice about the main Google (Web) search page compared to the previous version are that the logo is slightly smaller (and appears to have been refined in terms of the extent of 1997-era Photoshop effects applied to it, although I think that change happened a few months ago), and that the “Google Search” and “I’m Feeling Lucky” buttons have been redesigned. They have very slightly rounded corners, an extremely subtle off-white gradient, and are set in dark gray Arial bold 11-point (or so) type.

On Google Images, the logo appears to be basically the same (although perhaps a bit more dithered), but it is much higher on the page. The search box itself is darker and has a drop shadow. The “Search Images” button is larger, has sharp corners and a more intense gradient, and is set in black Arial, larger and normal weight. If I’m not mistaken, this is how the buttons on most Google sites looked prior to yesterday’s redesign, so this appears mainly to be a case of Google Images not keeping up with the changes happening elsewhere.

The page is also cluttered up with instructions and a rather arbitrary set of four sample images. I never bothered to read that text or figure out why the images were there until just now as I was writing this article. Being able to perform a visual search by dragging a sample image into the search box is a really cool idea, but anecdotally I would suggest Google has a daunting challenge in educating users about it, if making it the only thing on the page besides the search box itself still doesn’t get the user’s (i.e. my) attention. Maybe their insistence on using undifferentiated plain text (while it might make Jakob Nielsen proud) for everything is part of the problem.

Google Videos is really the odd man out. A smaller logo, set too far down on the page, and a bright blue search button with no text, just a magnifying glass icon, that would look more at home on a Windows XP start screen than on a Google page. (Astute observers will also note from these screenshots that Google Videos, unlike Google Images and Google Web, displays a glowing focus state on the search box, which is due to the lack of :focus { outline: none; } on the CSS for that element.)

I realize this blue button is more of the direction Google’s heading and I do like it visually, even if I don’t think the search button needs to be so prominent on a page that contains very little else. But the thing that bothers me is the overall inconsistency between these tools.

Consistency is a big buzzword for me. To me it is absolutely the most important thing to consider in good UX and UI design. It doesn’t matter how novel your design elements are; if you present them consistently users will quickly learn how to use them and will gain confidence with your tools. They will also gain expectations that you then have to manage. These do impose limitations on you in the future, sure, but they also relieve you of the burden of having to reinvent every page.

Consistency demands a good style guide, something that is easy to overlook. And just as important as having the style guide is having the commitment to using it. That’s something even a company as big as Google clearly struggles with.

Yes, it’s… yet another redesign

I’ve redesigned this blog more times than I can count. Many of those redesigns have been incremental tweaks, to be sure, but still, there’ve been probably dozens of times that I’ve completely torn it down and rebuilt it, more-or-less from scratch. This is one of those times.

I’ve also (finally) wised up a bit. Usually when I post these redesign announcements, I don’t include a screenshot… as if this is the last time I’ll ever redesign the site. I wish I could go back to some of those earlier posts and see what the site actually looked like when I announced the changes. I can remember most of them, even from the pointless ramblings I composed to commemorate their creation. But it would still be nice to see them on the outside of my brain.

There are some big changes in this version. Most significantly, I’m using two (relatively) new technologies as both key components of the underlying structure and also as inspiration for the design itself. They’re created (or at least inspired) by some amazingly talented people in this field, so they deserve recognition.

First, the fonts are being delivered by Typekit. Finally, web designers have more fonts at their disposal than Arial, Georgia and Verdana. (Yes, there are some others, but these three are the most excessively used.) There are some awesome people behind Typekit, but I especially want to call out founder Jeffrey Veen and creative director (and probably the best web designer on the planet) Jason Santa Maria.

Next up, we have a responsive web design using CSS3 media queries. (Yes, that’s probably the most boring possible link about one of the coolest technologies out there right now in web design.) I think we have Ethan Marcotte to thank for devising this brilliant use of CSS3 media queries to dynamically adapt web page layouts to the size of the browser window. At the very least, he named it and helped spread the word with the aforelinked A List Apart article and his new book.

In short, by employing CSS3 media queries to adjust the page layout to an appropriate width and number of columns (and smartly resizing elements within), it’s possible to easily adapt a web page’s presentation to suit the capabilities and dimensions of a number of screens. Just take a look at this site on your 27-inch iMac and then on your iPhone (or your roughly equivalent non-Apple devices) to see what I mean. I’m sure I’m not doing Ethan’s work justice, either in my description or in my application of it here, but I’m excited about the potential regardless.

It’s a great time to be a web designer!

Update: I went for less than 48 hours with Futura PT Light as my primary font for body text here, despite knowing it was too light and, perhaps, too geometric for good body type. Finally, at a friend’s prodding, I resorted to the inevitable: Proxima Nova. I love Proxima Nova. It’s the primary font I use in all of my business materials (and in my logo itself). I had envisioned a kind of ’50s retro school textbook concept with this site redesign, and Proxima Nova, a 21st century font, doesn’t fit that description, but… man, it just looks so good. So, now it’s here.

SEO doesn’t matter

Note (April 22, 2011): I rarely second-guess myself after posting a blog entry, but this was one of those rare cases. I reconsidered the post due to the fact that shortly after writing it, I observed a case with a client where SEO did matter. But upon further, um, reconsideration, I decided the post did still have merit, because the type of SEO we were dealing with was not the type of SEO I’m talking about here. In fact, “the type of SEO we were dealing with” is something I’m reluctant to call SEO at all, even though that’s denotatively what it is: search engine optimization. But there’s a huge difference between semantic HTML, well formed title and meta tags, and carefully constructed sitemap.xml and robots.txt files, versus “gaming the system,” which is the negative connotation SEO typically carries, and what I’m focusing on in my criticism here. So… on we go. With a few edits for clarification.

There, I said it. Well, actually I’ve been saying it in various ways for years, so what I actually mean is: there, I made it the title of a blog post. And if SEO does matter at all, then people who don’t think SEO matters (and somehow feel inclined to express that sentiment in Google’s search box) will soon be viewing this post. (Huh?)

Today I was perusing my RSS feeds (a good way to find information that is relevant to your interests, often much more effective than just searching for random terms on Google), and I came across a blog post entitled Whitehat SEO Is a Joke. Intrigued, I read it, and it made some sense. The argument in a nutshell is that whitehat SEO is, really, just ineffective SEO. This spawned a satirical response, Blackhat SEO Is a Joke. It made some sense too. And that’s when the thought really coalesced in my mind: all SEO is a joke. Not because on one end of the spectrum it’s ineffectual and on the other it’s unethical. Because manipulating search engine rankings shouldn’t really matter to a sustainable business model.

To the Twittermobile!

After some thought (and a few minutes of research), I followed up with this:

So, what do I really mean here? In this specific example of my own work, what I mean is I don’t depend on random people googling “Minneapolis web development” to get work. I get most of my work through the network of contacts I’ve developed over a decade and a half of professional experience, and through referrals from past clients. And even if I do want people to be able to find me on Google, which of course I do, I expect they would type Room 34, not Minneapolis web development. Go ahead and google “Room 34.” I’ll wait.

Welcome back. And guess what? I didn’t spend a cent on SEO consulting, and I didn’t spend much time of my own thinking about SEO either. I thought about well-formed semantic HTML and relevant content and that just happened. But it still doesn’t matter because I don’t depend on search engine rankings for business.

If you’re building a website as a means to promote your business, or if the website is your business, you’ll certainly want to appear in relevant search results, but ultimately your goal is quite simply to get people to your website, regardless of how they got there. Search engines are therefore a marketing tool — hopefully only one of many you’ll be employing — and if search engines don’t lead visitors to your site based on its own merits, then the problem is not the search engines and their confounded algorithms, it’s your site.

Don’t ask me what the other marketing tools are or should be. I’m a web developer, not a marketer. For myself, word-of-mouth and business cards have been the only marketing tools I’ve needed. Other businesses need other strategies, and the first thing any business needs to do when developing a marketing strategy is to figure out where its business is likely to come from and how best to reach that audience.

Regardless of whether you’re deeply immersed in the world of SEO or you hold it at arm’s length like I do, there are some interesting and relevant points in the two blog posts I linked to above, but I think the most salient is this, from the blackhat post:

If however you have a web property that has some value to it, then true blackhat strategies are not the way forward.

Black, white or gray, all SEO (apart from basic web design best practices, careful [and responsible] use of legitimate tools like sitemap.xml and robots.txt files, Google Webmaster Tools, and meaningful, relevant content) is essentially about gaming the system. Some techniques may achieve more immediate impact, and others may have more lasting value, but ultimately I see only two reasons to engage in any of them:

Your content and/or its presentation doesn’t have enough value on its own.
Your business model itself is based on gaming the system.

If the latter is true, there’s nothing I can say or do to help you or to persuade you to act otherwise. We’re simply in this world for different reasons and will never see eye to eye. If the former is true, however, there’s an alternative. It’s a lot more work, but in some ways that’s the point: make your content better. And that will often lead to an even broader, harder, and more important task: figure out what you’re really trying to do in the first place. Because if you need to be on the first page of a generic Google results page to stay in business, maybe you don’t really have much of a business at all.

Addendum, a few hours later: Like I said…
Google search for "SEO doesn't matter"

A brief rant against “mobile” websites, and in praise of CSS3 media queries

This morning, as I do on most mornings, I eased the transition between my peaceful slumber and the mayhem of conscious life by lying in bed, catching up on the goings-on of humanity on planet Earth with the help of my iPhone and the Internet.

This usually consists of checking Twitter, Facebook, and my Google Reader feeds, but when that isn’t enough, I’ll occasionally search the web for whatever random piece of information crosses my stream of consciousness. Today that happened to be the Tim and Eric comedy tour that’s currently underway, since I’ll be seeing it when it arrives in Minneapolis on Wednesday. So I googled Chrimbus Tour review and one of the first links that came up was a review on BuddyTV.

BuddyTV is not a site I think of often. I believe I was vaguely aware of its existence before today, but I didn’t know what it was all about and I never had any inclination to visit it. But I was certainly happy and willing to click the Google link and read its review of the Chrimbus Tour.

Unfortunately, the site did not reciprocate that happy willingness. Instead of taking me to the desired review, it detected I was arriving via iPhone, so it shunted me off to an annoying splash page imploring me to download the BuddyTV iPhone app. No thanks, I really just want to read the article I came here for in the first place. Oh, great! You’ve provided an “Or continue to BuddyTV.com” link at the bottom. Thanks!

But — and this is so often the case in this scenario — that link did not helpfully take me to the article I wanted. (And as a web developer, I can tell you it is not at all difficult to make it do that.) Instead it just went to the BuddyTV home page. Now what? I’ll tell you now what: I closed Mobile Safari and got out of bed. Not only did I not download their app; I didn’t expose my eyeballs to any of the ads that pay for their website; I didn’t get to read the article I was interested in; and I was left with such a negative impression of the site that it drove me to this public rant.

All of this is not really to single out BuddyTV for its bad behavior, though. BuddyTV is just one site among many I’ve encountered over the past couple of years that all adhere to this same pattern of deplorably ill-conceived UX design. Surely this is not the reaction the owners of these sites hope to elicit. But it’s exactly what happens with me, every time, and I’m sure I’m not alone.

There is a solution.

We frequent users of web browsers on mobile devices just want to see your site. We want to see the same pages we’d see on our computer. The same content. But it doesn’t hurt to have that content optimized for the mobile browsing experience. Resized to the smaller screen. A streamlined layout that’s easier to navigate with a touchscreen. But, fundamentally, the same experience.

While there are some tools out there to help turn a regular website into a mobile website (most notably Mobify), there’s a far easier solution: CSS3 media queries.

CS-what media what now? CSS3 media queries are, simply, a set of stylesheet definitions that are applied to a web page selectively depending on certain characteristics of the media the page is being viewed on, most notably, screen size.

With CSS3 media queries, you can define an entirely separate set of stylesheet attributes to be applied only when the user is visiting the site from a small screen. Or an extra large screen. Or you can describe a bunch of intermediate sizes, so with the exact same HTML content the user will see a perfectly laid-out page, optimized to their screen, whether that’s an iPhone, a netbook, a “standard” computer monitor or a 30-inch Apple Cinema Display.

I’ve begun working more extensively with CSS3 media queries on some of my own projects lately, and I am very excited about the potential. If you’re a web developer or designer, you should learn about CSS3 media queries now. And if you’re a website owner, you should know that “mobile” sites are sooo 2008. Now you can have your cake and eat it too. You can have the best of both worlds. Insert cliché here. Just don’t subject your site visitors to any more obnoxious plugs for your iPhone app, or dump them thoughtlessly on your mobile home page with no way of tracking down the article they were coming for. It’s not fair to your users, it’s not fair to your public image, and if you’re supporting your site with ads — or, for that matter, if you’ve been convinced to drop a ton of extra cash on developing a separate mobile site, or an iPhone app that just displays your site’s content anyway — it’s costing you money.