jldenning-blog-blog-blog - Tumblr blog

jldenning-blog-blog-blog · 10 years ago

Text

Section 8: Testing

In this section I will test the project for any errors, whether it’s usable and confirm that the artefact meets the needs of both the client and their users.

Usability Testing

After testing the website on multiple devices for usability I discovered that the mobile view was not completely usable, still required alot of work from the user and most of the content is cut off the screen. As shown below.

Compatibility Testing An initial requirement from the client was that the website would need to be cross browser compatible as well as responsive. I have provided some screenshots of what the website looks like in the different browsers below:

Google Chrome:

Firefox:

Internet Explorer:

As you can see from the screenshots above, the website is cross browser compatible and displays the same on every browser, including the drop shadows, text shadows and cornered buttons which aren’t always compatible on every browser. To make this achievable I have added extra lines in the CSS to cater for this, as shown below:

The example above is for the dropshadows on the top_bg div. The standard code is box-shadow but by adding -webkit and -moz infront of the code it makes it compatible for Firefox and Internet explorer.

Any errors or admission and correcting faults: Fixing mobile view: After discovering this issue when visiting the website on my mobile phone I have adjusted the mobile design within the media queries. It was initially too wide, it had a width of 620px so I have now changed this to 360px and adjusted the rest of the content to fit on to the screen perfectly. Example shown below.

Does the artefact meet the needs of the client and user? Reflecting on my scoping process (which can be viewed again here) I believe I have met the needs of the client and the user.

The client stated that they wanted: “A modern, responsive, user friendly website that allows supporters to keep up to date on events and milestones aswell as being able to donate easily.”

I believe this has been achieved by; creating a modern design, with animated clouds and custom fonts which are aesthetically pleasing, making the website responsive for the most common screen resolutions and also a mobile friendly design, a nice bold navigation with quick links above the main content to make the website user friendly and also a donation button at the top of the page to allow the users to donate quickly and easily.

Statement of what the users require/gain from this project: “Users of the website will be able to keep up to date with the charities previous and upcoming events aswell as being to donate quickly and easily.”

I believe this has also been achieved with the implementation of a content management system to allow the client to update their website with their events and milestones. Users will also be able to donate quickly and easily with the use of the donation button at the top of the website on every page for quick access.

#requireddocuments

0 notes

jldenning-blog-blog-blog · 10 years ago

Text

Section 7: Project Delivery (Monitoring Progress and Control)

For this section I will identify whether or not I am progressing the way I intended and if the client is happy with the project thus far.

Review the project with your client: I have been in constant communication with the client throughout the whole process and I have always confirmed my decisions with the client before processing, therefore the client is not left in the dark and is happy with the project. I have asked the client for some written feedback which is shown below.

Ensure the project is running to plan: When I initially started the project it was running to plan, I completed sections 1-6 on schedule. However, when it came to the development process I was way behind schedule after starting almost a month after I had planned to. This didn’t effect the deadline as I was confident in finishing on schedule. I originally planned to start developing the website in February and have the whole month to do it but other deadlines affected this so I began developing the website at the beginning of March, fortunately I could focus solely on the project therefore I got the work done faster than I would have done in February.

Final Gannt Chart:

View full size

Check my assumptions made earlier are still valid: The majority of my assumptions were valid although I did assume that my content management system would be sufficient for the client. This wasn’t the case and it was not suitable for such a big website, I then had to find another way to implement a content management system without affecting the time schedule. I decided to use CushyCMS which was very easy to implement and use for the client.

#requireddocuments

0 notes

jldenning-blog-blog-blog · 10 years ago

Text

Section 6 - Project Development

Learning Software or Equipment:

Responsive Design Research:

I have never made a website responsive to different screen resolutions and devices before so this will be a challenge but it is one that I welcome as I am interested in learning about responsive design as it will make the website more professional and accessible.

I have spent the day researching into responsive design and have found that media queries is the best way to go about it as it allows you to style the website based on different screen widths and devices. It's a time consuming process but the end result will be worth it. An example of the media query code is shown below:

Production Phase:

Website Design:

I have now started converting the initial paper design into Photoshop, my client initially requested animated stars in the header but we have agreed this may make the website a little dark and may change it to sunny sky/clouds in the future. Creating the design in Photoshop will give us an opportunity to assess this and make any amendments.

I have been in discussion with the client the past few days and we have decided this looks a little too dark. I had another idea (shown below) to brighten the page up but I feel this makes the website a little too complicated for the intended target audience. Therefore, I have moved on to another design idea that I had which is much more appropriate to the target audience as it's easier to navigate (Current progress of this design also shown below).

Previous idea progress:

For the idea above the different sections would fill the users entire screen, This is a modern technique but I felt it was a little too advanced and potentially confusing for the websites target audience. This would also be time consuming and could have a big effect on the projects schedule.

New idea design progress:

The new idea is based around simplicity and being user friendly. The clouds will be animated so they scroll across the screen to achieve a 'sky' appearance. The client has also suggested making the logo animated to 'bring it to life' so my initial suggestion is having the eyes follow the users cursor. The finer details like this will be developed once the website is designed and coded into HTML/CSS. note: The 'Frozen' image is a placeholder only and will be replaced for copyright reasons once completed.

I have now progressed on to the main content of the design. The design will be finished soon and sent to the client for their approval and feedback with any necessary amendments being made.

1 - Quick Links

2 - Main content:

3 - Final Design

The final design for the client is shown above. This contains place holder text and the footer isn't complete but will be made bigger with more information once developed, I have decided not to design this in to save time so I can progress on to coding the design. I will now discuss the design with the client for any final amendments.

Design into template:

Before I can start coding the design into a template I need to collect all the necessary images required to put the design together. This includes the logo, the clouds, icons and the background images for both the top section and footer. This can be achieved by cutting out the appropriate sections from the design and saving them as their own file. The rest will be designed using CSS. An example is shown below:

The images folder containing all the necessary images to convert the design into a template:

As you can see, there aren't many images, this will increase the loading time of the website as the rest of the design will be generated by CSS.

Basic HTML structure:

The image below shows the basic HTML template that you start off with, all the tags in the image are required. I have added two stylesheets which will be created in the future, main.css for the css of the website and media-queries.css which will contain the code to make the website responsive. I have also linked to a jquery file as I will need this in the future.

After a couple of hours I have managed to get the basic structure in order and have started developing the top of the website. I still need to add the custom font but the structure is there, I will continue where I left off tomorrow.

Day 2:

I have now implemented the font and finer details such as drop shadows. I have also added the top image and began to work on the quick links section. I am progressing well and feel like I can complete the template by the end of today. I have added some images of my progress so far below:

HTML:

CSS:

Day 2 - Progress:

The image above shows the website once coded. This will now be used to create the rest of the pages and progress. I have also implemented the CMS to test if it works and introduced it to the client, they were able to create the main content above. Before I progress on to the other pages I need to make the website responsive, including a mobile design.

Day 3 -

I have spent the day making the website responsive, it responds to the 5 most common screen resolutions including mobile. This is my first time making a website responsive but I am pleased with the results. I have shown some examples below with the different screen resolutions:

This stage is now complete, I will now progress on to the next stage...

Development of pages

Now that the main template has been coded I am able to use it for the other pages, there wont be many changes required as I want to keep the layout consistent throughout. However, I will be making the top section smaller and adding to the quick links section to present more pages to the user. I have also decided to create new folders for the different pages to present a better URL - for example; instead of the url being mattsmission.co.uk/about.html it will be mattsmission.co.uk/about, this will look better and also optimise search engine results.

I have now customised the template for the additional pages, I have contacted the client to ask whether he would like it to be displayed like the image below or if he would like it to have tabbed content.

The client is happy having the pages displayed like the image above. I have now progressed on to developing all the pages within the website, they will all have the same template so it’s just a case of duplicating the file and changing the navigation, titles, links and content. As mentioned previously I will be making folders for each page to make the links look better and improve the search engine results. An example of this is shown below.

All the links have now been created and you are able to navigate around the different pages within the website. For efficiency, I implemented the CMS on the first page that I developed (of which I then duplicated for the other pages) so the CMS would automatically be implemented on all the pages, this saves me going back to all the pages individually and adding the codes necessary to implement the CMS.

Implement CMS

Due to the approaching deadline I have decided to implement a CMS that is very easy to use, called CushyCMS, the client will be able to edit the websites content by visiting that site and login in. I decided the CMS I originally intended to use wasn't sufficient enough for such a big website. Therefore, CushyCMS will temporarily be used until I have the time to implement a more advanced system. I have already introduced the client to this and they find it very easy to use.

The CMS is now implemented on all of the websites pages. The client is able to alter the headings and content of every page. To make this possible, I just have to add the CMS class to the elements I want the client to manage. As shown below:

Once the files are uploaded to the websites server the client will be able to login to the CushyCMS website and alter their websites content. I have provided some screen grabs of what the user will see below.

Editing FAQ page:

As you can see above, the user is provided with a list of the pages they can edit. Once they click on the page they wish to edit they will be able to edit the pages content. This is very simple and requires no coding knowledge as it contains a WYSIWYG editor.

Show client for feedback/Make changes

The client is happy with the progress of the project and we have been in constant communication. Therefore, as I have been making changes as I have progressed, there are no changes requested from the client at this stage. I will instead move on to the next stage - showing the client the final artefact.

