Recent Posts
Updates in Your Inbox
Beaconfire at Play
-
www.flickr.com
Categories
Archives
Meta
Archive for the 'Web Design' Category
Friday, December 14th, 2007 by Tim
Opera, the company making what is arguable the most standards-compliant (and least used) internet browser has filed suit in the EU against Microsoft arguing that it should be forced to make it’s browser render pages correctly. While there is certainly an aspect to this suit of Opera wanting to draw attention to it’s own browser, it is absolutely fair to say that Microsoft has done a terrible job supporting standards which would allow developers (that’s us) to build websites much more easily that look the same to all users (that’s us too) in all browsers.
Sure, the newest version (IE7) is leaps and bounds ahead of IE6, but it still lags seriously behind Firefox, Safari, and Opera in terms of reliability in rendering web pages. And though we do strive to make our sites work in all browsers, there is an inordinate amount of time spent tweaking things to work in IE. When we are forced to code outside of the standards, pages become heavier, less accessible, and often suffer reagrding Search Engine Optimization.
It would be unfair to say that all the other browsers work great and render the same right off the bat when I code a page (Safari still gives me the heebie-jeebies from time to time), but Microsoft has a log way to go in this respect.
In other respects, however, IE is great. I do use both, but tend to stick with Firefox due to its superior support for standard HTML and CSS, as well as the incredibly useful extensions that I rely on for building pages. For the average use I can see how using IE would be a no-brainer - since it comes installed on any Windows PC you buy - and that’s the gist of Opera’s suit:
Opera wants the EC to take two actions against Microsoft in response to the complaint. The first is fairly predictable: force Microsoft to either unbundle Internet Explorer from Windows or to have alternative browsers preinstalled on the desktop. The idea, of course, is that Opera would be one of those alternative browsers.
The second recommended remedy is a bit more subtle, but is also ultimately aimed at increasing Opera’s market share. Opera wants the EC to force Microsoft to follow “fundamental and open” standards for how browsers render pages. Although version 7 has improved the situation somewhat, Internet Explorer still significantly lags behind Opera, Firefox, and Safari when it comes to standards compliance (although no browser is 100 percent compliant). Since it’s still the dominant web browser with over 80 percent of the worldwide market, web developers are forced to make sure their sites render properly on IE, often to the detriment of standards compliance.
Full Ars Technica article
Posted in Tech, Web Design | 1 Comment »
Monday, November 19th, 2007 by Taylor Snook

My Must Haves:
- Web Developer
- Firebug
- Tab Mix Plus
- View Source Chart
- IE Tab
For Convenience/Fun:
- Context Highlighting
- Cooliris Previews
- del.icio.us Bookmarks
- Download Statusbar
- FireShot
- Split Browser
(more…)
Posted in Cool Tools and Tips, Tech, Web 2.0, Web Design | 4 Comments »
Monday, November 5th, 2007 by John Brian
When was the last time this happened to you: you’ve got a killer new idea for a campaign. You’ve found a name that fits perfectly. You run a WHOIS check on it, and, because the ICANN gods are smiling down on you, your domain name is open. You run it around the office to get the final approval, come back the next day to pick up the domain name and… it’s taken. And no, it wasn’t your officemate playing a joke on you (though you should consider putting his phone in jello to be safe).
While it may seem like bad luck when this sort of thing happens, it’s possible that you’re actually the victim of a new type of fraud called, "domain name front running." An AP story explains:
That has led to suspicions that someone with access to search requests has been using the information to gauge interest in a domain name.
By buying the domain first, that person can then try to sell it to the interested party for a profit. This is different from traditional domain name speculation because the buyer knows for sure that the address is of interest.
This is just the latest in a long line of abuses of the domain name registry system, and it’s causing companies and non-profits to have to go through costly procedures to get their good name back. Find out more, and what you can do to stop it, below the fold.
(more…)
Posted in Tech, Web Design | Comments Off
Tuesday, October 23rd, 2007 by Tim
I wrote back in March about how to decide what width your website design should be. The decision usually comes down to what we know about the audience in question, and what size monitor and resolution they are likely to use. In the best cases, we have actual data for the specific audience in question to go on, but that data can be sometimes be hard to come by.

