A PERSONAL WEBSITE ADVENTURE

Sep 11, 2012

Making a personal website from scratch was not as easy as I thought it would be. There were many decisions to make and things to consider. When using other programs ( such as Flavors.Me or Wix ) to create a personal website, the software takes care of problems that you don't really need to consider. However, when making one from scratch, there are lots of things that can go wrong. For example, if SQL is used, SQL injection could be easily done if we don't sanitize our database inputs in the PHP scripts. For the front end, it can get messy. Below, I've listed some things to consider:

Different Browsers

This gives most web-designers a very large headache - dealing with how content and style shows on different browers and different versions of those browers. Before using any css styling or html tags, make sure they are compatible. One thing that saves a lot of pain is a browser checker. I used Browser Shots and Adobe BrowerLab. Both are free and can save lots of time.

Different Screen Resolution

Monitors with different screen resolutions will make the webpage look different especially when there are things in the css such as "width: 50%;" and "bottom: 0px;" One of the things to prevent that from happening is to have percentage widths on layouts. If there is a div in the middle, it's easier to set the width to be 80% rather than 1000px. This way, when the screen is a 3000px width monitor, it's not going to look like a little box in the middle of the screen with a huge amount of space on the sides.

Color

Normally, I would use the colors I like, for personality reasons. However, not everyone sees colors the same way. For people with color-blindness, it's a bit hard to tell the difference when there are colors like orange on yellow.

To me, the image above is hard to read. Not only is there not enough contrast, but the colors are bright. When reading a post that is longer than a paragraph or so, that may be a problem. For contrast, I used a color checker to make sure that everything has enough contrast for most people to see. It's a simple and easy way to check if the words written on this page is readable. Bright colors should be reserved for appropriate times such as attention-catching banners. If it is for a long read, let's hope it's not painful.

Consistency

When I first tried making a website a while ago, I had all these ideas that I wanted to try. There were bubble pages with 3D animation, simple pages with light coloring, and florescent pages with dark background. After putting one thing with another, every page looked nice. There was just one problem: consistency. Each navigation bar was on a different corner of the page and the colors were completely different. It felt like a mess when trying to navigate. So for this one, I took a couple of days to think about the theme, to get the most important ideas out. I decided I wanted my site to show two things: simplicity and personality. Instead of diving straight into the code, it would be beneficial to use a graphical program (such as Inkscape or Abobe Photoshop) to draw out exactly what will be on each page of the site. It took me about 3 designs later to get exactly what I wanted, but it was consistent.

Accessibility

After designing and creating the site, we can look at accessibility. This will make it easy for people who are feeling lazy during the day and just want to tab through the site. Most importantly, it will help screen readers understand exactly what is on the screen (so in case a visually impaired individual wants to read your site, they can). There are many things to do for accessibility, for example:

  • Alt-texting on images
  • Adding titles onto images and links
  • Use "tabindex: 0;" to focus
  • H tags for headings
  • Trying not to hack the html for styling purposes

To test, there are demo screen readers. Also, you could just pretend to feel lazy, and tab through the site - see how hard it is to get to places. Accessibility may be one of the last things to consider after the site is all done, but it's usually very nice to have.

To make things easier, there are many resources such as the Html5 Boilerplate on GitHub that will take care of little edge cases. There are many other things to consider, and it makes me appreciate what other website creation tools do.