Show client for approval

Creating Website

Upload Website to server:

To begin uploading the website I first need to compress all of the files into one. This will make it quicker to upload. Another option is using FTP software to upload the files straight to the server. However, I will be compressing the files into a ZIP file and uploading it to the server manually.

Now the files are compressed into one I just need to login to my server and go to the file manager. From here I can upload the zip and extract the file. This will create all the folders and files necessary, like below:

The images above show me uploading the zip, extracting the zip and then all the files/folders present. There are two index pages, the html index is the new website and the php index is for the maintenance page which will be present until the client is ready to make the website live. I have renamed the html index to a different filename until the client is ready so visitors aren’t taken to the new website.

#requireddocuments

0 notes

jldenning-blog-blog-blog · 10 years ago

Text

Section 5 - Asset Production

Market Research:

In order to create an appropriate design and develop a website that competes with the market leaders as well as having all the necessary features, one must carry out research to understand the market and current trends to ensure the website is suitable for the market and is given the best chance of success.

RAY OF SUNSHINE - #1

I really like the Rays of Sunshine website design as it is easy on the eye and has a good use of colour. I also like how user friendly the website is; usability features, search bar and a donation button all together at the top of the page for easy access. The search and donate features seem quite common through all the websites I have reviewed, these features should definitely be included on my design for MattsMission.

I also like their navigation and how each link goes to a page with the option to view more pages on that topic (shown below), this avoids giving the user too many options (distractions?) initially and allows them to choose a topic easily and then have the option to look more into it if they desire.

Another feature that I like on this website is the social network icons on the side of the website scrolling down/up with the user (as shown below). This makes it quick and easy for the users to visit the charities social networks and encourages them to engage.

RAINBOW TRUST - #2

I like the use of white space on the Rainbow Trust's website, it makes it easy to read through the content but also has enough colour with the headings and buttons to keep the website interesting. They have also included a donate button and a search feature at the top of the page just like the rays of sunshine website.

A big image slider below the navigation is also included, similar to rays of sunshine, to keypoint the charities objectives and provide quick links to the user. This is also a common feature within the market.

The part of the website I like the most is the footer section. This is colourful and suits the name of their charity (rainbow) and also contains alot of useful information, almost summarising their website, as it contains website links, social information, contact details and legal documents.

Market Research Summary: After browsing and reviewing websites within the market it has given me broader knowledge of the features and trends which will prove useful when discussing ideas, designing a prototype and eventually developing the website.

Some features to include: - Donation button (top of page) - Search box (top of page) - Image slider to show charities work/objectives - Social network icons/features - Responsive website including mobile

Sourcing the media

Website Design Adobe Photoshop/Adobe Illustrator

Adobe Photoshop will mainly be used to design the website's templates and graphics as I have previous experience using this software and Photoshop has proved efficient in the past. Illustrator may be used on some of the graphics but wont be used more than Photoshop. Once I have created the final website design, individual sections will be cut out and made into individual images for the coding process.

Website Coding/Development Notepad++/Adobe Dreamweaver

Notepad++/Dreamweaver will be used to convert the design into code using HTML and CSS. I prefer Notepad++ to Dreamweaver as I have alot of experience using these languages and don't require the assistance from Dreamweaver. However, I may use Dreamweaver to make the process quicker as it provides code hints. The coding is done, in simple terms, by positioning the individual images together and styling each section using CSS to make the website look like the design created in Photoshop.

Once the template is coded I will begin to develop the website by linking the pages together and adding the content.

Website Management Custom Content Management System

I have a custom CMS coded for my use and I will be implementing this system into the website to enable the charity to easily update their content when required as this was a requirement from the client from the questionnaire and initial meeting.

Website Host My hosting server

To host the website and make it live for viewing I will be using my hosting server which I use for all my clients.

Initial Design

Below is a paper design of the layout sent to the client for feedback. This will then be produced on Photoshop taking the feedback onboard.

Approval and Feedback of Design

The client is happy with the initial design and I have asked for a comment to be added below.

#requireddocuments

0 notes

jldenning-blog-blog-blog · 10 years ago

Text

Section 4 - Project Management Methods and Tools

This post contains useful project management methods and tools that I will be using throughout this project.

Work Breakdown Structure

View WBS by clicking here

Gantt Chart

I have never created a gannt chart before so this was a new experience for me. I forgot to add milestones to the first gannt chart so I have produced an updated version with the milestones added. Unfortunately the template I am using limits the amount that I can change in the template so I have had to settle for just adding the milestones on the side, this still allows me to see the important events and what needs to be done to progress so I feel like it’s good enough.

