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.
Freshen up the look and feel of the site. | |
Make the site more cross-browser compatible. | |
Get better user feedback. | |
Communicate better with users. |
Sharpen Your Pencil
The new graphic designer at Red Lantern has been hard at work on a couple of update ideas for the site. What do you think of them?
We’ve left space for you to make notes on the pros and cons of each below.
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).
Long Exercise
Now that Jane’s settled on a new design for the Red Lantern site, it’s time to get to work revising and editing the site’s CSS and markup.
Open up the current Red Lantern site files, copy the main CSS file and rename it to something different. Now you can change the page style without affecting the original design.
The only changes you need to make to the markup are linking the new (copied) stylesheet and removing the header image from the HTML (we’ll use CSS to add it back later).
Update the new CSS file to reflect the following changes. The code you need to change is on the next page.
Long Exercise
Add new rules to screen_new.css so the Red Lantern site matches the comps from the graphic designer. (We crossed out the old rules; you just need to add the new ones.)
Long Exercise Solution
Let’s take a look at the changes you made to the Red Lantern CSS file. Remember, rules that were not changed or removed can just be left the same as the old site.
Sharpen Your Pencil
Take a look at the following ways to make the sidebar portfolio more interactive. Match the technique with its list of pros and cons.
Pros: Good mix of interactivity and compatibility. Cons: Some browsers may have this feature disabled or not fully support it. | |
Pros: All code is standards-compliant and will work in most browsers. Cons: Low level of interactivity. | |
Pros: Limitless interactivity and animation. Cons: Content not available in forms other than visual. |
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.htmlfile.Add the JavaScript links and code to the header of your
index.htmlfile.
Exercise
Using this example above as a guide, add the Facebox effect to the rest of the list items in the portfolio. Remember to link the thumbnails to their full-size versions and provide the proper rel attribute to the link.
Geek Bits
The rel attribute is used to describe the relationship between two resources. In the lightbox case, the link relationship is to the lightbox effect. This is purely a semantic relationship, but other resources (like JavaScript) can use that attribute to treat those links differently then a normal site link.
Exercise Solution
Let’s take a look at what our portfolio markup needs to look like for the lightbox effect to work properly:
Brain Power
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.
Watch It!
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/
Geek Bits
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.htmlExercise
Complete the WordPress installation and get the Red Lantern blog up and running.
Edit and rename the
wp-config.phpfile so that the parameters match the ones from your own setup.Following the installer, get the basic blog up and running on your local machine or server. Remember, we want to access WordPress at /blog.
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.