Adding a wrinkle to the question is that, as more and more people start using larger monitors, they are not all necessarily going to maximize their browser to fill the entire screen. Some people will be resizing their browsers to either make more room for other windows, or to exercise more control over the width of pages that they read.
While I continue to hunt for a more reliable reporting of these numbers, I found this article from Roger Johansson following up an informal survey of visitors to his blog 456Breast.com in which he found some interesting data about how his readers browse the web.
Thomas Baekdal conducted a similar experiment, but used javascript to collect the information from three different sites rather than a survey. His numbers are a bit different, but the trend seems to hold pretty solid that Mac users are more likely than Windows users to reduce the size of their browsers from the maximum, and that as monitor sizes (and resolutions) get higher, people become more likely to do so.
Posted in Usability, Web Design | Comments Off
Friday, August 10th, 2007 by John Brian
Once upon a time, getting photos for your site was an ordeal. It involved combing through massive stacks of CDs that cost hundreds to thousands of dollars, and required you to buy them all even if you just needed a few. Recent innovations have made it significantly easier to get stock photos for free or cheap (and I don’t mean using Google Image Search and hoping no one notices!)
YotoPhoto is my personal favorite. It’s not a library but an index of other free libraries, none of which are big enough to search on their own but the sum of which make for a pretty good collection. Their mission is
[...]to help people locate, remix and republish open and copyleft images. We aren’t just about ‘free stock photos’ for designers, but also about helping educators, bloggers and digital artists find photos they can use without fear of “the man”.
Yotophoto draws heavily from Flickr photos that are tagged as Creative Commons, as well as Wikipedia’s photo division. An overall great place to find photos.
I just discovered the second service today via Lifehacker: Free Range Stock Photos. Free Range has a library contributed by photographers who receive ad revenue sharing. It requires a registration, which will conveniently sign you up for their newsletter - for those who have an objection to sharing your email address, you can try a login on BugMeNot or just use a Mailinator address. The search still needs work - I typed in “cat” and it gave me a bunch of construction equipment, while “city” gave me a light bulb.
If you’re willing to pay a little money, consider iStockPhoto for your design needs. They’ve got a volumous library of photos (and now video) you can use for $1 to $50 (depending on the resolution, not the subject). The biggest catch here is that they’ve become a popular go-to place for stock photos, so your selection might have already been used by others in your sector!
Of course, the best way to get a free original photo is to take it yourself or to utilize your existing assets. Do you have field offices that do a majority of your actual mission? Make sure they’re set up with a digital camera and a way to get these photos to you. You can set up Flickr and YouTube accounts fairly quickly, allowing remote offices to get you the shots you need without having to wait for the mail, which lets you give notes on them immediately if you need them to try again.
And once you do have internal photos, make sure you figure out a solid way to categorize them and search for them. What you can keep in your head right now could become a major nightmare in ten years when your replacement’s replacement is looking for that one photo you used in a montage… all anyone remembers is that it’s in the folder marked, “Pictures.”
Where do you get your free or cheap photos? How do you manage your house photo library? Share your sources in the comments.
Posted in Cool Tools and Tips, Web Design | Comments Off
Tuesday, July 3rd, 2007 by Eve
Freedom. Truth. Design.
Creating social change through design has been at the core of our society since before the first quill dared to put the notion of freedom on paper. Designers have always been a little ahead of the curve in leaving the world a better place then when we found it. We have conceived of entire cities from dust, made history from a single perfect image, changed the face & fabric of society through our work, and brought people together in one voice - all though the power of the visual.
So, in honor of our nation’s birthday, I pose this question: In a world where there is no shortage of social challenges to tackle, how can designers continue to use our power for good in order to form a more perfect union?
Here’s a few to get you started — can you add to the list?
Posted in Current Affairs, Nonprofits, Web Design | Comments Off
Thursday, June 28th, 2007 by John Brian
With the launch of the iPhone tomorrow, being heralded by Apple aficionados as the greatest thing since, well, the last thing Apple came out with, devotees are lining up to buy the device designed to replace your phone, music player, toaster over, PDA, PSP, portable video player, Tamagotchi, and perhaps car (teleportation rumored to be available on the $600 version only). At this point, you, the non-profit web professional, might be thinking, “What will my site look like on an iPhone?” Sure, the NY Times looks great in those ads they’re running (personally, I liked the “I’m a Mac, I’m a PC” ones better, but that’s just me), but you’ve got to assume that they picked nytimes.com for a reason. What about your site?
For Mac users, there’s a tool that gives you at least some perspective. It’s called iPhoney, and it’s only available for Mac OS X, but it’s designed to actually just be a miniature version of the Safari viewer. The app is designed by Marketcircle, and it’s free - if you’re on a Mac, go pick it up. It won’t be an exact interpretation, due to the different rules for CSS, Java, Flash and Javascript that iPhones follow, but at the very least, it should help you realize what the lower resolution does to your site.
(more…)
Posted in Usability, Web Design | Comments Off
Thursday, May 31st, 2007 by Tim
I’ve been seeing demos of this technology posted around the ‘net for a while now, but Microsoft’s announcement of their new “Surface” technology brings it a lot closer to a consumer market. I initially wanted to post this simply because I thought this technology was really cool, but in thinking about it more I couldn’t help thinking about how this may affect web site designs in the future.
The technology, in a nutshell (see the videos below for a larger bowl of nuts), is a way to allow people to interact directly with “objects” on a table-top computer screen. The new advancement that makes this exciting is “multi-touch” (the ability to touch an object in several places at once, or to touch and interact with multiple objects at once.
As I watch the demos of purchasing and paying for meals at restaurants, sorting and arranging photos, and using maps, I start thinking about how on-line shopping carts, community networking sites, and even the concept of a web site itself could be affected by this kind of technology.
We have already had to adjust how we think about planning and building websites to use newer, dynamic, web technologies. How much further will this re-tooling have to go when users are demanding the ability to remix an entire website to their liking. OK, so that’s pretty extreme and arguably not something that will necessarily result in a friendly user experience, but what about this:
Take a search result of action alerts, draw a circle with your finger around several of the results to group them together by keyword or tag, and then drag them all to where your Wi-Fi phone is sitting on the table-top. The results are automatically cused to create a “related” RSS feed to your phone based on those results. Go to another site and do the same thing. Then call up your contact list on the table-top (pulled from your phone, still just sitting there on the table, not even plugged in to anything) and send your new RSS feed (or selected items from it) to selected people from your contact list.
We’re probably talking about at least 5 years before this stuff is priced for even first-adopter users; currently pricing of around $10,000, and functionality is geared toward businesses like Hotels, Restaurants, and Casinos. I’ve no doubt, though, that some form of this will be in general use in homes as soon as it’s affordable.
Take a look at the videos — Especially the third video on the Microsoft Surface site about paying for meals at a restaurant — and you’ll see what I mean. In this paradigm, devices like phones, PDAs, laptops, credit cards, and even web pages, become simple buckets to move things to and from. The ability to do this simply by placing the objects on the table is what makes it all so amazing.
I guess a big question is, will people want to browse the web on a table-top, or is the vertical screen we all use already going to stay with us? And don’t let’s even start with accessibility issues with these devices! A lot of cool potential, but a lot of potential pitfalls as well. Isn’t that how it usually is?
Jefferson Han:
http://youtube.com/watch?v=RPwaUp4gepU
http://youtube.com/watch?v=UcKqyn-gUbY
Microsoft Official Site:
http://www.microsoft.com/surface/
Popular Mechanics behind the scenes look:
http://www.popularmechanics.com/technology/industry/4217348.html
Posted in Tech, Usability, Web 2.0, Web Design | Comments Off
Monday, March 12th, 2007 by Tim
There is an interesting discussion following an AlistApart.com article entitled Where Our Standards Went Wrong, in which the author, Ethan Marcotte discusses two sides of the web standards debate. In the article, Ethan tries to refine the message we as standards advocates are delivering.
Yet while the benefits of valid code may not be glamorous, we canâ??and shouldâ??talk about them. Validation isnâ??t an end result or a final deliverable; itâ??s an ongoing process that continues long after a site launches. If we donâ??t put the proper tools and commitment in place, our work will start looking like a late â??90s throwback, and if we donâ??t provide guidance and education on validation, the polished, perfect pages we produced will be snapped into software thatâ??ll produce tag soup in seconds flat.
Ethan also discusses some of the problems with Content Management Systems (and their often third-party) text editors, which are often central to the standards issues we face when deploying web sites for clients. In the discussion following the article, several people touch on this aspect, and even (gasp) offer some solutions.
Posted in Accessibility, Tech, Web Design | 1 Comment »
Thursday, March 1st, 2007 by Tim
It’s a question that comes at some point in nearly every design project we do: “Should we stick with 800 pixels as our maximum width when designing the site, or push it up to 1024 pixels?” Unfortunately, there really isn’t a cut-and-dried answer that fits all situations. As a result, the question will generate debate and discussion as if it were the first time it was asked.
It would be great if it were really so simple as to just pick a width and go with it. That’s often what is done, but there are issues that make the question worth taking a deeper look at. Issues that can vary from client to client.
Simply having more space to work with is often a designer’s purpose for suggesting a wider layout, while clients are often motivated by a desire to fit more on each page. Not surprisingly, these two goals can often end up colliding into each other after the design goes into a production environment.
Unfortunately, regardless of your reasons for wanting more space to work with, it’s not simply a design question. There are accessibility and usability questions as well.
Although the percentage of users browsing the web with a screen resolution of 800×600 is decreasing (between 10% and 30% depending on whose stats you’re looking at), those that do so may be using the lower resolution (and even increasing the font size further from there) because they have trouble reading the smaller text-sizes at today’s higher screen resolutions. To not take this group into consideration violates accessibility standards. That’s not to say that we have to stay with 800×600 layouts, it just means that we have to make sure we consider the impact of any layout.
Why choose? Why not use a liquid, or expandable, layout? Liquid layouts have been around forever but continue to make up the minority of sites that we build. Why? There are a few reasons, but with the increased importance of accessibility as well as the growing number of alternative devices (Cell phones, PDAs, smaller laptops, tablet PCs and other devices) used in the U.S. and, even more so, in the developing world, our need for more flexible layouts is increasing.
Liquid layouts are a bit trickier to code, but the issue that usually trips us up is one of control. By this, I mean the perception of control that we often feel we have, or need to have, over the layout of a page.
In the design phase of a project we work with static images depicting how the page should look. Sometimes we pass these static images (or ‘comps’) back and forth for weeks, tweaking and adjusting spacing, color, layout and imagery. Since we are unable to make “fluid” design mock-ups we start to develop a sort of tunnel vision with regard to the design at hand. We start to internalize the structure of the designed page as well as the design elements, and when confronted with the prospect of how the page may stretch and resize when coded with a fluid HTML template, we back quickly away from the lack of control over the design that, to date, we’ve had pixel-perfect control over.
Perhaps the problem stems from the static representations we work with during the design phase. Are there any options? Do we need to start presenting design comps that show the same layout as it will appear at several different resoltions (including handhelds)?
We need to let go a little bit of our need for absolute control over our page layouts. It’s been said before and should be said often: The web is not print. While this is overstated quite often, it is certainly true. If people could easily modify layout, font sizes, column counts, etc. in print, then they probably would. Browsing applications and devices give average users exactly that level of control over what they view; And they use it.
Whatever the solution, we will continue to be confronted with the question every time we design a site. And to reduce the question to one of design alone may be causing more problems in the long run than we foresee.
Posted in Accessibility, Tech, Usability, Web Design | 1 Comment »
|