Non-profit website
Project name
: Project STRENGTH
Website type
: Non-profit
Service type
: Redesign and migration
(concept to launch)
Development
period
: July - Sept. 2010
Maintenance
support
: to July 2012
Web address
: http://project-strength.com
Status
: Offline*
Pic. 1. home page of the WordPress website
Project STRENGTH is to raise awareness about the
poverty issues that the children of Philippines are
facing every day.
Client requirements
Redesign a professional-looking, easy-navigating,
search engine-friendly, content-managed website
with site management and maintenance facilities.
Stuffs provided
•
•
Old website URL and cPanel access info
A wire-frame layout (Pic. 10) and sample
websites
•
Blog files in word format
•
Youtube URL to download video files
•
66 high-resolution images
Pic. 2. home page of the old website
Digital Systems liked the objective of this non-registered non-profit organization, and
decided to support them developing their website on a voluntary basis. We re- designed
and developed the entire website including graphics using credit-free open source tools.
Note
Old website refer to the site, hosted at Angelfire (sponsored Ads) at http://strength-movie.angelfire.com
for free. Old cPanel refer to Angelfire cPanel.
WordPress website refer to newly redesigned website by us hosted at JustHost. Site was hosted
commercially for two years and currently offline. New cPanel refer to JustHost cPanel.
Old website analysis
Old website is non-structured and static, maintain non-standard navigation menu bar, color scheme,
typography, template, etc. No user interactivity or engagement site wide. Most of the menu items loads
externally hosted pages. Excessive sponsored Ads (Pic. 3).
Old cPanel analysis
Old cPanel is most backdated. Moreover, due to free account, all features are inaccessible (Pic. 4).
Pic. 4. Old cPanel
Old website page-by-page analysis
'Home' page
Pic. 3. sponsored Ads
Very simple design. A large-squire size image loads
in the Home page. Navigation menus are not
organized. No CSS file(s) to control HTML pages.
'About ProjectSTRENGTH' page
Menu item directly linked
with an externally hosted
video page and it opened in
the same window. Visitor may
influenced and go away. It is
recommendable to open the
external link in a new window.
Other way, it can be solved by
creating an internal page and
embed the code. It is always
better to host all contents
internally because page loads
faster.
Pic. 5. 'About Project-STRENGTH' page
'STRENGTH trailer'
page
Same problem. Menu item
directly linked to YouTube
page and it open in the same
window.
No user-friendly navigation.
Need to click browser 'back'
button to return to the 'Project
STRENGTH' site.
Visitor may want to stay with
YouTube channel.
Pic. 5. 'STRENGTH trailer' page
'About SOTH' page
Menu item directly linked the
external site and it open in the
same window. Possibility to
lose visitor.
Since, Project STRENGTH
refer the external site, it is OK
to link the external site
directly, however, it was better
to link it to be opened in a
new window.
Pic. 6. 'About SOTH' page
'Photo Album' page
page is not optimized for slow
or low bandwidth audience
and it hardly loaded 14 larger
images. 'STRENGTH trailer'
and 'About SOTH' menu items
disappeared. 'Contact Us'
menu text moved to the next
line due to fixed width
specified. Photo title text is
not readable.
Pic. 7. 'Photo Album' page (partially)
'Meet The Team' page
•
•
•
•
•
No navigation menu
bar
Incomplete page
Watermark color, font
size and text of the six
images do not
maintain a constant
ratio
Photo titles hardly
readable
All images are linked
externally with same
size images
Pic. 8. 'Meet The Team' page (partially)
'Contact Us' page
Repetitive information. No
physical address. No user
interactivity.
Pic. 9. 'Contact Us' page
Old website assessment report using automated tool
Key points
•
Website does not use any analytics software
•
Most images do not specify alternative text
•
Many pages have no defined headings, compromising SEO
•
All pages were found to use page titles appropriately
Page titles. All pages were found to use page titles appropriately
Inoffensive content. None of the pages tested will be blocked by filtering systems
URL format
•
The majority (75.0%) of web addresses (URLs) are less than ideal
•
75.0% of URLs include a file extension
Links
•
A large amount of links in this site could be defined better
•
5 links use duplicate text to point to different pages
Alternative text. The majority (71.0%) of images do not have alternative text
Images
•
No images have defined sizes
•
Non web-format images
•
Non explicitly sized images
Headings. A large number (50.0%) of pages do not use defined headings
Semantic HTML
•
Non-semantic HTML tags found
•
website were found to use presentational HTML elements
•
Pages uses tables layout content
Popularity. This website has experienced a slight decrease in popularity
Twitter sharing. No tweets about this website were found on Twitter
W3C compliance. No pages are W3C compliant. A total of 105 errors and 29 warnings
Printability. None of this website appears to be optimized for printing (using CSS)
Facebook page. This website do not have public Facebook pages
Facebook sharing. None of the pages have been shared on Facebook
Incoming links. No other pages were found linking to this website
Analytics. None of this website is using any analytics software
Meta tags
•
No pages include any metadata
•
Pages with no meta description
Feeds. No feeds were found on the 4 pages tested
Shared web hosting recommendations
Based on Client requirements, we found that WordPress would be the best solution for them. We
discussed with the Client and they agreed with us. We also informed them that Angelfire free hosting
plan do not support database facility which is mandatory for WordPress. As requested, we provide them
the information about two shared hosting service providers listed below.
Features
Just Host
AngelFire (NEON)
1 yr FREE
.com $12.95/yr
$4.95/mo for 2 yrs
$4.95/mo
none
$10
Disk space
unlimited
1 GB
Monthly bandwidth
unlimited
100 GB
Domain name
Subscription fee
Setup fee
Email space and accounts
unlimited
none
WordPress 1-click install
yes
blog builder tool
information as of August 2010
Table 1: comparison features and price
Client decided to go with JustHost shared hosting service for two years.
Drawback
Job was posted at Craigslist website in July 6,
2010. It was full-time Webmaster role and
unpaid Internship. First Client meeting was in
July 14, 2010.
Pic. 10. sample wire-frame layout
Portfolio work for this project
Graphics Design
Created content-specific six headers from the high-resolutions (3264x2448) images
Pic. 11. header image for 'home' page
Pic. 12. header image for 'About STRENGTH' page
Pic. 13. header image for 'About SOTH' page
Pic. 14. header image for 'Images of Hope' page
Pic. 15. header image for 'Meet the Team' page
Pic. 16. header image for 'Friends of STRENGTH' page
Pic. 17. unused header image
Created two variants of logos
Pic. 18. logo design
Pic. 19. logo design
Created a graphic for video splash image
Pic. 20. graphics design for the video-splash image
Created a graphic for splash-intro page
Pic. 21. graphics design for splash-intro page
Re-sized and optimized high-resolution images for thumbnails and larger view
Pic. 22. image manipulation
Pic. 23. image manipulation
Re-sized and optimized 66 watermark images and created & optimized two flash animation files
Pic. 24. Flash photo gallery (2.58MB)
Pic. 25. Flash photo gallery (2.17MB)
WordPress installation and integration
Installed WordPress and developed the site locally with following features:
Features integrated
Work performed
•
Pic. 26. top navigation menu bar
Created custom menus
•
Enhanced facility to load
content-specific header
images dynamically
•
Incorporated the tagline
•
Downloaded video files
from YouTube account
•
Converted, optimized and
integrated them in 'About
STRENGTH' page
Pic. 27. default header image
Pic. 28. brand slogan
Pic. 29. 'About STRENGTH' page
Created, optimized and integrated
flash photo album in to 'Images of
Hope' page
Pic. 30. 'Images of Hope' page
Pic. 31. light-box image effect
•
Re-sized and optimized
two sets of images for
thumbnails and larger
view
•
Enhanced the function to
open larger view image in
pop-up window
Pic. 32. interactive online contact form
•
Conducted coordinator to
know the email address to
be used in 'Contact Us'
page
•
Tested the form function
thoroughly
•
Hosted the site at JustHost
•
Performed cross-browsers
compatibility test in major
browsers
Pic. 33. new cPanel
Client reviewed the site and requested to make some minor changes. Time to time, we provided website
maintenance support. As per Client request, we also provided training and access to coordinator to post
blogs.
Communications with Client
We maintained effective communications frequently via email and over the phone.
Tools used
We used WordPress and other free tools to design, develop and maintain entire site.
Functionalities of the site
Core features
•
•
•
Pic. 34. WordPress website theme
•
Pages allows to manage non-blog content
easily
Allows to create, maintain, and update any
number of links
Theme features
• Cross-browsers compatible, valid
xhtml and css, 5 widget-ready areas,
2-column layout, widget-ready
footer and sidebar
• Drop-down categories menu
• Gravatars enabled in comments
• Threaded comments support
Allows visitors to leave comments
•
User registration system allows people to
register and maintain profiles, and leave
authenticated comments
•
Allows password-protected posts
•
Allows to convert plain ASCII into
typographically correct XHTML entities
and intelligent text formatting
•
Highly advanced user system allows up to
10 levels of users privileges with regard to
publishing, editing, etc.
Extended features
•
•
•
Pic. 35. module positions
•
Allows a custom header image or flash file
to be displayed site wide, randomly or on a
page and post
Allows to embed 2D animation
Anti-spam enabled contact form allows
visitors to send email message
Allows to open larger-size image in a popup window
Troubleshooting
Site was hacked in November 2011. As per Client request, we cured virus and restored entire
WordPress website following the guidelines of Just Host support team.
Pic. 36. Virus detection
Summaries of the work provided
•
complete website and cPanel analysis & report
•
redesign/redevelopment of WordPress website and integration
•
cleanup redundant and excessive HTML tags and inline CSS manually
•
Tweaked/modified HTML/CSS codes for WordPress theme and plugins
•
content migration from the old site to WordPress site
•
conversion/integration of word documents to WordPress site
•
on-site search engines optimization
•
logo and header design
•
image retouch, manipulation and optimization
•
photo gallery creation and integration
•
multimedia support service
•
cross-browsers compatibility test
•
website maintenance and support
•
training and access the staff to post blogs
Service renewal & recommendations
Although, Client should receive auto email notifications from JustHost, we conducted website owner
over the phone to inform about the Web Hosting renewal notice. As per discussion over the phone July
12, 2012, we provided reduce hosting price quote via email. We did ask her to pay for the domain name
and we will host the site in our server.
Client permit us to host the site online for portfolio demonstration purpose only.
Appreciations received
Client provided us performance-based online testimonial, farewell cards and recommendation letter.
Online Testimonial
Farewell Cards
Recommendation letter
* We got permission from the content owner to host the site online for portfolio demonstration purpose.
Our newly rebuilt website with improved look can be viewed at http://pstrength.digitalplus.ca. Here
is the screen shot of current 'home' page.
* For your convenience and comparison purpose, we hosted their old website (hosted Angelfire with
sponsored Ads) too in our Ads free server at http://pstrength.digitalplus.ca/oldsite