Web Design Resources and Reviews

Round Boxes with Curvy Corners

2006-03-30T13:29:00.000-08:00

CurvyCorners

Let's see a show of hands. How many of you have ever wished you could create rounded corners for your css boxes on the fly, without having to create a different .gif image each time? Me, too. Fortunately, it can be done with a free, open-source script called CurvyCorners. The curent version as of this writing is 1.0. Let's take a look at this little rascal and see what it can do for us.

First of all, you don't need to know any JavaScript to make this thing work. Just download it and call it up from the head of your html document. The script applies it's effect to any div that includes a radius command within it, as well as the supporting code that tells the JavaScript how to style the corners. The background-color declaration must be included inline. The border command will also only work inline, but you can remove that declaration if you don't want a border.

You could also define the dimensions and position of the box within that same style code. What's better (and is recommended by the authors of CurvyCorners) is to place the above div within another div, and call up the style code from the outer one. This script just seems to work better within multiple divs.

So how does it work in a real-life web page? Like a charm, once you get the hang of how to put it all together. You see, although you don't need to know any JavaScript to use this, you do need to have a good working knowledge of css to put it to practical use. For example, you can't apply a padding declaration directly to the div, which means that your content might butt up against the edges of the box in ways you don't want. I found that it was necessary to insert yet another div within the inside box and set the padding from there. It's something of a hack, but you can get it to work that way. And, there's something of a learning curve with it, which is to be expected with anything useful. For example, I soon realized that any problems I was having was usually due to padding and margin settings being inherited from the parent class or id. I found that I could fix this by setting margins and padding to zero within that particular div.

Once it all comes together, you do have some well-crafted rounded corners on your div boxes. I've seen other similar attempts to round corners using a combination of JavaScript and css, but they just don't work as well as this one. The corners this script produces are very smooth due to it's anti-aliasing features. You can't tell you're not looking at .gif images. This is one of the better open-source scripts out there right now.

You can get a lot of your questions answered by browsing their website. They include updates, instructions for implementing the script, as well as a comment feature for you to post questions and interact with the script authors. This blog-like comment feature works, but you have to scroll through a long line of comments to see questions being answered. A forum format might work better, and would allow experienced users to interact with others who are new to the script. But that's being nit-picky. You will probably find the answer to your questions in their existing comments.

What I like:

Good, clean JavaScript called up from an external document
Relatively small file, about 25k
Corners are anti-aliased
Degrades nicely in browsers with no JavaScript
Cross-browser support
Online documentation and support

What I could do without:

Corners styled via inline commands, rather than being called up from an external style sheet
Use of non-standard code within the html document: "Radius", which is actually defined in the JavaScript code, but causes the html page to be invalid.

The creators of CurvyCorners say that these last two items are going to be fixed in the next version, 1.2. When that happens, I will update this review accordingly.

Bottom Line: If you're more comfortable coding than graphic design, you need to have this script in your arsenal of web design tools.

DHTML Utopia: Modern Web Design Using JavaScript & DOM

2005-11-21T22:43:00.000-08:00

HTML and CSS are great tools for designing attractive, accessible websites that look and work great in a variety of browsers. This is (or should be) the goal of every web designer out there. There are times, however, when it would be nice to have some tricks for transforming text or creating important effects that html and css alone can't quite handle. Maybe you want to make sure a form is filled in correctly before it gets submitted, or maybe you just want to add a subtle movement to attract the visitor to a certain area of the page.

This is where DHTML comes in handy. The "D" in DHTML stands for "dynamic", and incorporates a little thing called JavaScript to get the job done. Unfortunately, JavaScript can appear daunting to the web designer who doesn't have much formal programming experience. DHTML Utopia: Modern Web Design Using JavaScript & DOM is a book that introduces this language to the masses, and provides some useable scripts along the way. Let's take a peek inside to see what the fuss is all about.

DHTML Utopia begins with a brief overview of what DHTML is and how it fits into the HTML/CSS structure. Much of this will be a review for the web developer, but it’s important to understand how the three languages will work together. HTML defines content descriptions (header, paragraph, list, etc...), CSS defines layout and style, DHTML defines behavior. Chapter two introduces the Document Object Model, or DOM. Up until now, I thought that DOM was just a large Italian entertainer/actor (cue laugh track). It is, however, an important step to understanding the hierarchal structure of elements and nodes within the document. If you haven't been exposed to the DOM before, this chapter is worth reading, and re-reading. I have since found that this concept applies to other areas of programming, not just DHTML.

