Good Designers Redesign, Great Designers Realign Halfway through 2004, I openly predicted incessant redesigning would become somewhat cessant by the same year’s end: Forward thinkers understand content is still king and focus on such while deploying minimal upgrades, rather than relying on skillful makeovers that gain short-lived traffic spurts following award listings but offer downright weak content. How wrong I was. Apparently the Incessant Redesign is far from extinction. Like a kid in a candy store, we creatives redesign like it’s the new black. While this article won’t analyze the psychological ambitions of right-brained elites and their innate desire to recreate, it will attempt to describe the difference between redesigning and realigning, as well the advantages of one over the other. If iLife Falls in the Forest…#section1 In January 2005, Apple’s iLife ’05 was announced from Macworld Expo in San Francisco. Virtually absent from the discussion was any mention of the rebranded iLife packaging. Redesigners vs. Just say no#section5
9 Javascript(s) you better not miss !! This tutorial is aimed at those who have a working knowledge of Javascript. So the examples are not explained in great detail. Only the important parts are highlighted. I have presented 9 Javascript examples that I have found very useful while designing professional websites. There are many ways to implement these examples here. Please not that that wherever there is a mention of any .jpg , .gif or any other .html files, see to it that you have a dummy .gif, .jpg or .html file in the same directory as the script file so that the script finds these files. Example 1 : A Single click for checking-unchecking multiple check boxes You must have seen this script working at many places. Note : The VALUE tag for the checkboxes seem to have no use. Example 2 : Opening a page (existing as well as dynamic) in a new window without bars, buttons, etc. The setCount() take 2 parameters, the no of checkboxes and the target program to which the contents have to be submitted to. I have shown 2 ways..
Never Get Involved in a Land War in Asia (or Build a Website for No Reason) At the head of the conference table paced a well-dressed man with a loosened tie, rolled-up sleeves, and an air of frustration. Sitting across the table from me was the web design team the man had hired to create a website about his pair of rare and identical 1964 muscle cars. And then there was me. After a lengthy monologue from the client on the history of the Ford Mustang, the color mint, and the travel history of the two cars, the meeting turned into a flurry of to-do items: hire a photographer, scout locations for photography, scan logos, research the design style of the 1960s. The web design team on the other side of the table were actually friendly competitors, and they’d asked me to tag along in the hope that my advertising education and experience would provide another “expert” opinion. “I’m sorry,” I said, and put down the sandwich. The high-fives stopped. Why strategy? The formation of strategy isn’t one of the most popular aspects of web development, but it should be. See.
CSS Swag: Multi-Column Lists One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns. The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. Further, the wrapped list should tolerate text resizing (easily accomplished by styling everything in ems). CSS and the browsers that support it don’t yet provide us with “vertical wrap,” so we have to augment basic list markup with additional attributes and styling rules to achieve the effect. We’ll be shooting for something that looks a bit like this: (Why, you’ve doubtless been pondering, is this article entitled “CSS Swag”? Watch your step#section1 I’ll warn you up front. While each of these methods is simple enough to set up, the acid test comes when you add or remove list items in the course of website maintenance. The reality is not so ideal. So why do we bother? To work, then. First, expunge all white space#section2 See Example 1. Easy, now.
Design Choices Can Cripple a Website I admit, it’s a provocative headline. But it’s true. However compelling the message, however great the copy, however strong the sales argument… the way a page is designed will have a dramatic impact on conversion rates, for better or for worse. Before I go any further, I want you to look at three versions of the same offer page: I know, they won’t win any design awards. Version A is the original. Version B follows the same basic layout, but we made some minor copy changes. In version C, we changed from a one-column format to two-column format. Be honest with yourself and decide now whether B or C beat A, and by what percentage#section1 Don’t scroll down and look for the answer. Write down a percentage by which B did better or worse than A. The design choices you make have a profound impact on results#section2 I imagine you have some way of measuring the success of your site. But I don’t think most designers truly understand the effect their design choices can have on achieving that purpose.
CSS Techniques Roundup - 20 CSS Tips & Tricks September 22, 2005 Related Entries 55 people found this page useful, what do you think? Trackbacks Trackback Address: Comments Pete, Well done! Sami Pete, Great collection of useful references. Thanks Mark and Sami! Pete, this is really useful, about to get a junior developer to start on some look and feel tasks for a new application we are building and this wil save me a lot of time, thanks for the links. Also updated my site now so hopefully it doesn't offend the colour blind ;-) Once again cheers. Thanks Kev, glad to help out. Hey, there's some AWESOME stuff in here... Always great, instructive posts! Well, useful stuff, but ALL of them are listed on Here's a nice little top 10 from Evolt (now that they've got their site back up..... Hi Chris, Many of the links I posted here are listed in the link you posted, but not ALL of them. Keep up the good work Pete! thanks, Good job!!
Web Creme | Web design inspiration CSS Tabbed Navigation This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. The code is very simple, the CSS is embedded to let you see 'under the hood'. Note that for IE5/5.5 you probably need to add hacks to the CSS to overcome their bugs, I would have done it but I'm tired of box-model hacks... I have also made a second version, but with the tabs part of an overlying banner, and fixed so that the tabs always stay visible. Valid XHTML V1.0 strict and CSS V2.0 | Go back to CSS page | Go home (including an email link) | This page is CopyLeft, you are free to use the code!
Max Design - CSS Page Layouts Here are a range of CSS responsive HTML and CSS layouts – including one, two and three column layouts. All layouts are ready to use – as is – with folders, dummy AppleTouch icon, dummy favicon and CSS files in place. All layouts are FREE to use as needed and can be downloaded directly from Github. One-column fixed-width responsive layout A simple, single-column fixed-width responsive layout with pre-defined styles for all common elements, responsive images and more. One-column full-width responsive layout A simple, single-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Two-column full width responsive layout A simple, two-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Three-column full-width responsive layout A simple, three-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more.
Web Design — Div Problems, CSS positioning of div tags, height tweaks Tables or Div? The <div> tag can be very useful, but it's important to keep in mind what div stands for: division. The div tag is supposed to divide the page into parts, and it does this extremely well. See for instance the right column, or the lower left hand tech data box, of the index page to see how the div element can be very effectively used. Of course, you can go all the way, like we did, but we don't recommend that, for one main reason: Div tags only expand to fill their container blocks horizontally, unless they are being sized against another absolutely sized element. However, since that required the use of iframes, which we've since abandonned, the redesign of the site required a new method. This method does not require the ugly hacks most others you'll see out there do, like using background images to make fake columns and borders. We have tried using the CSS overflow:auto; property on div elements to see if we could make them function like frames or iframes.