Neil Straghalis is one of the major players for the web team at Adobe.com. He has lead Seve website redesigns in the past years, and in this session he discusses what he has found to be the best techniques and design practices when redesigning a major website.
He first asks.. Why? Why redesign your website? I mean, if something isn't broken, doen't fix it, right? Times change.. styles change, focus changes.. everything changes, and you must keep current. If you have a stale design, people will notice right away as being outdated, old.. You want to be on the cutting edge. Live in next year... not this year, and definitely not last year.
When you redesign your site, think about your goals. First off, have a goal in the first place.. You want to redesign your site because ______. Once you have your goal, make sure your entire team knows this goal. This is why we're redesigning the site, so keep this in mind with everything you do. Divide this goal into sub goals.. What are you business goals? What are your client's goals? What are your design goals?
Being goal oriented will make it easy to figure out where you are in the design process and if you correct in making your decisions. Basic software engineering stuff.. Have you list of requirements and adhere to it absolutely.
Another bit of strategy is Data or Content. Now that you have your goals, what content do you really need and what can you ditch. Do you really need a detailed account of Adobe's History on the front page of Adobe.com? Do you really need it on the site at all? If so, where should it go so it's not in the way of pushing your product line?
When redesigning your site.. do you really need to completely overall the entire thing? Maybe a fresh coat of paint will accomplish your goals.
Skinning is an easy way to design what you already have in a different way. If the company changes focus from a family friendly environment to something with a more business oriented approach, switching out the graphics and redoing the CSS would probably be the best result, if they didn't want the content to change at all.
If skinning just won't do, then you should keep a few things in mind.. First off, What are you redesigning? What doesn't work with the site?.. What does work with the site? Also, define the scope of your redesign. Are you completely redoing all the pages of the entire site, or just the front couple of pages? Back to content and data.. what do you need? what don't you need?
Another thing you may not think about is Priority. What do you want the User to see on your site? What isn't so important on your site that you shouldn't spend too much time on?
Remember that the overall goal of a redesign is to make your site as good or better than the previous version, so if something simply isn't working, maybe you should rethink your decision and revisit your previous version.
Once you've developed your goals, and begun to form an idea of your redesign.. Design it! Start drawing mock-ups and coding prototypes. As you start building your website keep a few things in mind...
Build with a redesign in mind
You're already begun to build your website, but experience tells us that everything can and will change. You will be redesigning what you're working on now, so build this new design with that in mind. Don't make things difficult for you in the future.
Generic Naming
Part of that is naming things generic. You want to clearly label your CSS classes and ID tags so you have a general idea of what they do, and then reuse them all over your site. Don't be too specific or you'll get bogged down with thousands of IDs that you just cannot maintain.
Semantic Markup
Speaking of CSS, Use it! Use it alot. This is rather obvious. CSS is there to make designing, skinning and the web experience as editable and customizable as possible. If you aren't using CSS, then you have fallen way behind of the times.
Separate Presentation from Content
Build templates, and reuse CSS and JavaScript. Don't put too many details into each of your pages when you have an entire sites to build. Templates are a great way of reusing code throughout the site. When making a single change to your site, you don't want to make that change in a thousand places.
Now we've gotten to the fun part ^_^. Bringing your design to life with all you have. Again.. be sure to use CSS, Templates, and Shared Assets. Shared Assets meaning.. use the same images, javascript files throughout the site rather than making them page specific. Reduce and Reuse!
Other methods of re-development can be Scripting, Find and Replace, Hand Coding, Application code updates, and XML... duh, right? The whole concept of a redesign is to generalize everything, but sometimes you do need a little bit of Hand Coding on a single page..
At this point, Straghalis went through the steps his team took with Adobe.com and merging the Macromedia together. Currently his team is working on redesigning the current Adobe.com into something very customizable and personal to the User.
So.. to summarize, ask yourself Why redesign? When you know why you're redesigning, ask yourself What are you redesigning? When you know the scope, start doing something prototypes, and ALWAYS build with a redesign in mind.
Then once you're done, it's time for vacation!
Overall, I thought this was a great presentation full of rich practical information that really does work. Most of this stuff is rather obvious, but sometimes you just need to be reminded of it in a very organized way. ^_^ Great stuff.