I've made good progress towards creating a similar, more slender template to mimic the site's current design. I'm allocating room on the server for the new version, so I will be able to test browser compatibility and review before I replace the current site with my design.
A lot of the remaining content can just be copied/pasted into the template for now, and updated as I receive or write the new content .Until then, this will be good enough.
One of the pages that is getting a serious makeover, however, is the personnel pages for the CVCN and COBRE staff. The current structure is made by tables, but I am trying to convert them to divs (both out of principle, and also as good practice).
When I do this tomorrow, I'll go over good practices for converting tables to divs.
Thursday, February 17, 2011
Wednesday, February 16, 2011
Beginning the Update
In order to update the previous site, whilst working on the new one, the word content of the previous site can be updated quickly, requiring only the new design to be applied later on.
It becomes a bit of a balancing act, as the old site was designed using bad design principles (as mentioned in the previous post). I can't change the content until I make a more flexible layout, I can't test out the layout until I have better content.. and on and on.
The About Us Page
This page seemed a good place to start, for a number of reasons. It features a large body of text, and is practically bloated with buzz-word cruft. I was looking for tools to help check text readability, and came across a fairly useful one - using the Gunning-Fog index we can check readability based on how difficult its words are (based on amount of words with more than 3 syllables, with an increasing scale of difficulty). The old site scored an index of 30 - ranking worse than most government or academia pages.
My new content scores at 12, which is about the level of a magazine or newspaper.
By starting here, the page with the most written content, I can start to set the mood of the content for the rest of the site. Once this is given the thumb's up, I'll be able to assemble the rest of the template, and then fill in the content for the rest of the pages. A good start, indeed!
It becomes a bit of a balancing act, as the old site was designed using bad design principles (as mentioned in the previous post). I can't change the content until I make a more flexible layout, I can't test out the layout until I have better content.. and on and on.
The About Us Page
This page seemed a good place to start, for a number of reasons. It features a large body of text, and is practically bloated with buzz-word cruft. I was looking for tools to help check text readability, and came across a fairly useful one - using the Gunning-Fog index we can check readability based on how difficult its words are (based on amount of words with more than 3 syllables, with an increasing scale of difficulty). The old site scored an index of 30 - ranking worse than most government or academia pages.
My new content scores at 12, which is about the level of a magazine or newspaper.
By starting here, the page with the most written content, I can start to set the mood of the content for the rest of the site. Once this is given the thumb's up, I'll be able to assemble the rest of the template, and then fill in the content for the rest of the pages. A good start, indeed!
Tuesday, February 15, 2011
Leave a Legacy
I can't find any good articles on the subject, but I do have a few things to point out today.
I am going over the site that the previous designer designed, and I have noticed more things that need changing than I anticipated. On the surface the site looks good, but having a chance to look "under the hood" I've noticed things that I would have done differently.. as I hope most designers would.
Mistakes to look out for, if you're taking notes, are things like...
Mish-mash of code components.
The previous designer used a php navigation bar, javascript for some elements, flash for others, layout elements in CSS and in tables, all signs that the site may have just been made up as he went along. Looking at all this, it might be a miracle (or mad genius?) that the site runs at all. It can certainly run cleaner and faster (And be easier to modify in the future).
Absolute Locations with magic numbers.
It now makes sense in a dreadful sort of way as to why the footer would be positioned so far down below the content of the page. The footer (for each page!) was set at a custom absolute position, ranging at about 1500~5000 pixels from the top of the screen. None of these were formatted correctly; all seem to be at least 1000 pixels taller than they need to be.
Times New Roman Font.
A minor offense, but still one I noticed because he changed the font for each and every part of the layout to TNR deliberately. Microsoft Word abandoned Times New Roman as its default font for a good reason; any person who wants a design looking more recent than 2003 would never even touch it.
Good design practices will fix a lot of these things, and it is always good to design a website with the perspective of the person tasked to update it after you've passed on in mind.
Leaving comments for any CSS rules (why is there left padding on the third bullet in every list?) that seem ambiguous or arbitrary will prevent a well-meaning developer from changing them and panicking as they watch the site collapse into an unceremonious heap.
There is a difference between a shortcut and a clever, efficient design. Can you guess which of the two will be easily understood after you've moved on?
Keep your files tidy - Nest folders inside the site's structure to group together files that are only used locally, but don't drown someone in them if they're trying to track down the basics (main pages, common images, templates, etc.).
Construct a site map. A person just looking at your site's structure for the first time should have a good idea of what they're getting into. If there are half-finished or unconnected sites on your domain, ask yourself whether they should even exist. Going along with the previous point, it may make you come off as sloppy to the next developer in line.
I am going over the site that the previous designer designed, and I have noticed more things that need changing than I anticipated. On the surface the site looks good, but having a chance to look "under the hood" I've noticed things that I would have done differently.. as I hope most designers would.
Mistakes to look out for, if you're taking notes, are things like...
Mish-mash of code components.
The previous designer used a php navigation bar, javascript for some elements, flash for others, layout elements in CSS and in tables, all signs that the site may have just been made up as he went along. Looking at all this, it might be a miracle (or mad genius?) that the site runs at all. It can certainly run cleaner and faster (And be easier to modify in the future).
Absolute Locations with magic numbers.
It now makes sense in a dreadful sort of way as to why the footer would be positioned so far down below the content of the page. The footer (for each page!) was set at a custom absolute position, ranging at about 1500~5000 pixels from the top of the screen. None of these were formatted correctly; all seem to be at least 1000 pixels taller than they need to be.
Times New Roman Font.
A minor offense, but still one I noticed because he changed the font for each and every part of the layout to TNR deliberately. Microsoft Word abandoned Times New Roman as its default font for a good reason; any person who wants a design looking more recent than 2003 would never even touch it.
Good design practices will fix a lot of these things, and it is always good to design a website with the perspective of the person tasked to update it after you've passed on in mind.
Leaving comments for any CSS rules (why is there left padding on the third bullet in every list?) that seem ambiguous or arbitrary will prevent a well-meaning developer from changing them and panicking as they watch the site collapse into an unceremonious heap.
There is a difference between a shortcut and a clever, efficient design. Can you guess which of the two will be easily understood after you've moved on?
Keep your files tidy - Nest folders inside the site's structure to group together files that are only used locally, but don't drown someone in them if they're trying to track down the basics (main pages, common images, templates, etc.).
Construct a site map. A person just looking at your site's structure for the first time should have a good idea of what they're getting into. If there are half-finished or unconnected sites on your domain, ask yourself whether they should even exist. Going along with the previous point, it may make you come off as sloppy to the next developer in line.
Monday, February 14, 2011
First staff meeting
Today I'll be meeting with my boss and going over changes to make to some of the pages. This will help me get a feel for the website he wants (or thinks he wants, at this point), and plan accordingly. Keeping in mind that I'm not talking to a client that has a background in design, instead of trying to gain a tenuous grasp on vocabulary, I'm jumping ahead to provide visual cues and examples of what I'm looking to make.
For example, here is the current bios page. It reads very much like a reference page, so it serves its purpose. However, I would like to construct it to read more like a business or organization's bios page, such as this one - the information remains professional, but is more consistent and easier to understand.
This information is out of date, and will probably be the first to be updated. I've decided to take an approach of keeping the current site up-to-date as I work on a parallel site. As this site has a smaller audience and fairly basic functionality, I do not see any problems with implementing the new site all at once, at this point. However, I'll be doing research as I work to make sure that this is a good idea.
Edit:
Update. Meeting went very well.. it is always good to have a client that trusts your style. Going through the profile pages today and tomorrow, and hopefully should have the information updated by then.
For example, here is the current bios page. It reads very much like a reference page, so it serves its purpose. However, I would like to construct it to read more like a business or organization's bios page, such as this one - the information remains professional, but is more consistent and easier to understand.
This information is out of date, and will probably be the first to be updated. I've decided to take an approach of keeping the current site up-to-date as I work on a parallel site. As this site has a smaller audience and fairly basic functionality, I do not see any problems with implementing the new site all at once, at this point. However, I'll be doing research as I work to make sure that this is a good idea.
Edit:
Update. Meeting went very well.. it is always good to have a client that trusts your style. Going through the profile pages today and tomorrow, and hopefully should have the information updated by then.
Friday, February 11, 2011
Quick Thinking
I commute across state lines to work every day, and in that laborious morning journey I had a burst of sudden insight. The CVCN is closely related to the university in which it is based. I was a student at North Dakota State University until recently, when I decided to pursue web design instead. I will probably touch on that later, but for today my task is now to try to track down and meet with their site's web master (or better still, web designers).
Networking is a valuable strategy, especially for a newcomer to the field. A successful web site is the result of much time spent behind the scenes, tweaking and fine-tuning the code on which the website is built. Cross-browser compatibility, accessibility concerns, and even principles of design from a seasoned professional could prove to be great assets to a beginner such as myself.
I also now have a name of who to talk to for each page of the current website (who would be responsible for its content). From here, I'll be able to make sure all the content for each page is correct.. and from there, start to know which pages the new design will need.
Networking is a valuable strategy, especially for a newcomer to the field. A successful web site is the result of much time spent behind the scenes, tweaking and fine-tuning the code on which the website is built. Cross-browser compatibility, accessibility concerns, and even principles of design from a seasoned professional could prove to be great assets to a beginner such as myself.
I also now have a name of who to talk to for each page of the current website (who would be responsible for its content). From here, I'll be able to make sure all the content for each page is correct.. and from there, start to know which pages the new design will need.
Thursday, February 10, 2011
Thoughts on the new Design
With today I've started two tasks: sizing up how much of the current site's content must be changed/updated, and beginning to think about what the new site could look like. More on that one in a bit.
The Current Site's Content
The current site, as I talked about in the previous post, contains a lot of information. It is written at an academic level, which projects a sense of professionalism and intelligence - however, I'm wondering if maybe this makes it difficult to read at times. I will have to check with the department to see how much of this information is even up to date, and what all should be added or moved beyond that.
There isn't a lot in place for pictures, or other visual elements. The banner across the top contains a logo for the department, but I'm not sure if I will keep it for the redesign. As it stands, it isn't very effective at communicating the meaning of the site. The font is default Times New Roman and isn't easily readable. Depending on the new design, I might consider changing to a sans-serif font.
The Potential of a New Design
I will probably be spending several days (if not more) looking at and analyzing elements to incorporate into the new design. Right now the questions I'm trying to answer are fundamental to the purpose of what this new site should do.
A lot to consider, and while I start to gather how much of the content is changing, I'll also be considering possible answers to those questions.
 |