Subsequent chapters then explain various JavaScript concepts, while simultaneously helping the reader to build various web components into their site. Chapter four discusses how to detect the features of different browsers. After all, if a visitor to your website doesn't have JavaScript enabled, or uses a browser that doesn't support the technology, you still want them to be able to see your website as an attractive page. Chapter five discusses the use of animation, and also warns the web designer to use animation sparingly on the page:

Frivolous animations will divert your users' focus from valuable content. When implementing subtly and tastefully, though, animation can tie the disparate parts of your page together very neatly. It is therefore very important not to overuse animation techniques. Apply animation with a light hand.

The reader is then shown how to develop JavaScript code that will help forms get filled out correctly. If somebody fills out your form, but doesn't fill in the e-mail address correctly (or not at all), a script can show them the error and have them try it again. A slide-out menu is also built from start to finish. The code is included within the pages of DHTML Utopia so that you can type it in directly to your editor. If you're not the kind of person who likes to do that sort of thing, though, you can also download the code examples from the publisher. Word of advice to anybody just looking for some good code: You can find other, similar DHTML examples that are available at various places on the web for free. There's no guarantee they're going to be of this quality, and you're not likely to learn much along the way. But if you want to learn this exciting, useful language so that you can eventually roll your own code some day, this book was meant for you.

The book was published by SitePoint, a company who aims to help web designers learn innovative, standards-based methods to develop, create and market web sites. DHTML Utopia fits right in with that philosophy. It was written by Stuart Langridge, an information architect from the UK and frequent contributor to SitePoint.

Is DHTML Utopia the end-all and be-all of JavaScript tutorials? Certainly not. At 304 pages, I would think it just presents the basics of this language. But if you’re ready to roll up your sleeves and get busy putting together some well-written, readily useable scripts, then this book is for you. These ideas are going to find their way into some site projects that I have coming up.

The Web Design Business Kit

2005-11-05T09:53:00.000-08:00

The Web Design Business Kit
Author: Brendan Sinclair
Publisher: SitePoint

You’ve got what it takes to be a successful web designer. You know css, dhtml, xml, php/MySQL, and a dozen other languages. You know how to use them to create exciting, dynamic and interactive pages that get a lot of attention and generate some impressive traffic. Your web design peers on LunarForums and elsewhere tell you how great you are. In short, you know how to make money as a web designer, right? Wrong!

Anybody who’s entered the world of freelance web design will tell you that these skills alone won’t get you the work you need to put food on the table. Unfortunately, too many web designers just don’t have the business skills to go along with their remarkable web design abilities. But fortunately, those web designers now have a single resource that they can access to maximize their earning potential. If this is you, read on.

SitePoint has published “The Web Design Business Kit” by Australian web design entrepreneur Brendon Sinclair. It comes bundled into two notebooks and a cd-rom with supporting downloadable documents. I bought this last summer when I was getting ready to pitch a design to a prospective client. Successfully, I might add. Let’s open the kit up and see what’s inside.

The first notebook is the Manual and includes 462 pages of instructions and advice that can be applied to many businesses: Setting financial goals, landing clients, setting yourself apart from the competition, running a business and planning for the future. He applies these topics to the world of web design. One of Brendon’s premises is that it’s not what you know; it’s what people think you know. Image is everything. He contends that companies and organizations will hire you based on whether or not they think you can handle the job, and not how much you charge them. In fact, he claims that he overbids his competition most of the time, and most of the time his company lands the job anyway. He fills these pages with ways you can convey that kind of confidence to potential clients. You’re not selling a website. You’re selling yourself. This first notebook is dedicated to helping you do just that.

The second notebook, Documents, weighs in at 200 pages. It includes many of the resources you will need between the time you first initiate contact with a prospective client until you deliver a finished product, and beyond. Professionalism is the word of the day here, and with good reason. It fits right into his philosophy of your presentation as your most important tool. Client letters are included at every stage. Most impressive in this collection is the Website Proposal that Sinclair insists is crucial to landing the contract. In fact, he says that most freelancers simply hand this to the client, instead of sitting down with them and reading through it line by line. The client that I worked with seemed most appreciative of this feature, and I believe that it was the one thing that convinced this client to hire me. Also included is a detailed contract that appears about as inclusive and comprehensive as any I’ve seen available on the web. I used this template, but modified it quite a bit for my own situation.

