FINAL PROJECT OF WEBSITE DESIGN AND DEVELOPMENT COMP 2681 DEPARTMENT OF COMPUTER SCIENCE THOMPSON RIVERS UNIVERSITY

Transcription

1

2 FINAL PROJECT OF WEBSITE DESIGN AND DEVELOPMENT COMP 2681 DEPARTMENT OF COMPUTER SCIENCE THOMPSON RIVERS UNIVERSITY

3 CASE STUDY PHOTOGRAPHY WEBSITE A PERSONAL PORTFOLIO WEBSITE DEVELOPMENT

4 BY EMMANUEL ALUKO DEPARTMENT OF COMPUTER SCIENCE THOMPSON RIVERS UNIVERSITY

5 ABSTRACT Creation of fully functional cross browser photography website that are compatible with all major devices have been one of the major challenges that most business owner in this niche face. This project demonstrated collaborative strategies and implement state of the art technology with a broad scope of aesthetic creativity to develop responsive photographic website with ease of accessibility, and also incorporate a user interface features such as modal, hover effect and many more.

6 OBJECTIVES To create modern and adaptive photography website that is responsive to major devices, ranges from smaller to larger screen as the viewport size changes. To create an interactive portfolio gallery that showcase the collection of recent and current photography shots. To create a search engine optimization friendly website to help increase the ranking of the affected pages. Implementation of css3 technology to achieve some complex features such as modal, gallery lightbox, tooltips, inline form validation with the aid of pseudo classes and elements.

7 SITE DOCUMENTATION SITE DESCRIPTION A modern corporate photography website for Bentley Zhane, that shows the collection of all work and projects long undertook by her over a long period of time in different aspect to include environmental shoots, landscape, and corporate shoots ABOUT THE COMPANY Bentley Photography is a corporate photography company that provides photography services such as personal shoot, studio shoot, corporate event coverage, engagement, wedding, and anniversary for individuals, celebrities and corporate organization. Bentley is renowned in taking epic pictures relatively scenic and landscape nature images. A seasoned photographer with robust portfolio of over 15 years in diverse photography concepts. TECHNOLOGY USED CSS3, Javascript, and HTML5

8 SITE FEATURES LAYOUTS The site is designed using combination of both fluid and fixed width layout system to achieve the best responsive features and with some media queries implementation. CODING Semantic coding structured validated using w3c online validator WIDTH 100% Full width is incorporated throughout the site GALLERY A simple css3 features are implemented to achieve state of the art modal techniques to showcase the corresponding images of the portfolio when called. IMAGE EFFECTS Hover and Filter effect ANIMATION Bouncing and Fade Effect were used to achieve some sleek features when mouse over FAVICON Branding tiny website logo icon PAGES

9 The site consists of 4 unique pages namely : home page, contact us, about us, portfolio. SITES COMPARISON SITE ONE Daniel Kennedy Photography The Likes about Daniel Kennedy Photography Well layered and structured images in grid with responsive capability features, the images are adaptive and changes as the viewport sizes varies. Interactive features such as modal effect was implemented making the item accessible easily by the users. The Dislikes Brevity of information, there is no introductory contents as regards the company information, this is vital to catch the attention of first visitor to the site to have brief understanding of what the company has to offer regardless. Items or photography has to be categorized, this feature is found wanton on the website, users have to be presented with options to the items or

10 products site owner offers, paving way to track the behavior of every products you have got to offer, and thus increase site traffic. The page design is not fully responsive and possesses cross browser flaws which might pose a slight difficulty in displaying the contents and images of the website correctly. SITE TWO Steffen Allen Photography The Likes about Steffen Allen Photography One page interactive features such as on scroll mechanism that enhances swift overview of the site gallery. The Dislikes Brevity of information, there is no introductory contents as regards the company information, this is vital to catch the attention of first visitor to the site to have brief understanding of what the company has to offer regardless. The front page lacks branding features such as logo, site must have a unique signature that users would associate and get accustomed with. Items or photography has to be categorized, this feature is found wanton on the website, users have to be presented with options to the items or products site owner offers, paving way to track the behavior of every products you have got to offer, and thus increase site traffic. The modal concept used is not fully detailed, I think, descriptive features such as figure caption and concise information about selected image

11 should have been enforced, this would help attract user s interest and increase traffic to the gallery. Every popped up images need to have social friendly button anchor such as facebook and twitter, with this, the visibility and exposure to the social network is a big bonus. SITE THREE Jeremy Cowart Photography The Likes about Jeremy Cowart Photography Short and brief landing page Panoramic portfolio layout The Dislikes It takes longer time for images to load.

12 SITE REFERENCES Downloadable Site reference 1. Textures.com for site textures and background 2. Google fonts is a google font site where unlimited fonts can be downloaded for free. 3. Pixabay is a place for free high quality images, house over 670,000 images available for free. Technical Book References CSS Reference Best Practices Guidelines for HTML & CSS Thomas A. Powel Design and Validation Reference

13 W3C Validation It is a world wide web consortium founded by Timothy Berners-Lee as an international community that develops open standards for the growth of the web development Jquery A repository of jquery scripts and JavaScript library W3school An online web tutorial website for expert and beginners.