205cde: developing the modern web assignment 1: designing a … · 2013-01-06 · 205cde:...

205CDE: Developing the Modern Web – Assignment 1: Designing a Website

Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student

205CDE: Developing the Modern Web

Assignment 1: Designing a Website

Scenario: D – Bookshop

Introduction

I decided to make a second hand bookshop website. There are some reasons why I

made this choice. Mainly it is because there are lots of bookshops that have poor

design, sometimes it is hard to find the book you want and I think I could design it

to be very simple.

Colors – Adobe Kuler

The first thing I had to do is to create a design of my website on Adobe Photoshop.

One of the hardest tasks for me was to figure out what colours do I want for my

bookshop. I used an adobe kuler website to create the colours I need. Although first

colors I choose were too different one from each other. I found out only when I was

in the middle of creating a static website. A friend took a look at my website and

said that the colors are too different from each other, she advised me to darken the

navigation bar colour and brighten a little the body of the page. That is what I did

and the final colours of my website on kuler are in the picture below. First one from

the left is for header, second is for navigation bar, third is for all body of the page,

fourth is for background of where content of page will appear, and the fifth is for

footer.



Webpage Design – Adobe Photoshop CS6

The start with the design was quite slow. I had many things to consider: logo of

page, title, position of navigation bar and so on. As it is a bookshop, I decided to

modify a picture of books in the Photoshop. I did not have many hesitations with

the title, as I decided to make it simple – The Second Hand Bookshop. I also added

colors for navigation, content and footer. Image of the colored webpage is below.

Creating navigation design was easy. I just imagined myself visiting the online

bookshop. What information I want to see first? What is the least important? That is

how I done it. In the footer I included same links as in the navigation. I also have

plans to include more links in the footer, such as privacy policy, site map, links, but

I will implement them later when I will create the website. Picture of the design

with the navigation and footer links is below.



And finally, I decided to include a search bar for the design. The final design picture

in the Adobe Photoshop is below. There are also some things I did not include in the

design or changed such as Login/Register link. This happened because I figure out I

forgot them only after I completed my design and started creating a static page.



Static Webpage – Notepad++

My static webpage consists of seven hypertext markup language files and one

cascading style sheet file.

Homepage

I decided to stay simple at the homepage. Firstly, some introduction sentences at

the top telling what this page is about. Secondly, the most popular books section. I

thought this is important because I think people usually check out what books are

viewed most and expect them to be interesting. Every book has a separate field

which has the book name with author as legend, some small introduction to book

and a picture of it. Legend is made as a link, so if people are interested in buying it,

they just press the link which follows in to another page (not implemented yet, test

link provided). You can find a picture below.

Authors – Browse

Author’s page meant to have a purpose of searching for books by author. But later

on I figured out that users might want to search not only by author, but by subject

or title as well. So I decided to switch page from authors to browse. In the page

you can choose how to browse: by authors, subject, title or year. Below that there

are alphabetic letters. User press the letter needed and a list of books shows up

starting by letter they choose. Then, depending on their choice they are directed to

another page with that authors books (or subjected books, or books published that

year etc. depending of their choice before). I made just a sample page to imagine

how it may look. You can see a picture below.



New Books

This page shows the new books that are offered to sell. This page basically works in

the same way as the Homepage just it does not have an introduction. Picture of this

page is below.

Sell Books

I think you might guess how this page is used. This page is for people who want to

register a new book that they want to sell. Sell Books page will consist of three

separate pages. First one will be the login page, where users can login to their



accounts. If they are already logged in, they will be redirected to second page,

where they have to enter the book information. The third page will be for choosing

payment method and confirming the payment. My static webpage has only the

second page, because I will show the Log in page later on. There are two ways user

can enter the information about book. Either user enters it by itself or he just

enters a barcode of the book, price and some extra information he wants. You can

see an image of the Sell Books page below.

About Us

Not much to tell about this page. It just has some information about who I am and

what is the purpose of the website.

Contact Us

Contact us page consists of three parts: my address, telephone number, e-mail and

a contact form. Contact form requires user name, e-mail and the text, where

people enter what problem they persist, or what they want to ask. When they press

send, a message should be sent to my e-mail. You can see a picture below.



Log in / Register

This page was not included in the design of my website. Although this is important,

so as soon as I noticed my mistake I decided to fix it. There are two ways to get to

the Log in / Register page. First one is the link on the top corner of the header. The

second one is in the footer. Log in / Register page has two forms. First one is for

existing users, to log in to their account. The second one is for creating a new

account. When user press continue button they are redirected to another page

where they can their bank details for future purchases (not implemented yet).

Search Bar

A simple search bar is provided in every page of the website. It is located in the

bottom corner of the header. This decision was made because it is important for

users to reach search bar easily, without having to look for it.

Footer

Footer consists of links. At the moment only links same as on navigation bar are

provided. Later on more links will be added such as Privacy Policy or Site Map.

Footer also has icons, which show that this webpage CSS file is validated by W3C.

CSS Validation

Webpage Cascaded Style Sheet is validated by W3C CSS Validation Service. No

errors have been found in the CSS file. There are images that show CSS validation

on the bottom of the page, inside the footer.



Web 2.0

Web 2.0 will not be excluded from my webpage. One of my plans is social

networks. Nowadays social networks play big parts in most people lives. I am

thinking to create a Facebook, Twitter pages, so people can share their thoughts

about the website. Moreover, they will be able to share the books they just added

to the website, so it is easier for them to sell. Every book will have a comments

bar, where they can share thoughts about the book.

People will also be able to subscribe to newsletters. Anyone can choose a category,

what books are they interested and they will always get an email when a new book

is being sold of their choice.

Accessibility will be included as well; I will discuss it furthermore below.

Accessibility

I have done many things to improve accessibility in my website.

ALT tags. I have included alt attribute to every image of my website. This

helps for those who use screen readers – they cannot read images or videos

so alt tag is key thing to describe what picture is about.

Accessible forms. Every form or button in the website has a tab index

included. Tab index is useful, because you can use tab button to scroll to

every single part of the form, so you do not have to use your mouse. So user

can fill the forms faster. If they do not want to use tab index, they can use

access keys. Every form has a letter underlined in description on the left. If

the user presses that letter on the keyboard, webpage directs cursor straight

to that form.



Website is validated through W3C Markup Validation Service. No errors

received.

Browser Compatibility

I tested three browsers for my website. Google Chrome and Mozilla Firefox worked

perfectly, no issues were detected. Although I had some problems with Internet

Explorer 10. Some links appeared to be highlighted in a yellow color after they were

clicked (picture below). Another issue was command called autofocus, which should

focus on the form commanded in the page. On Internet Explorer it does not work.

On the other hand, Internet Explorer 10 fixed many issues that older versions had

(lists, links, colors, headers and so on).

Issues Occurred

I had several issues when I was creating my static page. First one was with the

page sections. Webpage was creating a blank space between different sections of

page (header and body, body and footer). After doing some research in the internet

I figured out that it is because of web browser leaving margins by itself. So I

entered margins in the CSS file and the problem was gone. You can see a picture of

this problem below.



Another problem I faced was with the Log In / Register link on the top of the

header. The issue was that when I pressed the link, it highlighted, but not only the

link – the long horizontal line through the page. As web research did not give me

any results I consulted with my lecturer and he made a point that it might be

because of position of the link made with padding. Later on I switched from padding

to margin and everything was fixed afterwards. You can see a picture below.

205cde: developing the modern web assignment 1: designing a … · 2013-01-06 · 205cde:...

Documents