Wide World Of Web Design

More Blogging, More Videos.
It’s been a busy summer, and the result has been an extended hiatus with regards to this Blog and the Video Tutorials I’ve been posting on YouTube (The Learning Series). But I can assure you, it hasn’t been all margaritas and frolicking on the beach, in fact quite the contrary. In light of the favorable response to the Learning Series Tutorials and the fact that I’ve enjoyed making them, I’ve decided to upgrade this endeavor and direct considerable more time and effort on producing more of the same, only better. To achieve this I’m in the process of making room within my typical work week so I can still maintain some semblance of my current work schedule, as well as what passes these days for my personal life. And then there’s the new website, www.weblearningseries.com, where I’ll be hosting the new tutorials, but which I’m still in the process of setting up . . .

As I touched on in Part 15 of The Learning Series, in order for me to produce video tutorials that are better quality, more indepth, and provide complimentary Lesson Files, they will indeed need to be published on their own website as opposed to posting them on YouTube. Even though I plan to maintain the practice of posting free tutorials on YouTube that cover basic subjects, the Web Learning Series website will feature videos 30 minutes or longer, a User Forums where questions can be posted (and will always be answered), and a Request Form where you can suggest custom Tutorials you’d like to see. Planned tutorials will cover topics such as creating database-driven dynamic pages in Dreamweaver, sophisticated methods of applying CSS, creating graphics in Fireworks, Flash animation and video deployment, and “How To Use Content Management Systems” such as Wordpress and Joomla. Membership will require a small annual subscription fee to cover the cost of producing the videos and providing the overall service.

The videos will continue to target the same audience (which if you didn’t already know, are primarily Novice Web Designers, do-it-your-selfers, and techno-hobbyists) and will appeal to anyone who prefers an easy-to-follow approach that guides you through the learning process quicker than books and written tutorials, and judging from the response I’ve received so far this is becoming the learning medium of choice. By splitting my time between regular duties as a Web Designer and the Web Learning Series, I can deliver fresh content on a consistent basis and make upgrades based on your feedback, especially as my goal is to attract an ever increasing audience.

The same goes for this Blog, where although I’ve tried to maintain a fairly regular posting of articles, it has always taken a backseat to my day job, whereas now it will operate hand-in-hand with the Web Learning Series website to always be insightful, keep you informed, and answer any of your questions related to the Wide World of Web Design and Development.

I hope to have the Web Learning Series website (www.weblearningseries.com) officially launched in October 2008, but I’ll keep you posted through this blog. In the meantime, I recently posted video demonstrations for “The Learning Series” where I look at using CSS Sculptor and CSS Menu Writer, a couple of Dreamweaver Extensions that help you build your own Custom CSS Layouts quickly and easily, which can be a substantial advantage over the minimal, generic-build css layouts that come with Dreamweaver CS3.

So I hope you’ll be patient and stay tuned as I prepare to deliver the Web Learning Series to you, because I’m confident you’ll find it was well worth the wait . . .

CSS Sculptor and CSS Menu Writer work hand-in-hand to simplify the process of creating web standards compliant CSS layouts which can be saved as custom templates, all within Dreamweaver.

I have posted Video Tutorials on The Learning Series to demonstrate how using both of these products can save you a lot of time and coding hassle in the design of your web pages.

CMS: Content Management System
(photo from www.joomla.org)
When starting out as a Web Designer, there’s a point where you feel like you’re finally getting the hang of creating some slick HTML pages with valid CSS layouts, and the learning curve on creating professional looking web graphics is getting shorter too, and you’re even picking up some Javascript and PHP along the way! However … even after all this work to get your web pages looking good while maintaining proper web standards and cross-browser compatibility, now the client wants the ability to edit their own pages because the content changes regularly. Not only that, but they’ve also decided they want their website to be able to do a bunch of other stuff (Store, Blog, User Submitted Content) especially since they’ve noticed other websites doing lots of really cool stuff!

In a Design House, the Graphics and Layout team would simply kick it over to the Development team, which would then get busy writing a bunch of code to create dynamic server pages so that the client’s website could do all that stuff . . . but seeing as you don’t have that option (unless of course you and the client are willing to contract out some 3rd party coders), now’s the time to get familiar with the various Open Source Content Management Systems and WYSIWYG HTML editing software that is available.

If it’s just a matter of the client wanting to edit/update their own content, then it probably doesn’t warrant a full scale CMS but rather a WYSIWYG HTML editing software that can be applied to a website, enabling content authors to log in and easily make updates without having to know HTML. The client will be quite pleased because now they don’t have to call you up every time they want something added or changed, and then you’ll look like a hero for being able to provide such a nifty set-up.

The two best solutions for this would be either Adobe Contribute, which is easy enough for anyone to use and in my opinion is the best one of it’s kind out there (and with a $180 price tag per license it’s not an outrageous sum of money) or Cushy CMS, which offers a Free online service that is similar although somewhat limited in comparison. With CushyCMS, the most notable limitation would be the fact that it doesn’t have an image uploader, so even though the Text Editor allows you to insert an image, you have to input a filepath to an image that already resides on a server. This means the user would require the use of an FTP Client in addition to Cushy CMS in order to upload and insert the desired images.

