Archive for June, 2005
When you want a default value to be removed when a user selects a form field to enter some text, you don’t need to go out searching for a ten line script someone has generously distributed online. While there may be merit in other ways of doing this, there is one way that only requires a single line of code.
For each field that you want to clear the initial value add the following event handler to the input element:
onfocus="this.value=''"
For more on web forms visit W3Schools.com and scroll part way down the page for the “forms and input” section.
There are, of course, better ways of doing this with unobtrusive Javascript and the DOM. This is intended as a stop gap solution, not a best practice.
June 22nd, 2005
Ok. You’re right. I admit that my mind is a sieve when it comes to some simple light scripting solutions. This one gets me every time. Whenever you want people to be able to get back to where they came from without any heavy lifting, you’ll probably rely on JavaScript. If you don’t have something right at your fingertips, you’ll search online and find a bunch of scripts demanding a copyright acknowledgement and requiring a script insert in your page’s head area. But there is another way!
All you need is a bit of JavaScript magic. Your link needs the following code:
Back to Referring Page
This should do the trick. Of course, change the text in the link to whatever you want to say.
It goes without saying that any browser that does not support Javascript will be left helpless and that there might be better ways to achieve this referral link. PHP offers the predefined variable, HTTP_REFERER, but cautions against its use because it is set by the user agent and is a bit unreliable. I know of no better alternatives right now.
An open question: Is there a better way to create referral links that does not rely on Javascript or PHP’s unreliable user agent reporting capabilities?
June 22nd, 2005
I have been puzzled by the way IE displays list bullets beside left floated images for some time. Actually, doesn’t display list list bullets, is more accurately put. The list bullets on unordered lists (UL) and numbers on ordered lists (OL) are hidded behind the floated image. My usual response has been to add a massive amount of margin or padding to the floated image, but this is unsightly. Today, I devised a workaround that has its weaknesses, but at least seems to render consistently across browsers.
I begin by setting margin and padding to zero on the lists (UL and OL) to help things render equitably across browsers. Then I declare all margins on the list items (LI). This should even out cross-browser problems. The final rule is a class that can be applied to the list (UL or OL) and the resulting float causes everything to render beautifully in IE. Though the float causes real display problems in other browsers, the IE Only Hack hides it effectively.
ul, ol {margin:0;padding:0;}
ul li, ol li {margin:0 2em 0 2.25em;padding:0;}
* html .byfloatedimage{float: left;} /* IE Only Hack */
If you have any improvements on this method, or one that works more elegantly, please post it below!
June 17th, 2005
Overall Impression
Having read and loved Eric Meyer’s books on CSS, I was more than a little skeptical that Stylin’ with CSS: A Designer’s Guide, from Charles Wyke-Smith would add any significant stock to my hacked together repository of CSS knowledge. I was wrong.
From design comments to sage coding advice, this book is written clearly, concisely, and in a friendly, conversational tone.
Wyke-Smith discusses commenting code on page 20.
I comment my code heavily, especially with what I call ’start comments’ that show me where each section of my document starts … If you comment the beginning and end of any div that is likely to have more than a few lines of code in it, you can quickly and confidently make major edits as you organize your markup.
While this advice might be perfectly obvious to programmers, some designers (guess who) find that organizing and commenting code does not come easily.
But the book is not all about code. On page 68, Wyke-Smith discusses the importance of typography.
Type makes the clearest visual statement about the quality of your site’s offerings. Graphics are the icing on the cake; typography is where good design begins.
This is a good reminder for any designer who has ever let graphics overpower type (probably all of us).
Conceptual Understanding
The initial chapters of the book, while practical, lay a solid conceptual framework for the detailed design projects at its end. Notable examples of this are a line by line examination of the code of an XHTML document, a few paragraphs on the XHTML document hierarchy, and a detailed treatment of the CSS cascade and what it means for targeting document tags contextually. A common confusion among CSS newbies has to do with the difference between an ID and a class. Wyke-Smith clears up any confusion swiftly.
There is a great deal of conceptual knowledge sprinkled throughout Stylin’. Chapter 8 starts with an excellent discussion of static, relative, fixed, and absolute positioning. For added clarification of these positioning options, Wyke-Smith adds a definition of contextual positioning.
Put simply, contextual positioning means that when you move an element using the properties top, left, right, or bottom, you are moving that element with respect to another element; that other element is known as its positioning context.
Wyke-Smith uses this definition to explain the difference between absolute and relative positioning and says that the positioning context of an absolutely positioned element is body, while the positioning context of a relatively positioned element is its containing element or ancestor element. These comments helped explain in clearer terms concepts that I had learned by trial and error.
Practical Application
If my comments above regarding the book’s conceptual focus were too abstract for you, don’t worry - Stylin’ is also an extremely practical volume. Many workarounds are given for Internet Explorer’s infamous bugs, two and three column layout templates are created step-by-step, and advanced CSS techniques are introduced. By the end of this book, if you do the excercises, you will have used graphics to create faux columns, designed CSS only drop-down menus, styled forms, and created fluid layouts with effective minimum and maximum widths.
What I Learned
I know more about the hierarchical structure of XHTML and how it relates to the CSS cascade, contextual targeting, and inheritance after reading this book. Due to some tips and tricks in the information rich break out boxes and sidebars, I can simplify my code further, keeping prentation and structure more strictly separate, while being confident that I will have enough control over visual presentation with CSS.
Congratulations to Charles Wyke-Smith on this lucidly written book. Now back to some (streamlined) XHTML and CSS projects!
Recommendation: This is one of the first three books on CSS web design that any designer should read. Also read Eric Meyer on CSS and More Eric Meyer on CSS.
Title: Stylin’ with CSS: A Designer’s Guide
Author: Charles Wyke-Smith
Publisher: New Riders/Peachpit Press
ISBN: 0321305256
Date: 2005
Format: Paperback
Pages: 275
Cover Price: USD: $34.99 CDN: $48.99 UK: �24.99
Related Web Sites
June 16th, 2005
A Project Management Framework for Web Designers
For the do-it-yourself web designer/developer who has learned enough to complete intermediate jobs, there comes a time when it is necessary to include others in the workflow of a project. Our talents eventually reach their limits and we realize we can’t do it all alone. What then?
Kelly Goto and Emily Cotler have provided a project management framework that is easily understood and applied to projects of almost any size. In their fascinating book, Web ReDesign 2.0 | Workflow That Works they share their Core Process for web redesign which provides a framework for task sharing and an overall timeline for the lifecycle of the project.
Very broadly stated, the core process consists of 5 stages:
- Define the Project
- Develop Site Structure
- Design Visual Interface
- Build and Integrate
- Launch & Beyond
Each of these stages is divided into a series of steps so that the workflow and process are absolutely clear. At the end of each phase, the authors have provide a check-off list so that the team can verify the successful completion of each task assigned.
Since I understand visual interface design best, this book’s detailed discussion of the development of site structure from content through sitemapping and wireframing has been very instructive. Though I have used all the approaches to site structure described in the book, I have seldom used all of them on one project and had no process that would ensure I used even one of them. The approaches to site planning are as follows:
- Site View
- Sitemapping
- Addressing Existing Site Organization
- Setting Naming Conventions
- Page View
- Wireframing
- Addressing Navigation
- Naming & Labeling
- User View
- Defining Key User Paths
- Developing the HTML Protosite
- Creating User Scenarios
The larger a project is, the more of a challenge it is to keep the customer and development team in sync regarding the progress and direction of the project. By breaking the web redesign process (and by extension, much of the initial web design process) into logical steps, each with its own deliverable that the client approves, some of the potential communication pitfalls can be avoided.
Though this is an entirely practical book, it is one without technical language or pretense. Every phase includes at least one case study in which the concepts discussed are applied. In addition, most sections include personal comments from industry leaders who understand how to successfully apply the concepts discussed.
I wholeheartedly recommend this book to anyone developing their project management abilities, either as a business owner or as a collaborator on web development projects. I am excited to have a toolkit to apply to my own web development projects and a framework for including others in that process. Thanks Kelly, Emily, and New Riders & Peachpit Press for this excellent contribution to applied project management for the web!
Recommendation: This book belongs on the shelf of everyone who participates in web development teamwork, and of everyone who is interested in how web development workflow can be managed efficiently.
Title: Web Redesign 2.0 | Workflow That Works
Author: Kelly Goto & Emily Cotler
Publisher: New Riders/Peachpit Press
ISBN: 0735714339
Date: 2005
Format: Paperback
Pages: 282
Cover Price: USD: $45.00 CDN: $64.99 UK: �33.99
Related Web Sites
June 14th, 2005
If you have ever designed a web page with an image larger than approximately 200 pixels square, you may be wondering why a small toolbar appears every time you mouse over your image. Often, the last thing you want your visitors to do is to download your image, save it or print it. A designer wants them to focus on the content of the image and to respond to it rather than being distracted by an image toolbar.
Fortunately, there is an easy fix. Between the head tags of your page, just insert the following XHTML code:
If you are using HTML code, modify the snippet as follows:
June 13th, 2005
On a close inspection of TYPO3, I have been impressed by how few design constraints it imposes upon content. My initial assessment of this CMS as inflexible and overly complex was wrong. While it is complex, it offers a range of web development paths, some with greater complexity than others.
Read the related posts below for more info.
June 6th, 2005
I was browsing for CMS information as I often do when I stumbled onto TYPO3 via this about.com article. Having looked at many CMS solutions in the past, I have become a bit skeptical about finding one ideal for small to mid-size businesses without paying a subscription fee (Two options are Live Storyboard and Site Worx) but I am hopeful that TYPO3 will be able to provide a back-end content management solution that allows flexible, standards compliant design integration on the front-end.
Some features my clients need are scalability, multi-language localization, design flexibility, and ease (speed) of development. On all these counts, TYPO3 claims it can deliver.
I would like TYPO3 pros to tell me if the CMS web site feature claims are an accurate reflection of the quality of this product and will begin testing it soon.
Related Posts
June 2nd, 2005
