This document discusses the implementation, testing, and evaluation of a wedding website. It describes how CSS, HTML, JavaScript, images and other technologies were used in the site's development. The site was tested for speed, validation, and responsiveness across different browsers and devices. Based on these tests, some optimizations were made, such as moving JavaScript to external files and removing unused CSS. Overall, the site performed well and was responsive, with some room for further improvements.

1. Walshinho Wedding – Kate Godinho
D15127169
CONTENTS
1 Implementation ............................................................................................................................ 2
1.1 CSS files................................................................................................................................. 2
1.2 HTML files ............................................................................................................................. 2
1.3 Responsiveness..................................................................................................................... 2
1.4 Use of Javascript ................................................................................................................... 3
1.4.1 RSVP form validation..................................................................................................... 3
1.4.2 Dropdown menu ........................................................................................................... 3
1.5 Use of images........................................................................................................................ 3
1.5.1 Image sources ............................................................................................................... 3
1.6 Use of other technologies..................................................................................................... 4
2 Test and Evaluation....................................................................................................................... 5
2.1 CSS code................................................................................................................................ 5
2.2 CSS framework...................................................................................................................... 5
2.3 Validation of CSS and Html code........................................................................................... 5
2.4 Testing website speed........................................................................................................... 5
2.4.1 Google Chrome – Page load time.................................................................................. 5
2.4.2 Firefox – Extended Statusbar ........................................................................................ 7
2.5 Testing responsiveness ......................................................................................................... 7
2.6 Evaluation ........................................................................................................................... 10
2.6.1 Question 1 and 2: Browsers/devices........................................................................... 10
2.6.2 Question 3 and 4: Website colour scheme.................................................................. 10
2.6.3 Question 5 and 6: Website content............................................................................. 11
2.6.4 Question 7 and 8: Responsiveness.............................................................................. 12
2.6.5 Question 9 and 10: RSVP form .................................................................................... 14
2.6.6 Question 11 and 12: Ease of finding information........................................................ 16
2.6.7 Question 13: Other comments.................................................................................... 17
2.7 Alterations made after Evaluation ...................................................................................... 18
2.8 Outcome of Test and Evaluation......................................................................................... 18
2.8.1 Website performance ................................................................................................. 18

2. 2.8.2 Website mobility......................................................................................................... 19
2.8.3 Recommendations for further development .............................................................. 19
1 IMPLEMENTATION
1.1 CSS FILES
All CSS files for my website are in a folder called “css”. My external style sheet is called mystyles.css
and includes all of my own CSS code for the website. I have used pastel colours, a script font for
headings, and a lace background image to fit with the wedding website theme.
CSS framework: I used the responsive grid system from http://www.responsivegridsystem.com/ as a
framework for my website. I used varied numbers of columns from two to twelve to structure the
webpages. I have included all column sizes for the css files to allow greater flexibility in my website
design rather than having a single fixed column width.
External code for dropdown menu: To implement a dropdown navigation menu for the mobile
website, I used CSS code from http://www.w3schools.com/howto/howto_js_dropdown.asp.
1.2 HTML FILES
I have created six HTML files – the homepage (index.html), Wedding details (weddingdetails.html),
Accommodation (accommodation.html), travel information (travel.html), a contact page
(contactus.html) and an RSVP page (rsvp.html).
I have added content to these pages for wedding guests to browse for information about the
wedding. While some of the text information is quite short, it all fits the general wedding theme. I
have also included appropriate images alongside the text.
1.3 RESPONSIVENESS
HTML code
- I have included two different versions of the main navigation menu – a bar across the top for
desktop and tablet devices, and a dropdown menu button for mobile devices. This addresses
responsiveness by changing the menu according to the screen size of the device.
- I have used classes and ids for divs to make it easier to change the styles of the html
according to the screen size.
CSS code
- The responsive framework aided in responsive design by setting all column widths to 100%
once the screen size is below 480px.
- I addressed responsiveness by using media queries at the end of my CSS to alter the
appearance depending on the screen size. I used two media queries – one at a screen size of
767px for tablet devices, and a second at a screen size of 480px for mobile devices.
- Tablet devices:
o Main menu bar: I reduced the font size and allowed word wrap to fit smaller
screens.