Every document in this second notebook is included in a cd-rom that you can open up with Word or Excel. Remember, the author is Australian and I can only assume that these documents were created by somebody on his staff. When I opened up a document and edited it, the spell-check recognized European-English words, as opposed to American English. Color became colour. Favorite became favourite. This is a minor annoyance, though, as the benefits of having these documents handy in one place far outweigh the inconveniences of a few words slipping through spell-check.

The Web Design Business Kit retails for $249 from the publisher. This seems a bit steep for two notebooks and a cd-rom, but I found the contents invaluable when it came time to signing my first client. I just do this as a part-time business, and I believe that it is an important part of my web design library. Full-timers will likely value it even more. You won’t find even one line of code in here; it’s all about the nuts and bolts of running a web design business. It’s well-organized and referenced for easy access to specific topics and documents.

SitePoint has a great reputation for producing high-quality books and products for web designers. The Web Design Business Kit is no exception. If you’re looking to take the plunge into freelance web design, you’ll find this a great resource to help you get started. If you’re already a freelancer and you’d like to build on the business skills you already have, you should also take a look at this.

The CSS Anthology: 101 Tips, Tricks and Hacks

2005-11-04T23:37:00.000-08:00

The CSS Anthology: 101 Tips, Tricks and Hacks
Author: Rachel Andrew
Publisher: SitePoint

Cascading Style Sheets (CSS) brings the promise of contemporary layout design, greater coding efficiency, and improved search engine accessibility for your html webpages. However, the website designer soon runs into some of the realities of CSS: Things don't always look the way you expect them to in different browsers, and it’s not always easy to come up with great effects using just CSS. These problems arise for both budding developers and seasoned veterans alike. An in-depth reference book, written in an easily-understood style and jam-packed with great ideas, would really come in handy for anybody who wants to implement CSS into their web pages.

British web designer and author Rachel Andrew has written a book that fills that bill quite nicely. The CSS Anthology: 101 Essential Tips, Tricks and Hacks presents CSS (2.1, to be exact) in an informative but accessible manner. It takes some of the guesswork out of creating a well-designed, standards-compliant website, and adds a few goodies to the mix as well. Let's take a look under the hood.

First of all, The CSS Anthology assumes that the reader has a good foundation in html and at least a working knowledge of CSS. A very brief introduction is covered in the first chapter, but it's not enough if you have had no experience with CSS. Look elsewhere for a primer (like Eric Meyer’s CSS book), but plan on getting this one anyway. You'll need it soon enough.

Subsequent chapters are then presented in a predictable but logical sequence, beginning with text formatting, and then moving to images, tables, page layout, menus, browser support, and finally the future of CSS. Topics are presented within each chapter as a question to be answered with sample solutions: How do I style form elements using CSS? How do I place text on top of an image? Further discussion follows many solutions. The most relevant topics follow this question-solution-discussion format, with appropriate screen shots of the expected results.

The answers to most questions are also accompanied by a series of html and CSS code examples. They demonstrate each selector or attribute being explained, and are useable in your own webpages right out of the box. That's good news and bad news. It's good news if you enjoy typing in somebody else's code by hand (mistake-free), but bad news if you don't. Luckily, these codes are available to download from the publisher's website. Apparently, though, you can only access these codes if you purchase the book directly from the publisher. The CSS Anthology is available from all the usual book outlets for a few dollars less than the publisher's price. It's your call as to whether the extra price warrants the code downloads. I ordered mine from the publisher for $39.95US (plus about $4 S/H) and have enjoyed having access to the code examples. It got to my house in the Pacific Northwest in about 4 days. Also, my book came with a handy poster that lists all of the CSS attributes, as well as another book containing sample chapters of the publishing company’s other books. A $10 coupon good for other books was also included.

The CSS Anthology can serve as both a reference book that sits by the computer, and as a learning tool to be read from cover to cover to get the main concepts. I took mine down to the coffee shop and read a couple of chapters over a double caramel latte (while listening to a really good local bluegrass trio, I might add). The information is in-depth, while the writing style is easily understood. I’ve also been able to sit down at the computer and quickly adapt some of the examples for my own webpages. I didn’t know you could create so many cool graphic effects without the use of images.