| Example Critique Sheet for the Home Page |
The current site, as I talked about in the previous post, contains a lot of information. It is written at an academic level, which projects a sense of professionalism and intelligence - however, I'm wondering if maybe this makes it difficult to read at times. I will have to check with the department to see how much of this information is even up to date, and what all should be added or moved beyond that.
There isn't a lot in place for pictures, or other visual elements. The banner across the top contains a logo for the department, but I'm not sure if I will keep it for the redesign. As it stands, it isn't very effective at communicating the meaning of the site. The font is default Times New Roman and isn't easily readable. Depending on the new design, I might consider changing to a sans-serif font.
The Potential of a New Design
I will probably be spending several days (if not more) looking at and analyzing elements to incorporate into the new design. Right now the questions I'm trying to answer are fundamental to the purpose of what this new site should do.
- What is the purpose of the new site? To inform, educate, advertise, etc. ?
- What words would describe this website?
- Academic
- Professional
- Edgy
- Smart
- Clean
- Practical
- etc.
- Who is the audience for the site?
- How dynamic is the site? How often will it be updated, and by who?
A lot to consider, and while I start to gather how much of the content is changing, I'll also be considering possible answers to those questions.
Wednesday, February 9, 2011
Investigating the Site
Starting with Day 2, I've decided to get my feet wet by looking at the current site. Without even focusing too deeply on the current design, I've just tried to illustrate what the current map of the site looks like:
Remembering good practices I had picked up from working with a web design firm in the past, I am time-stamping documents/relevant folders as I use them, just to keep them sorted out from one another. Chances are I will be revisiting several of these documents throughout the Development Life Cycle of this project, and it may be important to know when/what changes are made.
Just looking at the current site map, it's easy to see a few things about the current site. "News" and "Laboratories" are the biggest areas of content for the site, followed by Personnel. A few boxes have question marks in them, which shows that there is no content in those areas. I've been asked to consolidate a few of those into other areas, so over the next few days I will be working through and deciding which areas of content will need to be changed the most.
I'm meeting with the director and compiling a list of who "owns" each page, and how I can contact them to ensure that the information they have provided is relevant and up to date. The next few days are off to a good start, at least!
In the meantime I am reading articles about relevant topics such as website redesign, or how people "read" websites. A large portion of the current website is massive blocks of text, and using text more effectively will help reach many of the goals the new website aims to achieve.
 |