3. o Sidebar in content pages: The sidebar menu will not display on tablet devices. As this
leaves empty space on the page, I increased the size of the main content to fill the
space.
- Mobile devices:
o Main menu bar: The main menu bar will not display and will be replaced by a
dropdown menu for mobile devices.
o Pictures and maps: To reduce the amount of content and the reloading time, images
and maps are not displayed on mobile devices.
o Sidebar: The sidebar menu for content pages is not displayed on mobile devices.
o Font size: I reduced the font size for headers and certain text to make it fit better on
mobile screens.
o Travel map: I reduced the height of the map on the travel page to better suit mobile
screens.
1.4 USE OF JAVASCRIPT
1.4.1 RSVP form validation
I used Javascript on the RSVP webpage for form validation to ensure that a name, surname and
email address have been entered. The script checks whether a value has been entered in the name,
surname and email fields. If no details have been entered in one of these fields, an alert box is
presented asking the user to provide the missing information and the form is not submitted. If all
details have been entered, an alert box is presented thanking the user for sending their RSVP.
While other form validation would be necessary for completeness, such as checking that the email
address is valid and ensuring that the user has selected “Yes” or “No” for the attendance radio
buttons, this code is more complex and unfortunately, I did not have time to implement it. I would
include further form validation in any future development of the website.
1.4.2 Dropdown menu
I used javascript from http://www.w3schools.com/howto/howto_js_dropdown.asp to implement
dropdown menus on the mobile pages.
The javascript contains a function called “showMenu” which toggles between showing and hiding
the dropdown content when the menu button is clicked. It also contains a second function to close
the dropdown menu when the user clicks outside it. This uses “window.onclick” to check if the user
has clicked outside the dropdown menu. It then checks to see if the dropdown menu is currently
displayed and if it is displayed it hides it.
1.5 USE OF IMAGES
Image resizing: To allow image resizing as the screen size changes, I set the max-width of images in
css to 100%. This allows the images to shrink as the screen dimensions decrease but images will
never be larger than their original size.
Image display: On mobile devices, the images on content pages will not be displayed. This reduces
the amount of content on small screens, while also reducing the page reloading times.
1.5.1 Image sources
I used images I found using a Google image search. The details for each image are given below.
Ideally I would use only open source images for my website to avoid any copyright issues and/or

4. credit each image on my website. However, due to the time constraints of this assignment, I did not
wish to spend a long time sourcing images and I may replace some of the images in further
development.
Image name Image source
aisling.jpg http://www.aislingbandb.com/sites/2480/wwwroot/gallery/1272/large/Gall
ery%20Image%2015.jpg
bouquet.jpg https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSQ12tEuBDDhZSRUbKPga53AnVFNb
YPkE-P6lh43no02YtTnIZcfQ
brandon.jpg https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRKDOWqXzpc4pEeuE-odJo-
ro1fYoBNddAeb--Owx8anuh143nluQ
bride.png http://2.bp.blogspot.com/-
P5lLI6fzw9I/UwRud_U_cKI/AAAAAAABxko/mzJtGFnrI0I/s1600/Beautiful-
bride.png
footer-scroll.png http://www.datemplate.com/postpic/2010/10/scroll-border-clip-art-with-
transparent-background_556501.png
groom.jpg https://uk.pinterest.com/pin/188306828145363881/
heart-header.png https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTxGnRd3MSe-
DuJd185ORmope7VJlxJdA_L4sI3LkEIQzz2b1no
KilnaspicChurch.jpg http://homepage.eircom.net/~mooncoin/IMAGES/townsland_Killinaspic/kiln
aspic4.jpg
Lace.jpg https://s-media-cache-
ak0.pinimg.com/736x/e1/c6/c7/e1c6c79d16e608347271351e1c7e215c.jpg
newross.jpg http://www.thegracechurch.ie/Uploads/Userfiles/new%20ross.jpg
party.gif https://weddingshowergames.files.wordpress.com/2007/10/party-party.gif
rings.png https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQYzOaDc_-
bDXQexy5Ov1OJQDLoJB3FoPlyzIfGVyHW4_YNGSJQ
rsvp.jpg http://cdn.notonthehighstreet.com/system/product_images/images/002/12
8/900/original_wedding-invites-and-rsvp.jpg
1.6 USE OF OTHER TECHNOLOGIES
Forms: I have used a form on my RSVP page to get information from guests about their attendance.
Iframes: I have used iframes in my travel information page to provide maps of locations for guests.
Both of the above technologies fit with the wedding theme of the website. The RSVP form is a
feature of most wedding guest websites, and maps/directions are also provided to wedding guests
to help them find the venue.