So what's there not to like about this book? Not much, really. I could nit-pick and complain that the downloadable code examples should be available for all users, not just the ones that bought the book from the publisher. A lot of page space seems to be devoted to code examples alone. However, the book does weigh in at a hefty 376 pages, so there's plenty of information to go around. All in all, these are minor flaws in an otherwise very useful book.

Rachel Andrew is a website designer and author from England. According to the book preface, she enjoys "wandering the English countryside hunting for geocaches and nice pubs that serve Sunday lunch and a good beer." Sounds like she'd be right at home in the LF community. She is also writing an upcoming book about creating standards-compliant pages with DreamWeaver.

The book is published by a company called Sitepoint. They also have similar titles covering MySQL, PHP, and ASP.NET, among others. The line of SitePoint products as a whole seems to be aimed at helping web designers take their skills to the next level. The CSS Anthology fits in quite nicely with that niche.

This is a book that's going to stay right by my computer. I have competent html and CSS skills, but it seems I always have a question about a given set of selectors or attributes, or I want to learn how to do something differently. I'm always in the market for fresh ideas or variations to old ones. As such, I expect to refer to this book often as I continue to hone my CSS skills. The CSS Anthology is a must if you want to bring your coding skills into 2005. If you're still not convinced, you can download the first four chapters from the publisher's website and take a look for yourself.

Book Review: PHP/MySQL

2005-11-04T23:33:00.000-08:00

Build Your Own Database-Driven Website Using PHP & MySQL
Author: Kevin Yank
Publisher: SitePoint

Yes kids, that's right! Time for another thrilling and entertaining book review by the Master Newb himself, Rick Scheibner. Today, we'll be looking at Sitepoint's Build Your Own Database Driven Website Using PHP & MySQL, written by Kevin Yank.

I learned html and css about a year ago, and have spent my time since then improving those skills to produce attractive, standards-compliant websites. Lately, I've been wondering what's next for me, what else can I learn to improve upon and expand my web design capabilities? I have a client now who would like to have some content management available to her to update the site from her own computer. Looked to me like it was time to learn some PHP and MySQL to get this done. Being a recent convert and disciple of SitePoint, I turned to this book to see how to put it all together. Let's take a look under the hood:

Kevin Yank begins by taking us through the steps of installing MySQL, PHP, and an Apache server, if necessary. You need to have these three working together on your own system. It's impractical to upload all of this stuff to your LP site and test is that way. I ran into some frustrations when I couldn't get the three to work together on my computer right at first. I turned to SitePoint's forums, and somebody over there was able to point me in the right direction in no time. Turns out it wasn't the books fault; I had failed to read and understand a few important concepts clearly written in those first few pages.

Having fixed that, I began working on a "joke database system" that Kevin uses to teach important database storage and retrieval concepts. All of the code necessary is written in the book, as is the custom of SitePoint's books. Fortunately, you don't have to type it all in by hand. It's available for download from their website. How good is it? All of the examples have worked like a charm so far (I'm about halfway through the examples, though I have read the entire book). I have the 3rd edition of this book, which is the most recent as of this writing. It covers PHP5 and MySQL 4, just in case you were wondering. Also, being 3rd edition, any major errors or omissions in the first edition of the book are gone.

After teaching some important and fairly simple concepts in the opening chapters, Kevin then slowly begins to add more complex topics: Relational database design, building a content management system, content formatting, and advanced SQL queries. Kevin finishes the book with structured PHP programming and includes, something that seems light years ahead of me right now. I'll get it in time, though. Appendices include important syntax, functions, and column types, all reference material essential to the topic.

As a relatively new coder, I found that I need to take the book in manageable chunks. I developed a style of reading a chapter, getting the main concepts, writing down important information, and only then going to the computer to work out the examples. That's just my style and how my brain works; it may or may not work for you. My goal is to have this thing in my grasp by the end of this summer. Your actual mileage may vary.

However you decide to tackle it, Kevin Yank does a very credible job of explaining a fairly heady subject in accessible, easily understood jargon. Admittedly, it's not as easily read as Rachel Andrew's CSS Anthology, but then again Kevin Yank has tougher material to work with.

The goal of the book is to bring PHP/MySQL to the average html/css hack (like me). To that end, the book performs quite nicely. Is it a complete reference book for every problem the programmer is likely to come across? No, but it will serve as a nice stepping stone between getting basic concepts and advanced programming. If you're looking to get your feet wet with PHP and MySQL, this is a great place to start.