| Current Site Map (2-8-11) |
Just looking at the current site map, it's easy to see a few things about the current site. "News" and "Laboratories" are the biggest areas of content for the site, followed by Personnel. A few boxes have question marks in them, which shows that there is no content in those areas. I've been asked to consolidate a few of those into other areas, so over the next few days I will be working through and deciding which areas of content will need to be changed the most.
I'm meeting with the director and compiling a list of who "owns" each page, and how I can contact them to ensure that the information they have provided is relevant and up to date. The next few days are off to a good start, at least!
In the meantime I am reading articles about relevant topics such as website redesign, or how people "read" websites. A large portion of the current website is massive blocks of text, and using text more effectively will help reach many of the goals the new website aims to achieve.
Tuesday, February 8, 2011
Hello.
Hi there! I've started this blog as a way to catalog the adventures/misadventures of a web designer working through his first major professional project.
Tomorrow's entry will begin to get into the aspects of the design of the current website (both good and bad), but in this post I would like to focus on some good habits for beginning a job like this. I looked quickly on the web for examples of good practices for beginning new jobs, but for all the lists out there I would like to add a few things.
Acclimate to your work area
I am replacing a previous student employee who has moved on to bigger and better things. As excited as I am for him, I was more excited to see if there were any notes that he had left for me - Apologies for quick fixes used in the past, certain pages (or people!) that can be difficult to work with, and the like. I didn't have much luck, but once I was left to settle in to my desk, I checked the drawers for office supplies, references materials, flash drives, or other useful things that the previous employee thought worth keeping around. I made a note of the office supplies that were missing - it is very embarrassing to have to ask the secretary two hours into your job where to find a pen!
Along with this, find out details such as common acronyms/abbreviations are used around the office - It'll make you stick out less when explaining to others which area or project you're working on, help find your way around the office, help integrate yourself into the team, etc.
Make Friends with your Secretary
That said, getting to know your office's secretary will save you a lot of hassles later on, especially in the beginning days of work. You will see them often, and they will be life savers in a pinch when you need them. In the first days of work, answering questions for things such as where the restroom is located can be a daunting task; asking a coworker repeated questions over time may annoy them, and asking a manager or boss runs the risk of coming off as incompetent or like you're wasting their time. A good secretary will be happy to oblige, and will make sure you're one of the first to know when a certain boss's birthday is coming up so you can be ready with a card.
Check Everything
Try your password, try your chair, send yourself a test email, check all drawers and supplies to make sure that they are in working order. If they are noticed quickly they can be replaced without much hassle - noticed later on, and you may be the one blamed for why they were broken in the first place.
Get Familiar
Although similar to acclimating to your surroundings, this goes to the next step - Getting to know your coworkers. Make a point to meet and introduce yourself to everyone you know you will be working with, and say a friendly hello to everyone you get the chance to interact with: the chances are that if you've crossed paths with them once, you will probably do so again in the future. Take a quick tour around the area of your office - locate the break rooms, restrooms, and other places of interest. You don't want to work somewhere for two months before you realize they have a gym.
Stay on Task
A to-do list is a great way to keep oriented on the job at hand, especially in the midst of all the excitement that comes with being a new employee. A productive worker knows not only what he has accomplished, but also what remains to be done. While other new employees would be overwhelmed with the big picture of a project, you can calmly move from one task onto the next without losing your cool.
Get Connected!
This one may come off as either a surprise or a no-brainer.. start a blog. The purpose of writing down your progress with the job is two-fold: On one hand, it helps keep your thoughts organized. First, if an idea I tried did not work, I could go back to where I had written down other ideas I had been considering.
Second to that is my last remaining task on my to-do list for my first day on the job. I am realizing the truth in the quotation that "No man is an island." The classroom days of yore are over, and with them, the isolated and unrealistic projects. The business needs of one client to the next will vary, but chances are that someone has worked on a similar project before. Branching out to the internet and networking with other design professionals is a great way to get inspiration when there are no other directions to turn to. It also lets you network with future employers and coworkers.. after all, you never know who may read your blog someday. You're reading this, aren't you?
Tomorrow's entry will begin to get into the aspects of the design of the current website (both good and bad), but in this post I would like to focus on some good habits for beginning a job like this. I looked quickly on the web for examples of good practices for beginning new jobs, but for all the lists out there I would like to add a few things.
Acclimate to your work area
I am replacing a previous student employee who has moved on to bigger and better things. As excited as I am for him, I was more excited to see if there were any notes that he had left for me - Apologies for quick fixes used in the past, certain pages (or people!) that can be difficult to work with, and the like. I didn't have much luck, but once I was left to settle in to my desk, I checked the drawers for office supplies, references materials, flash drives, or other useful things that the previous employee thought worth keeping around. I made a note of the office supplies that were missing - it is very embarrassing to have to ask the secretary two hours into your job where to find a pen!
Along with this, find out details such as common acronyms/abbreviations are used around the office - It'll make you stick out less when explaining to others which area or project you're working on, help find your way around the office, help integrate yourself into the team, etc.
Make Friends with your Secretary
That said, getting to know your office's secretary will save you a lot of hassles later on, especially in the beginning days of work. You will see them often, and they will be life savers in a pinch when you need them. In the first days of work, answering questions for things such as where the restroom is located can be a daunting task; asking a coworker repeated questions over time may annoy them, and asking a manager or boss runs the risk of coming off as incompetent or like you're wasting their time. A good secretary will be happy to oblige, and will make sure you're one of the first to know when a certain boss's birthday is coming up so you can be ready with a card.
Check Everything
Try your password, try your chair, send yourself a test email, check all drawers and supplies to make sure that they are in working order. If they are noticed quickly they can be replaced without much hassle - noticed later on, and you may be the one blamed for why they were broken in the first place.
Get Familiar
Although similar to acclimating to your surroundings, this goes to the next step - Getting to know your coworkers. Make a point to meet and introduce yourself to everyone you know you will be working with, and say a friendly hello to everyone you get the chance to interact with: the chances are that if you've crossed paths with them once, you will probably do so again in the future. Take a quick tour around the area of your office - locate the break rooms, restrooms, and other places of interest. You don't want to work somewhere for two months before you realize they have a gym.
Stay on Task
A to-do list is a great way to keep oriented on the job at hand, especially in the midst of all the excitement that comes with being a new employee. A productive worker knows not only what he has accomplished, but also what remains to be done. While other new employees would be overwhelmed with the big picture of a project, you can calmly move from one task onto the next without losing your cool.
Get Connected!
This one may come off as either a surprise or a no-brainer.. start a blog. The purpose of writing down your progress with the job is two-fold: On one hand, it helps keep your thoughts organized. First, if an idea I tried did not work, I could go back to where I had written down other ideas I had been considering.
Second to that is my last remaining task on my to-do list for my first day on the job. I am realizing the truth in the quotation that "No man is an island." The classroom days of yore are over, and with them, the isolated and unrealistic projects. The business needs of one client to the next will vary, but chances are that someone has worked on a similar project before. Branching out to the internet and networking with other design professionals is a great way to get inspiration when there are no other directions to turn to. It also lets you network with future employers and coworkers.. after all, you never know who may read your blog someday. You're reading this, aren't you?
Subscribe to:
Posts (Atom)