Website Design Requirements for <insert blog name here> (___)
Document Version: 1.00 2012-04-19
Prepared by:Joel Zaslofsky
Revision List
Ver. # / Date / Author / Description / Distribution1.0 / 04/13/2012 / Joel Zaslofsky / Initial Version / N/A
TABLE OF CONTENTS
1EXECUTIVE SUMMARY
1.1Project Identification
2PROJECT DESCRIPTION
2.1Purpose
2.2Inspiration Websites for Design
3ASSUMPTIONS & DEPENDENCIES
3.1Assumptions
3.2Mock Ups and Wire Frames
4REQUIREMENTS
4.1Header
4.2Navigation Bar
4.3Footer
4.4Color Scheme, Heading Tags and Font Size and CSS
4.5Logo
4.6Comments
4.7Displaying Posts on Home Page
4.8Interaction with Headway Theme
4.8.1.1Plug Ins
4.8.1.2Sidebar and Widgets
4.9Landing Pages
4.10Other
4.11Viewing the Website on Mobile Devices (i.e. Smart Phones and Tablets)
4.12Graphic Creation for Blog Outposts
4.13Non – Functional Requirements
4.13.1Business Continuity
4.13.2Load Time of Website
4.13.3Testing
4.13.4Mock Up
4.13.5Moving Files from Domains
4.13.6RSS
4.13.7Scalability
1EXECUTIVE SUMMARY
1.1Project Identification
Project Name / <insert blog name here> (___) Website DesignProject Start Date / 2012/05/01
Project Manager / Joel Zaslofsky
Project End Date / 2012/05/15
2PROJECT DESCRIPTION
2.1Purpose
- Joel Zaslofsky has a current blog at Enlightened Resource Management (ERM) that is going nowhere fast. As a result a relaunch of the blog with a new domain name, new tag line, and new focus (strictly on personal finance and personal organization). Some of the structure of ERM will be borrowed like old posts, pages, contact forms, widgets, plug ins and other aspects. The new website, <insert name and url here> needs to be designed from the ground up while utilizing the infrastructure in place from ERM.
- The primary goal is a design that encourages people to subscribe to an email newsletter through multiple funnels.
- Secondary goals include:
- To make as much information and content visible above the fold while keeping high usability.
- To make the web page easily readable by people with poor eyesight or reading on a screen less than 10 inches wide (e.g. iPad, netbook, smart phone or other portable devices)
- The redesign will take place within the framework of Wordpress and the premium theme Headway Themes for easy tweaking and modification at a later date.A big focus is on the ability to manage the content of the site after the redesign with minimal technical knowledge.
- To have as much of the design and function occur within the existing Wordpress plugins used on ERM currently. A list of plug ins is provided in the Requirements section
2.2Inspiration Websites for Design
- The following websites below were some of the main inspiration for the redesign. Whether it was general aesthetic, navigation, widget usage, forms or general layout these are the favorites of the blogs I follow. This is mentioned not to replicate exactly what these websites look and “feel” like but to help guide when the requirements in the sections below are unclear. The expectation is that the website designer does not make assumptions about what I would like but rather asks questions and verifies major design decisions with me.
Website / URL
Nerd Fitness /
Smart Passive Income /
Live Your Legend /
Friends of Hennepin County Library /
3ASSUMPTIONS & DEPENDENCIES
3.1Assumptions
Description of Assumption & Context / Impact if Not True / Recommended Action /Resolution / Comments
All Wordpress Plugins currently in use will still function properly after the redesign / Website will not look or function as desired and will need to be reworked
The design will not incorporate no Adobe Flash / Website will not be accessible on Apple products
The designer has a strong ability to reverse engineer the look and feel of components of other blogs referred in this document for various requirements / Website will not look or function as desired and will need to be reworked
The designer must understand about direct response websites and auto responders. / A primary design consideration of getting people to opt in to an email newsletter will be at risk
The designer has previous experience creating headers and working with the Headway theme for Wordpress / The business will not be awarded to the designer
Upon relaunch of the blog, the designer will remain available for two weeks for minor tweaks of up to an hour of total time spent at no additional cost / The business will not be awarded to the designer
The designer will provide references of previous websites designed with the Headway theme / The business will not be awarded to the designer
The designer has experience creating responsive websites. By this it’s meant the layout and/or content responds or adapts based on the size of screen the user is consuming it on and the type of device (monitor, tablet, smart phone, etc). The expectation is the designer knows what they are doing with the code to make this happen somewhat easily. / The business may be awarded to a designer with more experience tweaking code for responsive websites.
3.2Mock Ups and Wire Frames
4REQUIREMENTS
4.1Header
Data Element / Purpose / FunctionalityLogo / Logo is displayed on the left and looks to be integrated into the header
Header / Main header for the site with the tag line embedded
Variable / A variable section to the right of the header should allow for whatever needs to be there at any point in time (e.g., email subscription sign up, social media icons, search bar, “tell a friend”, etc)
ID / Requirement
HEAD1 / A header that is no taller than 120px and no wider than 600px will be created from scratch
HEAD2 / Two versions of the header will be created. One of them with have the text “with Joel Zaslofsky” and the other one won’t.
HEAD3 / The tag line of <insert here> will be incorporated into the header
HEAD4 / Left clicking on the logo or header of the page will direct the user to the home page.
HEAD5 / The logo should not be wider than 125px
HEAD6 / Custom social media icons in a horizontal row using the color scheme of the overall design will display to the right of the header. These include icons and links when clicking on the icons to:
- Facebook, Twitter, Google+, YouTube and RSS should display with links to my profiles/pages for each website
4.2Navigation Bar
.
Data Element / Purpose / FunctionalityHome / Main domain page
Start Here / For first time visitors or people who want a guided walkthrough of the site
About / Displays a menu with an “About Me” page and a “My Story” page
Resources / General purpose page for links to products I like, resources people should have and other text based and picture based links.
Share Your Story / A page with a little text and primarily for a form for someone to submit their story about personal finance or personal organization
Contact Me / A form for someone to contact me via email. Will also contact options to contact me via social media.
ID / Requirement
NAV1 / Each element on the navigation bar has to be enabled to have a menu dynamically display when hovering over it
NAV2 / When hovering over a section of the nav bar that isn’t the current page being viewed prominently change the view of it in a cool way (e.g., the background color changes, there is an underline under the text, etc).
NAV3 / When viewing a page displayed in the nav bar highlight it as the one currently being viewed by making it display differently than the rest
NAV4 / The font type and size needs to be small enough to allow for up to 8 sections on the nav bar within a 625px width
NAV5 / To the right of the nav bar will be a user defined section of 350px in width. This will be used to display links to subscribe to blog posts via email and RSS like on The Blog of Tim Ferriss and Smart Passive Income
Examples:
4.3Footer
.
Data Element of Bar at Bottom / Purpose / FunctionalityBack to Top / Navigation back to the top of the current web page
Home / Navigation to home page
Disclaimer / Navigation to Disclaimer page
Contact Me / Navigation to the Contact Me page. Same navigation as Contact Me page in header
Commenting Policy / Description of the rules and policy around posting comments.
Headway Affiliate Link / This is on the far bottom left of the footer. It will contain the url for the Headway Themes Affiliate Program.
Hosted By Bluehost / Have a separate place from the rest of the links for a Bluehost affiliate link like at
ID / Requirement
FOOT1 / The very bottom of the footer will have links to the data elements listed above.
FOOT2 / The footer must be configured to be widget compatible for future deployment of widgets in this section
FOOT3 / Above the links at the bottom should have four sections. This should be compact from a height perspective.
1)An About Mesection at the far right with similar information contained in the About Me widget in the sidebar.
2)An email subscription form in the middle right.
3)A “What Bugs You?” section in the middle left inspired by This can be seen on the home page at and the email link labeled “Click here to report a bug!” should send an email to joel@<insertblognamehere>.com
4)A “Connect with Me” section with social media icons on the left.
Note: Rough inspiration for this can be found at and but I want to make sure this is compact.
FOOT4 / The footer of every page and sub-page will be the same.
4.4Color Scheme, Heading Tags and Font Size and CSS
I am open to a consultation about the color scheme and how it would fit in with the logo and header. I am not married to it so if there is a better one you propose let’s discuss.
Color Scheme:
Color / Purpose / Hex Triplet / RGB / HSVComplimentary Color Scheme
White Smoke / Background, Anchor / F9F9F9 / 249, 249, 249 / 0, 0, 97.6
Picton Blue / Primary, neutral / 4DA7D0 / 77, 167, 208 / 198.8, 63, 81.6
Picton Blue (Comp) / Alternative to primary, support / 4D7BD0 / 77, 123, 208 / 218.9, 63, 81.6
Red Damask / Hot, Saturated, Attention Grabber / D0764D / 208, 118, 77 / 18.8, 63, 81.6
Black / Text / 0 / 0, 0, 0 / 0, 0, 0
ID / Requirement
CSS1 / An export in .csv, or .xls format of all CSS element configurations must be provided (e.g. font, dimensions, hyperlink treatment, etc.).
Note: A template is embedded but if you want to use something else that’s fine.
CSS2 / The designer must use comments in the CSS stylesheet so that the user can easily follow which section of the CSS applies to which functional area of the website
CSS3 / A CSS reset like the one described here ( must be used
CSS4 / When block quotes are used in the body of a page or post they should be displayed stylistically different than the rest of the text on the page.
CSS5 / The following elements should have these CSS properties:
Element Name / Color (Hex) / Font-Size / Font-Style / Font-Family / Text-Decoration / Line-Height
H1 / 2.0em / Normal
H2 / 1.6em / Bold
H3 / 1.3em / Normal
H4 / 1.1em / Normal
H5 / 0.8em / Normal
H6 / 0.65em / Italics
P(aragraph) / 1.0em / Normal / Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Trebuchet MS, Verdana
Body / 1.1
Background
a:link / D0764D / none;border-bottom:1px dotted $color;
a:visited / 4DA7D0
a:active / D0764D / Underline
a:hover / 4DA7D0 / 110% / Underline
4.5Logo
ID / RequirementLOGO1 / Multiple draft versions of a logo will be created from scratch
LOGO2 / At least one of the draft versions of the logo should have just the acronym of the website with a shape around it and another should be graphical in nature
4.6Comments
The bulk of the requirements and inspiration for the comments comes from Smart Passive Income. When in doubt refer to that example link and make the comments here display and function in an almost identical way except when the requirements or wireframe call for something slightly different.
ID / RequirementCOM1 / Display a thin box around each comment separating it from the others
COM2 / The picture or Gravatar of the person commenting should be displayed in the upper left of the comment box with 45x45 dimensions
COM3 / Each reply up to 6 within a single comment thread should indent 22 pixels to the right of the one above it
COM4 / The fields for input of a comment include:
1)Name (required)
2)Email (required)
3)Website (optional)
This comment box is displayed below the last current comment.
COM5 / The default size of the box where the comments are typed should be 350 x 350 px
COM6 / When hovering over the Submit button the text should change color to one in my color theme
COM7 / Comments made by the administrator of the site should have a different color background than everyone else (taken from the overall color theme of the site)
COM8 / Comments after the initial one should have a different color background than the preceding or following ones
COM9 / Create the ability to subscribe to comments via RSS
COM10 / Display trackbacks concisely below every other element of the commenting section like at
COM11 / If the number of comments on a post is zero display the text as “Dare to comment first?”
COM12 / There will be a thin dotted line separating the end of a post from the start of the comments section
4.7Displaying Posts on Home Page
ID / RequirementPOST1 / Display post divider on home page between posts like at
POST2 / When listing posts on the home page highlight the current one as described at
POST3 / For each post listed on the home page show the follow elements. Each element should have a visible divider separating it from the others:
- Post title (top, left aligned), H1 and clickable (but with no underline under the link)
- On the line below the post title:
- Posted By (below post title)
- Below the Posted By
- The featured picture of the post
- To the right of the featured image of the post
- Designer discretion for how much of the start of the post displays here.
- Below the post text to the right of the featured image
- Number of Comments (just display the number with the word comments after it like “23 comments”). If the number of comments on a post is zero display the text as “Dare to comment first?” Clickable to be taken right to the first comment on the post.
- A link that says “Click to Continue...”
POST4 / A “Feature Box” that I can change on the back end in Wordpress Admin should display above the first post and below the navigation bar (like
4.8Interaction with Headway Theme
ID / RequirementHED1 / CSS, PHP or database work should not adversely interfere with the functionality of Headway v3.12.
4.8.1.1Plug Ins
ID / RequirementPLU1 /
- Wordpress Plug Ins already in use should not be adversely affected by the redesign (unless there is a known conflict between Headway and the plug in). As of 04/11/2012 this includes:
- Akismet
- Align RSS Images
- AWeber Web Forms
- Blubrry PowerPress
- Broken Link Checker
- Clicky for WordPress
- Comment Redirect by Yoast
- Digg Digg
- Exclude Pages from Navigation
- Fast Secure Contact Form
- FD Feedburner Plugin
- Google Analytics for WordPress
- Google XML Sitemaps
- Maintenance Mode
- OptinSkin
- Outbound Links
- Pretty Link Lite
- Redirection
- RSS Footer
- Secure WordPress
- ServerBuddy
- Social Sharing Toolkit
- SPI OptinSkin Package
- Subscribe To Comments
- ViperProof
- ViperRep
- W3 Total Cache
- WordPress Database Backup
- WordPress Editorial Calendar
- WordPress SEO
- WP-Optimize
- WP Smush.it
- WP Super Cache
- WPtouch
4.8.1.2Sidebar and Widgets
ID / RequirementSIDWID1 /
- Using the Wordpress text widget, create a sidebar widget where I can hand select the Most Popular posts, Host Posts and Best Resources. The template can be found at Smart Passive Income.
SIDWID2 /
- About Me
- Picture of me and text which is an abbreviated version of the information in my About page
- A button in the bottom right linking to my About Me page labeled “Explore More.”
4.9Landing Pages
There will be a series of landing pages that shouldn’t display the normal header, navigation bar, footer or sidebar. The design should allow for landing pages like this (through Headway if possible).
ID / RequirementLND1 / A thin header with just the name of the website will display at the top. When clicking the name of the website this will take you back to the home page.
LND2 / The width of the landing page will be the same as the main column in other parts of the site (625px)
4.10Other
ID / RequirementOTH1 / Incorporate a subtle place on the home page and other pages like the “FONT SIZE TOO
SMALL FOR YOU?Click Here for Options” on the left sidebar at Joel will create a page like with instructions.
OTH2 / Have small and large versions of social media icons available in the theme so that they can be called upon on the back end to be placed in future portions of the website. Icons for the following websites should be selected:
1)Facebook
2)Twitter
3)Google+
4)LinkedIn
5)YouTube
6)RSS
7)StumbleUpon
For ideas go to and go to the various links on the page.
OTH3 / The design must import seamlessly into Windows Live Writer 2011. If it does not the designer will assist in troubleshooting to make sure Windows Live Writer 2011 can be used for creating blog posts.
4.11Viewing the Website on Mobile Devices (i.e. Smart Phones and Tablets)
ID / RequirementMOBILE1 / An alternate style sheet should be created and loaded for tablet devices
MOBILE2 / An alternate style sheet should be created and loaded for smart phone devices
4.12Graphic Creation for Blog Outposts
ID / RequirementOUTPOST1 / Create a compelling Cover image for the Facebook fan page and Google+ business/fan page within the image dimension restrictions of the sites
OUTPOST2 / Create a separate header for YouTube (example: with engaging images, consistent branding from the blog and links to important content back on the blog
4.13Non – Functional Requirements
4.13.1Business Continuity
ID / RequirementBCM1 / A backup of the design and functionality of the website will be performed before the redesign is started. Reverting back to the design prior to work will be able to be completed in a manner of minutes if necessary.
4.13.2Load Time of Website
ID / RequirementPRV1 / The redesign will factor in the load time of the website and attempt to optimize it for pictures, links to media on other sides (i.e. embedded YouTube videos) and other content.
4.13.3Testing
ID / RequirementTST1 / A test environment replica of Wordpress and all theme, widget and data elements must be available the vast majority of the day
4.13.4Mock Up
ID / RequirementMOC1 / Before any work is done a functional mock up on a non-production server must be available to log into and play with
MOC2 / With each version or set of revisions done a functional mock up on a non-production server must be available to log into and play with
4.13.5Moving Files from Domains
ID / RequirementMOV1 / Key files from Enlightened Resource Management will need to be moved to a new domain. By this it’s meant the designer will be responsible for taking key source files from and moving the equivalent files to ______without the use of a Wordpress plugin like BackUpBuddy (e.g., with FTP).
4.13.6RSS
ID / RequirementRSS1 / The full contents of a post need to display in an RSS reader based on settings within Wordpress
RSS2 / An excerpt of a post needs to display in an RSS reader based on settings within Wordpress
RSS3 / Any embedded media (pictures, video, etc) must be able to be seen in the RSS reader with a “pop out” option for video in case someone can’t see it due to network, web browser, plug in or other potential conflicts or restrictions
RSS4 / When migrating existing posts from Enlightened Resource Management to new site it can't trigger RSS feeds to think that the old articles are new ones.
4.13.7Scalability
ID / RequirementSCL1 / The design will apply automatically when new pages or posts are made. Note: A premium is place on ease of maintenance of the site for the owner after design is done.