So you’ve built a bunch of awesome websites. Now it’s time to kick back, relax, and watch the visitor numbers grow, right? Whoa, not so fast. The Web never stops evolving—and your site needs to keep up. You can add new features, tweak the design, or even do a complete redesign. An ever-changing site reflects your growing skills—which means your site is always your best PR tool.
That’s a good-looking collection of sites you’ve got there. Take a moment to look over them and feel proud of yourself. You’ve covered a lot of ground since Chapter 1.
But although it’s beautiful, you can’t sit around admiring your portfolio all day. There’s always more work to be done...
If you’re a web designer (either individually or as part of a larger studio), your site is your own best PR. It doesn’t just showcase your project work, but it also highlights your skills, aesthetic, and design sensibilities. So you need to make sure that your site always represents your best and most progressive work.
This also means that you can’t let your site linger with the same content (and features) for too long. A site that remains unchanged sends a message to your users. It says “Hey, I haven’t changed in forever; there must be something wrong with the company.” Fresh content will sent a positive message to your users and keep them coming back.
Red Lantern’s doing great. Working with Jane, you’ve got some truly impressive projects under your belt, and you’ve helped establish Red Lantern’s reputation for being an innovative and cutting edge design studio. But to keep that reputation intact, you need to make sure the Red Lantern site’s up-to-date, too. Now’s the perfect time go back and revamp.
Jane’s right. Changing your site radically every three or four months can be problematic. First off, if you’re doing client work, a complete overhaul of your site’s design three or four times a year is going to suck up an amazing amount of time and resources—resources that would be better used on client projects.
Second, your users are comfortable with your existing site. They’re used to the way the site looks and changing it radically could confuse them. So how do you keep them interested and coming back for more? You can take an evolutionary design approach to updating your site, incrementally changing the design aesthetic and features. This way, your site will still feel familiar to your users, but it will also be new and fresh.
The great thing about designing with web standards is that when you want to change up your site’s design, all you need to do is edit the CSS. You don’t have to worry about your markup at all (which is one of the benefits of designing to web standards—separation of content and style).
You don’t need to be a crack programmer to add interactivity with JavaScript.
JavaScript’s a popular part of web design. It’s used for all kinds of things from screen effects (like image lightboxes) to UI elements (such as sliders or accordion menus). The problem is, JavaScript can be intimidating for someone who’s only had experience writing XHTML and CSS.
The solution is JavaScript libraries. These are pre-written JavaScript functions and controls that you can put in a directory on your server and call from within your markup. The cool thing is that you don’t need to know very much JavaScript to take advantage of these libraries. They’re also generally very lightweight, cross-browser compatible, and standards-compliant.
There are lots of different JavaScript libraries out there. Some of the best include Dojo (www.dojotoolkit.com), Script.aculo.us (http://script.aculo.us), Moo tools (http://mootools.net), Prototype (www.prototypejs.org/), and JQuery (http://jquery.com/).
Lightbox has come to mean any effect that takes an image or HTML page and displays it in a floating box in the middle of the screen. In some libraries, the background of the site fades out to add emphasis to the floating box. We’re going to use a library called Facebox. This particular type of lightbox mimics the look of the pop-ups found on the Facebook social networking site. It’s going to look great with the updated Red Lantern design.
Download the Facebox code from the Head First site: www.headfirstlabs.com/books/hfwd and place the downloaded files in their appropriate directories.
Add the CSS file to the header of the index.html
file.
Add the JavaScript links and code to the header of your index.html
file.
What do you think? How else could we add new content to Red Lantern to keep users coming back over and over?
Keep your content fresh with a blog.
Blogs have become a powerful tool for creating two-way communication with your users. You posting entries, and your users have the opportunity to comment on your posts and each other’s comments.
A blog is a relatively easy way to add a constant stream of content to your site—which means that your site will always look fresh and give users a reason to come back.
Blogs also give your site a “voice.” Instead of your site being somewhat anonymous, you can speak through your blog posts and reach out to other people.
If you’re going to start a blog, make absolutely sure that you’ve got the time to post regularly.
There’s nothing worse than your users coming to your site, only to find that the blog hasn’t been updated for 6 months. The only way to attract readers is to give them something new and interesting to read on a fairly regular basis.
Jane agrees. She thinks it would be a great idea for the new version of the Red Lantern site to have a blog. That way you guys can write design articles, post news about Red Lantern, and generally have a better avenue of communication with your users.
Jane’s done some research and wants to use WordPress (http://wordpress.org). Why? Well, there are a bunch of reasons:
To get Red Lantern’s blog up and running, you need to download WordPress and get it set up on the server. You can download the WordPress files from:
http://wordpress.org/download/
WordPress requires a server with PHP and MySQL (an open source relational database) to operate properly. If you don’t have access to a server or hosting plan (most web hosts fully support WordPress), check out this site and learn how to run WordPress locally on your PC or Mac using XAMPP, an installable set of software that gives you a working web server on your desktop.
http://www.apachefriends.org/en/xampp.html
Themes for WordPress allow you to change the design of your site by uploading new designs for use in the software. The themes are a collection of files in a directory that hold the PHP code, markup, style and images of the new design. Once uploaded, you can activate a new theme from the WordPress admin panel.
You’ve got Chapter 10 under your belt, and you’ve added some fresh content to your home page.