5. 2 TEST AND EVALUATION
2.1 CSS CODE
No. of lines of my own CSS code in mystyles.css: 294
No. of lines of adjusted CSS code in mystyles.css: 47
I have not altered the code in the responsive grid framework files, apart from one line in
html5reset.css to change the font size from 100% to 1em.
2.2 CSS FRAMEWORK
I used the responsive grid system from http://www.responsivegridsystem.com/.
I used this framework to make it easier to arrange the content of my website. It allowed me to set
up columns of various sizes and to place my content within the columns. For example, I used 5
columns in the header, 6 columns in the main menu, and 12 columns for the content pages.
Although, I did not use all column sizes provided, I included all stylesheets initially to allow greater
flexibility to change the number of column sizes if redesigning the website.
The responsive grid system also made it easier to address responsiveness in my website. Once the
screen width is below 480px, a media query in the framework sets all column sizes to 100%. This
reduces the webpages to single column for mobile devices.
2.3 VALIDATION OF CSS AND HTML CODE
I validated all html files using https://validator.w3.org/ during development. I found that there were
a few errors with the iframes as I had used code directly from Google maps which included in-line
CSS. I changed the html to ensure that all styles were included in external CSS for the iframes. My
final html files do not show any errors.
I also validated my CSS code using https://jigsaw.w3.org/css-validator/validator
2.4 TESTING WEBSITE SPEED
2.4.1 Google Chrome – Page load time
I used the Google Chrome extension “Page load time”
(https://chrome.google.com/webstore/detail/page-load-
time/fploionmjgeclbkemipmkogoaohcdbig?hl=en) to test the speed of webpage loading.
Screenshots of the analysis of page load time are given in Figure 1 with a summary of the overall
page load times in Table 1.
Table 1 shows that most of the pages load in under 0.3 s. The accommodation page loads in the
shortest time of 188 ms, while the Travel page takes 7.2 s to load. The reason the travel page takes
the longest is the presence of four iframes within the page, linking to google maps. The loading time
could be reduced by removing some of these iframes.
To decrease the page load speed I moved my javascript into external files. The revised load times are
shown in Table 1. The load times are slightly shorter, but not significantly. The travel page load time

6. has increase, however, this variation is likely due to varying internet speed in loading the iframe
from Google maps.
Homepage: Wedding Details
Accommodation: Travel:
Contact us: RSVP:
Figure 1 Page load times for website from Page load time extension
In the original website, I included css files for all column sizes from 1 to 12 columns. As I did not use
all of these column sizes within my website, I removed all unused CSS files. The updated load times
are shown in Table 1. While there are slight changes in the load times, these appear to be mainly
due to changes in internet speed during the test rather than representing a real change.
I used http://optimizilla.com/ to compress all images within my website. Table 1 shows that the
page load times have not significantly changed.

7. Table 1 Summary of page load times for webpages within website
Page Load time (ms)
Original External
javascript
Remove
unnecessary CSS
Image
compression
Homepage 282 116 120 147
Wedding details 246 234 241 172
Accommodation 188 173 220 155
Travel 7222 7879 6432 6722
Contact us 312 226 186 214
RSVP 253 228 168 194
2.4.2 Firefox – Extended Statusbar
As the Google Chrome extension did not show any changes in page load speed, I also installed the
Extended Statusbar extension for Firefox (https://addons.mozilla.org/en-
US/firefox/addon/extended-statusbar/) to check my website speed. This tool gave different loading
times to the Chrome extension, and having analysed the results, I believe that the Extended
Statusbar results are more accurate.
I tested the original website against a version with external javascript, unnecessary CSS removed,
and compressed images and the load times are shown in Table 2. The Firefox tool gives load times
for the original website of 0.5-6.8 s, differing from the load times in Chrome. After altering the
website, load times for most pages decreased by 0.2-0.3 s. The only pages that did not show
decreased load times were Accommodation and Travel. This is because the images on the
Accommodation page were already quite compressed. The long loading time for the travel page is
due to iframes and these would need to be removed to show any significant speed-up.
Table 2 Speed test with Firefox Extended Statusbar of original website and website with optimised images, external
javascript and unnecessary CSS files removed.
Page Load time (ms)
Original Altered website
Homepage 721 451
Wedding details 740 538
Accommodation 524 582
Travel 6783 6724
Contact us 783 539
RSVP 852 481
2.5 TESTING RESPONSIVENESS
I tested the responsiveness of my website using the Google Chrome extension Responsive Web
Design Tester (https://chrome.google.com/webstore/detail/responsive-web-design-
tes/objclahbaimlfnbjdeobicmmlnbhamkg). This allowed me to view the webpages at the sizes of
different devices.
The layout of the accommodation page is shown in Figure 2 at desktop screen size.