Now, when choosing an actual CMS you can do some comparison shopping by going to opensourcecms.com where you can test drive a demo version of pretty much every CMS available, which are also categorized. But I can also save you some time by simply recommending what I think are the best ones to have: Joomla! (Full site CMS), PHPBB or Vanilla (Community Forums), Wordpress (Blog), Zencart or OSCommerce (store/shopping cart).

If you’re not familiar with how a CMS works or you’ve never installed and used one, it’s probably a good idea to try one of the portable CMS applications as an introduction on how the installation, configuration, extensibility, and customization works. The two best ones to download and install (go ahead, what are you waiting for ?) would be PHPBB, and Wordpress, both of which could also be used as standalone websites.

These will give you some insight into what to expect when using the Backend Administration and applying the extensions which will give your site layers of functionality. And this is only to get your feet wet, all in preparation for the Big Daddy of Content Management Systems, a complete website solution which need only be applied if you have some time on your hands and the patience to learn it. If you stick with it however you’ll see it as a worthwhile way to provide complete websites that can do things you didn’t know were possible, let alone something you ever had a hope of achieving by yourself . . .

I am of course talking about Joomla! (current version is 1.5), one of the most powerful open-source content management systems that exists, and although it may seem a little daunting at first, it is well worth immersing yourself in. It helps to know some PHP for editing purposes, but for the most part you’ll spend countless hours testing extensions and asking questions on the Forums until you feel like you have it mostly figured out.

But once you do, it’s quite possible you’ll join the ranks of many who have simply abandoned the traditional web designer role in favor of implementing and customizing Joomla sites for clients. Although it’s not quite as satisfying as building your own sites from the ground up, eventually you can delve into creating your own templates that will work with the Joomla core application and then you’ll feel worthy of Rock Star status.

If you are interested in learning more about the best open-source CMS on the planet, and eventually you will be, probably the best resource to learn from is Joomla! A User’s Guide: Building a Successful Joomla! Powered Website by Barrie North, who also has a website called CompassDesign which is well known as a valued source for it’s Joomla! related News, Info and Tutorials.

But if you’re also someone who’s interested in learning how to design and implement some basic server-side functionality of your own, you can crack a book on PHP or stay posted for some future Tutorials I’ll be presenting on The Learning Series where I’ll use Dreamweaver CS3 to create dynamic pages for things like a User Login, Blog, and News&Events section for your website.

It’s important for a website to look good, but you’ll also soon realize there’s a lot of satisfaction in being able to make it do stuff !

Scalable Inman Flash Replacement
(image from MikeIndustries.com)
Typography can do a lot to spiff up a web page, and since the Web has made huge strides in catching up to Print in terms of visual style and design practices, web designers and developers have sought ways to go beyond the limitations of the standard Fonts installed on most computers, such as the all-too-familiar Arial, Verdana, Trebuchet, Georgia, Courier, Times New Roman, etc …

Although there’s not yet an alternative to the standard fonts when it comes to Body Text, there are a couple of Replacement Techniques that will allow you to achieve Rich Headings in your HTML that will breathe new life into your pages and make them stand out. What are these Techniques and how do they work ?

Image Replacement has been used for years and in a variety of ways, the most popular method using CSS to move the text between the header tags off of the page with the text-indent property, and then giving the Header a background image. So, the HTML markup and CSS would look something like this:

Applying the text-indent property with a value of -9999 moves it well off to the left of any screen so it’s not visible, because what you want to actually see is the background image, which is the title you created in Fireworks or Photoshop in the font and style of your choosing. And of course, you have to ensure that the Header element (h1 Tag) is given a height value that matches the image’s height so the whole image is displayed.

Now the major disadvantage to this Technique is the time consuming task of having to create every title in a Graphics editor, because depending on the scale of your project this could become a considerable time factor ……… so what’s a better alternative ?

Scalable Inman Flash Replacement was created by Mike Davidson and Mark Wubben and has been around since 2004, so it’s not a new phenomenon, but if you’re relatively new to Web Design chances are you haven’t heard of it.

It’s an open-source (free) set of files that employs javascript which will scan specified text within your pages, copy that text, and then use it within a Flash object (swf file). The Replacement Font exists within the Flash file, so all you have to do is create the Flash file, and then tell the javascript file which Headings to replace (Hide).

If the user doesn’t have Flash installed on their computer, the Javascript detects it and the original text is used, and of course if the user’s javascript is turned off, then again, the original text within the Header tags is still used.

This sounds pretty complicated, and it is, but actually setting it up and using it isn’t that difficult once you learn how.

Now, you’re probably already saying, “but what if I don’t have Flash ?” Well, that’s covered too … not by me, but by some very talented and resourceful people. Check out a website called Fontsmack which is a sIFR Font repository where you can view and download some cool flash fonts for your web pages.

An example of a sIFR Header can be seen in the Header of this very website … I use it for the title “Wide World Of Web Design“.
Here is a link to another example where you can see the technique employed throughout the whole page, demonstrating a variety of Header styles . . .

So, now what ? To get started, make sure to go to Mike Davidson’s website for an overview from the creator where you can also download the sIFR files and visit a Support Forums.

Then, I would encourage you to visit DesignIntellection.com and follow their recent tutorial on how to get sIFR to work . . . and after visiting some of these and other example sites, you’ll start to gain a whole new appreciation for the power of typography and how it can transform your web pages . . .