I have been doing some non-design-related work recently and have not been saturated with anything even computer-related for the past several weeks. Mostly I have been just enjoying life, but also drawing quite a bit and going around taking photos of old, decrepit homesteads and factories. Needless to say, it’s been a much-needed respite from the usual crunch and grind.
Taking a few steps back like this from the Web — even for such a short period of time — is remarkably refreshing, and has given me time to contemplate all this web-stuff that keeps us all so busy. When you’re right down in it, focused like a laser and cranking the days away, time sort of loses meaning, as every moment is purely an opportunity to get something done.
Looking more at the overall shape of things gives you a better perspective of how all the little pieces fit into place. When we’re focused strongly on a particular set of goals, it’s necessary to filter out as much extraneous information as possible. This helps in the short term, but it’s good to step back once in awhile and “let in” as much depth and perspective as possible.
I mean, basically anything except for Internet Explorer, which is a debate in and of itself. Here I’m referring to old versions of good browsers, like Firefox 2, Safari 2, Opera 8, and so on. It seems that older versions of these browsers are not as common as older versions of IE, so should we bother supporting them when designing our websites?
Most agree that we shouldn’t support old versions of crappy browsers like IE, but what about older versions of good browsers like Firefox, Opera, and Safari?
Backwards Compatibility
One of the cool things about adhering to Web Standards during web development is that, theoretically at least, your designs should look similar on all standards-compliant browsers. This is one of the reasons why we exclude IE from the conversation — it doesn’t speak the language, and requires a whole realm of special support in and of itself. But even for modern browsers like Firefox and Safari, a standards-based design does not always translate to presentational fidelity in older versions. So how far back should we go? Obviously there’s no reason to go out of our way to support, say, Firefox 1, but what about more recent versions such as 2 or even 3.0?
Rendering Differences
For many modern browsers, the older the version, the more inconsistencies you’ll find. Older versions of Opera are notorious for borking an otherwise perfect design, and the further back you go, the more borked your design is going to get. And for anyone who does support older Opera, you know how frustrating it can be to target and filter specific versions with CSS. The same is generally true for other modern browsers: supporting older versions can get messy, costing endless amounts of time and energy. There’s no reason to have your designs look identical across browsers, but they should at least be usable. Right?
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before..
CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to be three general approaches:
Support all browsers with perfect fidelity – not realistic for most budgets, requires many elaborate workarounds, hacks, etc., also difficult to maintain, upgrade, and extend.
Support all browsers to some degree – focus first on the latest and greatest browsers, and then go back and make sure that older browsers look and work reasonably well.
Support newer browsers, forget about the older stuff – make your sites look pixel-perfect on the newest versions of modern browsers and don’t worry about anything else.
Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. In practice, progressive enhancement enables designers to design websites according to some predetermined support baseline and then gradually improve and optimize appearance and functionality to accommodate the most advanced browsers. Closely related to this idea is the principle of graceful degradation, which is what should happen when newer design methods aren’t understood or supported by certain browsers. Consider the following example..
Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.
As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
Here at Perishable Press, the number of posts listed in my archives is rapidly approaching the 700 mark. While this is good news in general, displaying such a large number of posts in an effective, user-friendly fashion continues to prove challenging. Unfortunately, my current strategy of simply dumping all posts into an unordered list just isn’t working. I think it’s fair to say that archive lists containing more than like 50 or 100 post titles are effectively useless and nothing more than a usability nightmare. With growing numbers of blogs building up massive collections of posts, finding better ways to display vast quantities of archived material becomes increasingly important.
One solution that seems popular involves breaking the archives down into various categories, tags, and time periods. This provides meta-context to each list of titles and usually eliminates the need for any hideously long post listings. This solution works well, especially when the different category lists are displayed adjacently in multiple vertical columns. For example, a blog with three categories would do well to display each category’s archive listings in its own vertical column. Something like this:
Thanks to a complete (and I mean complete) collection of screenshots graciously sent in by Brent Terrazas, I have been enlightened as to my need for Linux. Looking over the screenshots, I see a great deal of variation — more so than any of the Mac or PC browsers at my disposal — in terms of how designs are rendered on various Linux-driven browsers. The obsessive-compulsive designer in me suddenly sees an incredible need for my own Linux setup — not only for design-testing and cross-browser compatibility purposes, but also because I have always wanted to learn the ways of the Jedi..
An ongoing series of articles on the fine art of malicious exploit detection and prevention. Learn about preventing the sneaky mischievous and deceptive practices of some of the worst spammers, scrapers, crackers, and other scumbags on the Internet.
Here at Perishable Press, I love to write about minimalism, simplicity, and usability in user-interface and web design. I have always enjoyed the minimalist aesthetic, as my Perishable Theme plainly illustrates. Fortunately, many designers and developers have embraced the minimalist concept, and continue to produce and promote minimalist design principles in their designs. As often as my schedule allows, I like to take the time to explore and share some of my favorite minimalist designs, and so far have managed to post the following in-depth reviews:
These minimalist site reviews examine the structure, functionality, and appearance of sites that utilize simplicity and elegance in their design. These articles also feature “mini” interviews with the site’s designer/owner, and provide good insight into the thought and purpose of their respective designs. I invite you to explore the growing collection of my “Minimalist Web Design Showcase” series, and look forward to hearing your feedback concerning the various ideas and methods covered in the material.
And, as always, if you have yet to Perishable Press, please do so for upcoming minimalist reviews and other Web design goodness.
After announcing my intention to redesignPerishable Press, I received some great feedback addressing everything from site architecture and navigation to appearance and usability. As the conversations continue, I want to spend some time thinking about usability, navigation, columns and sidebars. The current minimalist design features a single column layout with no sidebars. Content is located prominently front and center, with all navigational links appearing in either the oversized “footer” area or at the end of each individual post. As severalpeoplehavepointed out, such navigational strategy (or lack thereof) discourages visitors from digging deeper into the site. Apparently, the pile of links at the bottom of each page — the menu, as I like to call it — requires far too much effort to decipher. I mean, really, just because it all makes perfect sense to me, doesn’t mean that everyone else will “get it” too.
I want to redesign Perishable Press. The current design was released around a year ago, and has received numerous compliments and criticisms. Compliments tend to focus on the theme’s minimalist sensibilities, while criticism is generally directed at the design’s poor usability. Personally, I find the “grey-on-black” color scheme to be very inspiring. Others, however, have difficulties reading the content, and that’s not good.
Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. Here are a few examples of live websites demonstrating this distracting behavior 1 (btw, no offense meant to any of these sites — they are all great — they just happen to provide good examples!):
Ever since writing that last review article, I have been feeling the need to cut loose, relax, and blog about something a little more “down-to-earth,” like recent things that have been happening around here. If you are new to Perishable Press, rest assured that I try to keep these “site/personal news” update posts down to a minimum. Whenever possible, I save up a bunch of interesting off-topic things that I want to talk about, and then cram them all together into a multipurpose article like this one. I have found that consolidating and summarizing multiple news items into one post helps keep noise to a minimum while providing a more complete “snapshot” of current events. That said, let’s see what’s been happening ‘round here lately..
Toggle High Contrast Style
Due topopulardemand, I have implemented an alternate “high-contrast” CSS stylesheet for the current theme. If you find the content difficult to read due to the low-contrast, “grey-text-on-black-background,” click on the small sun icon located in the lower-right corner of the browser window to brighten things up a bit. Conversely, to restore the original (dark) appearance, click on the moon icon in the same location. This “toggle-contrast” functionality has been around for awhile, but I have not found the opportunity to mention it until now.
In today’s highly competitive blogosphere, every edge counts. There are many aspects of a site or blog that can be easily acquired. Fancy themes may be purchased, nifty plugins are freely downloaded, and even snazzy content is immediately available. Indeed, setting up a decent-looking blog is so easy that virtually anyone can do it. Even so, just spend a little time at most sites and check out a few of the details. How is the writing — grammar, syntax, and punctuation? What about links and images — are they equipped with intelligent titles and alt attributes? As you read through a few posts, do you get a sense that the author has taken the time to fine-tune the content? Unfortunately, many bloggers fail to take the time to focus on the details. Bloggers that do take the time to embellish their content with details provide quality and value to their readers. Fortunately, managing the details is a snap once you find your groove. To begin this series of articles on “Pimping the Details,” let’s focus on one of the more prominent areas of concern: the content of your posts. How many of the following details have found their way into your blogging routine?
“Exploring Minimalist Thought and Expression in Contemporary Web Design”
Welcome to our ongoing series of articles exploring minimalism in modern web (and graphic) design. With this post, we continue our exploration of the Web’s most inspiring and intriguing minimalist presentations. Staying true to the spirit of minimalism, each showcase will be kept as clear and concise as possible, focusing on tangible and practical aspects of each featured site. We will discuss aesthetics and functionality on both sides of the browser, examining elegance and simplicity within a Web-Standards context..
“Exploring Minimalist Thought and Expression in Contemporary Web Design”
Welcome to a new series of articles exploring minimalism in modern web (and graphic) design. With this post, we begin our exploration of the Web’s most inspiring and intriguing minimalist presentations. Staying true to the spirit of minimalism, each showcase will be kept as clear and concise as possible, focusing on tangible and practical aspects of each featured site. We will discuss aesthetics and functionality on both sides of the browser, examining elegance and simplicity within a Web-Standards context..
For our premier review, I have chosen Jeff Ngan’s recently redesigned site, Equivocality. I have been reading Jeff’s suspenseful, introspective offerings for many months now, sharing in his consistent openness and sincerity, wit and insight. Upon reading about his site’s recent redesign, I immediately dropped by to check it out..
Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:
…the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area…
Apparently, because the horizontal/vertical centering method outlined in our original article employs absolute positioning with negative margins, resizing the browser to be smaller than the centered division results in cropped content that is inaccessible via scrollbar. Although this is the first I have heard about this issue, I went ahead and examined the alternate centering technique via the link generously shared by Max.
The über-trendy “Web-2.0” paradigm seems to be floating quite comfortably throughout the blogosphere these days. In fact, with it’s current mainstream popularity, the Web-2.0 mentality enjoys de facto status as the dominating influence behind modern website development and design. Not too long ago, however, Web-2.0 hovered quietly amidst the thinking of cutting-edge entrepreneurs and developers, as they strove toward freshness, simplicity, and usability.
Before it’s rise to media fame, Web 2.0 was merely a loosely defined set of concepts and ideals. As the concept materialized, representative sites emerged, and the Web-2.0 design aesthetic evolved into an easily recognizable collection of stylistic elements, minimalistic interfaces, and dynamically interactive functionality. Indeed, now that Web 2.0 has hit it’s stride, its characteristics are well defined and apparent to even the most casual observations.
HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..
New Structural and Semantic Elements in HTML 5
Structural Elements
The new structural elements in HTML 5 consist of the following:
First of all, congratulations if you are geeky enough to understand the title of this article. Many would be like, "CSS, MS.. IE, error ..what..?" Whatever. If you get the title, you will get the point of this utterly pointless exercise. If that is the case, prepare for a delightful romp through geekland. Otherwise, save your precious time and stop reading here (exit strategy).
Well, okay, for the seriously unenlightened, let us explain the object of our present focus:
The default "DNS Error" page for Internet Explorer unfortunately remains a familiar sight for millions of Microsoft users. Typically, the default MS DNS Error page loads whenever a browser is unable to connect to the internet or other networked resource. Once loaded, the error page announces itself with a message that reads "The page cannot be displayed." The page then presents several options: refresh browser, retype address, check connection, check configuration, etc. — Monzilla Media (i.e., me)
Still interested? Well, okay. Actually, it’s no big deal. Just a nice, standards-compliant, CSS-based redesign of that old, nappy Internet Explorer 404 Error page. You know the one. Whenever you can’t connect to the internet, it jumps up at you, sticks out it’s tongue and mocks you. Yes, we hate it, too. But alas, with the release of Internet Explorer 7 comes a ‘brand new’ 404 error page. Surely, it’s just a matter of time before that dumpy old 404 error page circa IE5/6 disappears forever. So, before that tragedy unfolds..
The minimalist theme is crisp and clean. Featuring a three-column satellite menu-page to reduce clutter and streamline usability, the minimalist theme is designed to present site content with sophistication and elegance.
The minimalist theme is XHTML 1.1 strict, employs nearly valid CSS (ha!), and features browser-safe colors and universal fonts all delivered via concise, two-column liquid layout.
Mindfully detailed and carefully prepared, the minimalist theme provides plenty of room for customization and expansion.
This theme is offered absolutely free under open source GPL. Instructions are included along with a complete set of files and images. Relatively simple installation.
The minimalist theme has been tested with Mozilla Firefox 1 & 2, Internet Explorer 6 & 7, Netscape 7+, and Opera 8+. Note: minimalist looks best when viewed via Firefox.. ;)
![[ CSS3 ]](http://perishablepress.com/press/wp-content/images/2010/misc-chunks/css3-chunk.png)
CSS3 can do some pretty amazing stuff: ![[ Electrical Surge ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/html-css-power.jpg)
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2009/vertical-loops/triple-column-deco.gif)
Here at ![[ Photo: Perishable ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/perishable-profile.gif "Hard at work..")
Ever since writing that ![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/details-deco.gif)
In today’s highly competitive ![[ Screenshot: Jeff Ngan's Equivocality ]](http://perishablepress.com/press/wp-content/images/2008/equivocality/screenshot_.gif)
![[ Image: Tyrannosaurus Skull ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/html-dinosaur.jpg)
