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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.
205CDE: Developing the Modern Web – Assignment 1: Designing a Website
Arunas Bedzinskas, ID 3790007, 2nd Year Bsc Computing Student
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.