8. Figure 2 Accommodation web page at desktop screen size.
For comparison with the desktop site, the layout of the accommodation page is shown in Figure 3 at
iPad portrait screen size. It can be seen that the sidebar with the in-page links has disappeared,
allowing the remaining content to be expanded to fill the page. The word “Accommodation” in the
menu bar has also wrapped to the next line. While this is not an ideal way of dealing with a long
word, it avoids the word overlapping. It may be better to reduce the font size or increase the div size
for “Accommodation” to avoid this issue.
Figure 3 Accommodation webpage at iPad screen size
The layout at iPhone(6) screen size is shown in Figure 4. The main menu across the top has been
replaced with a dropdown Menu button, and all images have been removed. While this makes the
website look a little dull compared with the tablet and desktop versions, it has the advantage of
decreasing page load times.

9. Figure 4 Layout of Accommodation webpage at iPhone screen size.
One issue I found while checking the responsiveness of the website was with the RSVP page. As the
screen size was decreased, the RSVP image overlapped with the text boxes (Figure 5). As this was at
a size between mobile and tablet, it is unlikely that users will notice this issue. However, I was able
to fix this issue by adjusting the width of the text boxes in my style sheet. Setting them to a width of
95% resolved the issue.
Figure 5 RSVP page between tablet and mobile size - RSVP picture overlaps with text boxes.