Click here to view a bigger version

My final Gannt Chart can be viewed in Section 7.

Needs/SWOT analysis

Risk Assessment

#requireddocuments

0 notes

jldenning-blog-blog-blog · 11 years ago

Text

Section 3 - Proposal

General introduction summarising section 1 from the information given by your client:

Matts Mission Children’s Charity is all about making children’s smile’s glow and making a difference to the life’s of the children.They are in need of a new website as their current website is outdated. I have been asked to redesign and develop their website using a content management system so they can edit their websites content quickly and easily.

Statement of what the client wants:

A modern, responsive, user friendly website that allows supporters to keep up to date on events and milestones aswell as being able to donate easily.

Statement of what the users require/gain from this project:

Users of the website will be able to keep up to date with the charities previous and upcoming events aswell as being to donate quickly and easily.

Resources Required:

Adobe Photoshop

Adobe Illustrator

Adobe Dreamweaver

Notepad++

Content Management System

Images from previous events from client

Web server

#requireddocuments

0 notes

jldenning-blog-blog-blog · 11 years ago

Text

Section 2 - Scoping The Project

First meeting regarding the project:

A meeting was arranged with the client to discuss initial ideas for the project and to help me gain a real understanding of what the project involves. This also gave me an opportunity to find out about the clients previous multimedia experience and put forward some questions to help gain the clients requirements.

Clients previous multimedia experience:

My client has very limited multimedia experience regarding website design and development so is in need of my services to design and develop the website aswell as a content management system to make it easier for him to edit the websites content.

My client uses Facebook, Twitter and YouTube to engage with their supporters and this can be implemented within the website.

My client also owns a domain and has a server to host the website which is being provided by myself from the previous work carried out.

Understanding the breadth and depth of the project:

- Client will provide any images or videos they want embedded - Client will create the websites content using the CMS.

First Questionnaire:

Second Questionnaire:

Contract:

#requireddocuments

0 notes

jldenning-blog-blog-blog · 11 years ago

Text

Section 1 - Identifying a client and initial ideas

Initially my client was an online radio station in need of a website redesign and rebuild, of whom I had worked with in the past on various projects. However, this project failed to materialise and was retired. Therefore, I had to find a new client for this assignment. This wasn't a problem as I already had a client in need of my services.

A meeting was arranged with the client, MattsMission Children's Charity, to identify the brief requirements and discuss ideas. This also allowed me to grasp whether or not this would be a good project to undertake for my assignment.

Identify the client:

"Matts Mission Children's Charity is all about making children's smile's glow and making a difference to the life's of the children. Matts Mission's aim is to make sure that every child nominated has the best surprise trip or the best gift and to make sure wishes come true."

The main objective for the project is to make a modern website enabling the charities supporters to keep up to date with events and milestones as well as being able to donate to the great cause.

Client's needs and ideas:

- This project will require a modern website, with cross browser compatibility and responsive design, to enable the charities supporters to keep up to date with the charities events and milestones as well as being able to donate.

- User friendly and informative

Project Proposal:

#requireddocuments

0 notes

jldenning-blog-blog-blog · 11 years ago

Text

Expected Layout of Blog

This post outlines the expected layout of the blog.

Part 1- Identifying a client and initial needs

- Identify a client

- Identify the client’s needs/ideas

- Check this is suitable with Claire

- Fill in a client form and return to Claire

Part 2 - Scoping the Project

- Meeting the client

- Identifying clients previous multimedia experience

- Understanding the breadth and depth of the project

- Two Interviews:

-Developing a questionnaire (First Level)

-Developing a questionnaire (Second Level)

Part 3 - Proposal (Project Initiation)

- General introduction summarising section 1 from the information given by your client

- Statement of what the client wants

- Statement of what the users require/gain from this project

- Description of the resources required

Part 4 - Project Management Methods and Tools

- Work Breakdown Structure

- Gantt Charts

- Needs/SWOT analysis

- Risk Assessment

Part 5 - Asset Production

Selecting the correct media

- Sourcing the media - where will it come from?

- Interface design - storyboards, design drawings, flowcharts,

- Lots of visual examples

Part 6 - Project Development

- Learning software or equipment

- Production phase

- Creating the artefact

Part 7- Project Delivery

- Review the project with your client

- Ensure the project is running to plan

- Check your assumptions made earlier are still valid

Part 8 -Testing

- Usability Testing

- Any errors or admissions

- Correcting faults

- Does the artefact meet the needs of the client and user

Part 9- Signed off the project

- Agreeing the final project artefact with your client and ensuring it meets the needs of the client and the user

Part 10 - Final Completion

- Final written evaluation of the artefact and your project management experience including the interaction with your client - 1500 words

0 notes