Design and demo

I started working on a layout for the homepage of our website this week. I have only basic experience with CSS so this has been quite a learning curve. I was able to find some templates and website design examples that I liked and I then modified and added to these to get a layout that I liked. Once of the most difficult things for me is making sure that the CSS I use for one element doesn't mess up the design of another element. This can be done by specifying element IDs when creating a CSS style (so the style only applies to the element with that id). Alternately, you can specify a sequence of class names that uniquely identify a particular part of your website and then assign a style to that. This works well if you have a certain grouping of elements that you want to be styled the same throughout your website.

Another part to CSS that is also tricky is making sure that resizing the window does not mess up the layout of the website. This can be partially accomplished by using the CSS "@media" tag, which allows you to specify how a layout looks at certain dimension (for instance, if the size of your screen goes below a certain number of pixels, you can change how the elements on the page are arranged so that they do not overlap each other). There is also a phone emulator in Google Chrome (in the Developer Tools), which allows you to simulated various phone displays. This can also be quite helpful (if a little slow since it is an emulator).

Fernando and I will be working on the layout of the profile page this week since it is what the user will be looking at every time they log in. This will be a challenging task since it is very important to create a design that is not only pleasant to look at and is well laid-out, but is also functional and easy to use. The most important part of the page is probably the progress bar so we will need to make sure that it is fully functional and well designed. I have started to try out some CSS to make it match the color scheme of the home page, but so far I have not found a layout that I like. We will also have to revamp the statistic buttons, maybe creating an icon for each one and making them more prominent in the layout.

Since we have a demo on Monday, I've also been researching some facts that we can use to justify why we are creating this website and why it will be useful to customers. Fernando created a Google document that we can all access to put down ideas for each of the slides that we will have in the presentation. We also decided to have a video of our website in use instead of a live demo because the very nature of the challenges (having to check-in over a period of weeks), makes it impossible to demo in one or two minutes.