10. 2.6 EVALUATION
I carried out a survey using Google sheets to evaluate my website. The survey is at
(http://goo.gl/forms/w4dmn3DAwL). Since the website is not online, I placed the website files on
Dropbox to allow participants to access the website. I surveyed 8 people about the website.
Although this is not a large sample size, it is enough to get some initial feedback about the website
design.
As the website is intended to be used by wedding guests of a variety of ages and abilities, I felt that a
survey was the best way to gauge the usability of the website. It allowed people with different
experience levels to use the website and to assess whether the design was appropriate as a wedding
website. While an interview or expert review would also give me feedback on the design, I felt that
these would only give me a single opinion on the website based on one user. A survey allowed me to
get multiple views on the website so that I could get a better overall picture of the suitability of the
website for the varied target audience of wedding guests.
2.6.1 Question 1 and 2: Browsers/devices
My first two questions asked the participants to provide the browser version and device they were
using (Table 3). I included this question in case any particular issue was only seen in one particular
browser on a specific device.
Table 3 Answers to survey questions 1 and 2
Questions Please indicate what browser and
version you are using (e.g. Internet
Explorer 11)
Please indicate what type of device you
are using, including the brand name for
mobile and tablet devices (e.g.
Samsung Galaxy S6)
Answers
Internet Explorer Desktop
Chrome Dell Deskop
Chrone Hp Laptop
chrome 49.0.2623.112 m (64-bit) dell optiplex(DIT)
Google Chrome Version 50.0.2661.87
m
HP ENVY x360
Internet Explorer 11 Desktop
Firefox Laptop
Google Chrome Asus Laptop K53E
As seen from Table 3, the survey participants used Firefox, Chrome and Internet Explorer.
Unfortunately, this means that I have not received any feedback from Safari or Opera users. If I was
testing the website further, I would look to survey users of all browser types.
As the website was only available offline, all users have used desktop and laptop computers. This
means that the functionality on mobile and tablet devices has not been fully surveyed. In future
website evaluation, I would upload the website online to allow evaluation to be carried out using
different devices.
2.6.2 Question 3 and 4: Website colour scheme
Question 3 and 4 related to the website colour scheme (Figure 6). I wanted to gauge whether the
colour scheme I had used matched the wedding theme of the website. I also wanted to get
suggestions of where colours might not work and if any changes to the colour scheme should be
made.

11. (a)
(b)
Figure 6 (a) Results for survey question 3, 1=colours do not suit, 5=colours work well. (b) Results for survey question 4.
The results for question 3 are shown in Figure 6(a). I used a scale of 1-5 with 1 indicating that the
colours do not suit and 5 indicating that the colours are suitable. 7 out of 8 participants rated the
colour scheme as a 4 or 5, indicating that the website colours were well suited to the wedding
theme. Only 1 participant did not think the colours worked with a 2/5 rating. 50% of respondents
gave a rating of 4 indicating that some improvements to the colour scheme could be made.
In question 4, I asked for details of any colours that participants would like to change. With a small
sample size, it is difficult to gauge any overall trend from the answers, however two answers did
suggest that the header colour could be changed to work better with the background. As the header
is the only coloured section of the page, it may be better to use a grey colour that blends better with
the background. I would look into this further if redesigning the site.
2.6.3 Question 5 and 6: Website content
Question 5 and 6 asked users to evaluate the level of content provided on the website (Figure 7).
This was designed to gauge if I had omitted any information that may be of interest to guests.
Figure 7(a) shows that the majority of participants felt that the website had a suitable level of
content. Only one person did not feel that there was enough content. From their answer to question
6, this participant indicated that there was too much white space in the website and that this should
be filled with more text. In further development I would address this issue by including more
descriptive text, or by optimising image sizes to better fill the space.

12. (a)
(b)
Figure 7 Responses to survey question 5 (a) and 6 (b).
Question 6 gave some contrasting responses (Figure 7(b)). While one participant suggested removal
of the “Go to section” sidebar, another participant suggested that it be changed to a fixed position
so that it remains on the page when the user scrolls to the bottom. As I would like to retain in-page
navigation, in further development, I would look to change the sidebar to a fixed position.
Another suggestion was that the photo for “Alternative accommodation in New Ross” should be
resized to better fill the space or additional photos should be included. I agree that this photo does
not make optimal use of space and in further development, I would look to include additional photos
to decrease the amount of white space.
2.6.4 Question 7 and 8: Responsiveness
Question 7 and 8 asked users to resize the browser window to test the responsiveness of the
website and to report on any issues they found (Figure 8).
In question 7, five people scored the responsiveness as 4/5 with two giving 3/5 and one giving a
score of 1/5. This indicates that while the website has a certain level of responsiveness, and the
website works at smaller screen sizes, some improvements are necessary.

13. (a)
(b)
Figure 8 (a) Responses to survey question 7 on a scale from 1 = Does not work at small screen sizes to 5 = Looks good on
small screen size. (b) Responses to survey question 8.
The responses to question 8 gave a number of suggestions to improve the responsive design of the
website. One issue brought up by two users was that the Menu button on the mobile website does
not suit (see Figure 9). It would be worth looking at this further in a redesign, and perhaps changing
the colour and/or position of the button. It may also be worth changing it to the hamburger-style
button used in many mobile websites.
Figure 9 Screenshot showing menu button for mobile website

14. Another user mentioned that the “Go to section” sidebar disappeared at smaller screen sizes. While
this is part of the responsive design, it may be worth including in-page navigation within the mobile
site to address this issue. The in-page links could be included within the main menu dropdown or in
a separate dropdown from the webpage title.
Several issues with the appearance of the header at smaller screen sizes were raised. One user
suggested including the heart logo in the mobile site. This would help to make the website
consistent across all devices. Another user suggested that the header text should be slightly larger.
One user also felt that the navigation bar text became squashed at smaller screen sizes with some
text being placed on two lines (Figure 10). While I have allowed text to break lines in my design for
tablet devices, in response to this feedback, it may be worth considering changing the menu bar to a
dropdown menu for the tablet site.
Figure 10 Menu bar at Nexus 7 Portrait size.
Another issue with the appearance of the site were that the mobile site had no images and appeared
quite dull. This could be addressed by including at least one image on each webpage to break up the
text.
One user identified that the text box on the RSVP page was too large for mobile sites (Figure 11).
This is an issue with the responsive design of the website and I would address this in further
development.
Figure 11 Screenshot of RSVP form text box at Samsung Galaxy S6 screen size.
2.6.5 Question 9 and 10: RSVP form
Question 9 and 10 were designed to evaluate whether the RSVP form captured all necessary
information and whether the form validation worked as expected (Figure 12 and Figure 13).
Five out of eight surveyed thought that there was no information missing (Figure 12). One
participant thought it may be useful to provide information on accessibility requirements, for
example, if a guest was in a wheelchair. As no additional preparation is required to make the venues

15. wheelchair accessible, I would not make changes to the RSVP form to address this. However, I would
consider including information on venue accessibility in the Wedding Details section.
Figure 12 Responses to Question 9
Figure 13 Responses to Question 10.
Two of the survey answers suggested that it should be possible to enter the names of additional
guests attending. I do think that this would be a useful addition to the website, but it would require
some javascript, as the number of names required would depend on the number of guests
attending. This should be addressed in further development. Another issue reported is that
attendance of multiple guests is all or nothing, i.e. it is not possible for some to attend and some not

16. to attend. Further development should address this by allowing the user to enter the attendance for
each named guest.
Question 10 asked users to try submitting the RSVP form and report any issues (Figure 13). Four
users reported that the form could be submitted without indicating attendance. As this is required
information, ideally, the RSVP form should require at least one radio button in each category to be
selected. To address this issue, javascript could be used, or alternatively the HTML5 “required”
attribute could be added to the radio buttons to validate the form.
Another issue reported is that invalid email addresses can be submitted as the form does not check
if the email address is of the correct format, i.e. whether it is of the form “something@name.abc”.
To address this issue, I could use javascript for validation. For example, the script from
http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validate_email could be included.
Alternatively, the html input tag could be changed to type “email” which automatically validates for
an email address of the form a@b.
2.6.6 Question 11 and 12: Ease of finding information
To check whether users could easily find specific information within the website, I asked them to
search for information on how to get to the church. As seen from question 11 and 12 (Figure 14),
none of the users had any difficulty finding the information and all thought it was easy to find. This
suggests that the website is easy to navigate and is organised in a sensible way. All users commented
that they had no problems finding the information.
(a)
(b)
Figure 14 (a) Responses to question 11 on a scale of 1=Could not find information to 5=Very easy to find information. (b)
Responses to question 12.

17. 2.6.7 Question 13: Other comments
I included an open question at the end of the survey to allow users to comment on any issues with
the website that were not addressed by other questions that I asked. The responses are given in
Figure 15.
There were several positive comments on the suitability of the website for wedding guests, and the
ease of navigation. This suggests that the site is generally fit for purpose and contains most of the
necessary information.
Figure 15 Responses to question 13.
One user commented that the header “Walshinho Wedding” should link to the website homepage. I
had not considered this in my design and will address it in further development.
Another user suggested that the image size should be consistent within the webpages. I would
consider resizing or replacing images in future versions of the website to improve the consistency.
There was a comment about the length of time it took to load the map on the travel page. As this is
an iframe linking to an external Google map, unfortunately, this issue cannot be easily addressed.
One solution would be to include a loading progress indicator in the iframe to indicate that the map
is loading. Another possibility would be to replace the map with a link to the map, or perhaps an
image of the map which links to the map.
One user commented on the consistency of the page headings and the links. The page titles were
not consistent with the link names with “Travel” having a page heading “Travel and Transportation”
and “Contact us” having the heading “Contact Information” (Figure 16). It would be better to make
the page headings consistent with the link names to avoid any confusion to website users.

18. Figure 16 Screenshot showing page heading for Contact us webpage
2.7 ALTERATIONS MADE AFTER EVALUATION
To address some of the issues from the survey, I made a few changes to my website. The main
changes are given below.
Increased line spacing: To reduce the amount of white space, I increased the line spacing within
paragraphs. This also makes it easier to read the text as it appears less squashed together.
Header links to homepage: I included a link to the homepage in the header text (Walshinho
Wedding) and in the heart images beside the header.
RSVP form:
- Added HTML5 validation to radio buttons – user can no longer submit form without
specifying attendance.
- Changed email input to type “email” to allow HTML5 validation that address is of form a@b.
- Made textarea responsive by changing from specifying number of columns in html to setting
a width of 95% in CSS stylesheet.
Consistency of page headings: I renamed the headings on the webpages to make them consistent
with the link names in the navigation bar.
2.8 OUTCOME OF TEST AND EVALUATION
2.8.1 Website performance
In terms of speed, the website generally performed well with page load times generally of about 0.5
s. The general recommendation is a page load time below 2-3 s, and most of the pages are below
this threshold. The only page that did not perform well was the Travel page which had a page load
time of 7 s. Unfortunately, as this is due to the use of iframes, there is no easy way to optimise the
page loading without removing the maps. However, the page could be improved by using a progress
bar within the iframes while loading. I would need to upload the website to a server to get a more
accurate view of the page load speed, but as the website is quite simple and minimalist, I would
expect that page loading would still be relatively quick.
From the results of the survey, the responses generally indicated that the design was well suited to
its purpose as a wedding website. No major issues were noted, although some minor changes to the
design were suggested. The colour scheme and content were deemed appropriate to the website
theme, and information was easy to find.

19. The survey responses indicated that while the colour scheme was generally suitable, improvements
could be made, particularly to blend the header colour with the rest of the background. Changes to
the images were also suggested to make their size consistent, and to better fill white space beside
the text. While the RSVP form content was generally deemed to be suitable, respondents asked for
further validation steps to be added for email addresses and attendance.
The survey results also indicated that improvements to the responsive design are necessary. It was
indicated that the navigation bar appears too squashed at tablet screen sizes, and the mobile menu
button appearance and position could be improved. In addition, the general appearance of the
mobile site could be improved by including the heart logos beside the header and including pictures
in the mobile site.
2.8.2 Website mobility
As the site was not uploaded online, mobility tests were limited to resizing the browser window and
using the Responsive Web Design Tester to simulate mobile and tablet devices.
From my tests using the Responsive Web Design Tester, the website generally performed well, with
the media queries working as expected. There were some issues with the responsiveness of the
RSVP form with the image overlapping the text boxes, and the text area being too large for mobile
screens. However, I was able to resolve these issues by adjusting my CSS code.
The survey results indicated that some improvements to the appearance of the website at smaller
screen sizes are necessary. The menu button for mobile sites may require some redesign to better fit
the website, and the appearance of the mobile website may need to be improved to make it more
visually appealing.
2.8.3 Recommendations for further development
In terms of evaluating the website further prior to development, the following points should be
addressed:
- Host website online to allow more extensive testing
o Allows more detailed and accurate speed tests using tools such as
http://www.webpagetest.org/ to test speed at multiple locations
o Can use different devices to check responsiveness rather than simulating devices in
a browser
- Carry out more detailed evaluation with a larger number of participants.
o Ensure all commonly used browsers are surveyed
o Survey across a range of devices, i.e. mobile, tablet, laptop
o Include questions on the age of the user and level of experience
Based on the evaluation and testing methods used in this report, further development should
address the following:
- Appearance and colour scheme:
o Review colour scheme of website to blend header colour with rest of page.
o Include heart logo in header for mobile site.
o Review font sizes used for headings in mobile and tablet sites – consider increasing
font size.
o Include images in mobile website to improve aesthetic appeal.
o Review fonts used within website. I used Brush Script MT for headings as this is a
web-safe font but it may be worth importing a more suitable script font to fit the

20. wedding theme using @font-face (http://www.w3schools.com/cssref/css3_pr_font-
face_rule.asp)
- Content text/images:
o Add more content and/or optimise image size to decrease the amount of white
space.
o Make image size consistent across webpages. Ensure that images within one
webpage are similar size.
o Resize images to minimise their size. Use smaller image versions for tablet and
mobile sites to reduce page loading times.
o Ensure that images used are open source or are properly cited on the website.
- Additional page content:
o Add information on accessibility of venues e.g. for wheelchair users.
o Add more personal images such as photos of the bride, groom, bridesmaid and best
man rather than using clipart.
- Navigation:
o For mobile website, review menu button style and position. Consider changing to a
hamburger menu as used in many mobile sites.
o Consider using a dropdown menu for the tablet site to avoid squashed text in
navigation bar.
o Change “Go to section” sidebar to fixed position for desktop site.
o Consider including in-page navigation (Go to section) links in the tablet and mobile
sites. Perhaps include in the main dropdown menu.
- RSVP form:
o If multiple guests are attending, allow each of their names to be entered. Would
require javascript to implement.
o For multiple guests, add attendance selection for each guest. For example, in a party
of 4 guests, there could be 2 attending and 2 not attending. This would require
javascript to implement since the number of guests will vary.
- Iframe loading:
o Improve the display of iframe maps on the travel page either by including a load
progress indicator with javascript or by replacing the iframe with an image linking to
Google maps.