Technology plan outlining how we will build the new 4SiteStudios.com on Drupal

1. Story Section Description Solution Questions
A user can see a visual representation of
recent projects on the homepage.
Homepage A user visiting the homepage can see a dynamic
grid of images representing recent featured 4Site
projects. Interspersed among the images is a brief
block of introductory/branding message text. When
the user hovers over an image, a tooltip with the
project title will display. When the user clicks on an
image, it will increase in size, and a description of
the project and a "learn more" link will be overlaid
on top of the image.
Build a view to create a nested series of
DIVs containing the images and related
metadata. Use the Masonry or Isotope
JS libraries to control layout.
A user can see a visual representation of
the services 4Site offers on the
homepage.
Homepage A user visiting the homepage can see images or
icons representing the services 4Site offers. One
image will be larger than the others, representing a
"featured" service. When the user hovers over an
image, the image will animate to illustrate some
aspect of that service. When the user clicks on the
image, they will be taken to a page offering more
information about that service.
Build content type for Services, with two
fields to contain the small and large
images (each image will be a sprite
containing both the static and animated
versions of the image). Create a view to
display the images, each linked to that
service's page.
A user can see a video with more
informaton about 4Site Studios.
Homepage A user visiting the image can see a static image
from 4Site's brand video, with a "play" icon
overlaid. When the user clicks the image, the
image will turn into an embedded video player and
play the brand video.
Use Vimeo embedded player.
A user can see a paged listing of recent
blog posts and other resources on the
homepage.
Homepage A user visiting the homepage can see summaries
of the three most recently posted blog posts or
resources. A pager will allow the user to navigate
to earlier items. Each summary will contain the title
of the resource a summary of the body, the post
date, the type of resource, a thumbnail image from
the post, and a thumbnail image of the post's
author.
Build a view to display a paged
summary of the most recently published
nodes in the blog post and resource
content types.
A user can see 4Site's most recent Tweet
on the homepage.
Homepage A user visiting the homepage can see the most
recent tweet from the @4SiteStudios account. At
the bottom of the tweet are "web intent" icons
allowing the user to reply, retweet or favoritethe
tweet. To the left of the tweet, a large Twitter icon
will link to the main @4SiteStudios Twitter page.
Use Twitter module.
A user can sign up for 4Site's email
newsletter.
Footer A user can see in the site footer a newsletter
signup form. The form should contain a text box for
the user's email address and a submit button.
Upon submitting the form, the entered email
address should be added to 4Site's Mailchimp list.
Embed Mailchimp form in a static block.
A user can navigate to 4Site's various
social media presences.
Footer A user can see in the site footer a series of icons
representing various social media networks. Upon
clicking an icon, the user should be taken to
4Site's presence on that network.
Embed social media icons and links in a
static block.
A user can search for content on the site. Footer A user can see in the site footer a magnifiying
glass or other "search" icon. Upon hovering over
or clicking the icon, a seach form and submit
button will appear. Upon submitting the form, the
user will see a search results page, with the query
being the data that was entered into the form.
Configure Drupal core search.
A user can navigate to other pages on the
site.
Footer A user can see in the site footer a menu containing
links to the top-level pages on the site, and follow
those links.
Core functionality.
User Stories
1

2. A user can see a "Hire Us For Your
Project" button on any page, that moves
down the homepage as the user scrolls.
Header A user can see a button labeled "Hire Us For Your
Project," that moves down the page as the user
scrolls. When the button is clicked, the user will be
taken to a "Hire Us" webform.
Set CSS for button to fixed positioning.
(Depending on where the button is in
the layout, we may need to add jQuery
to switch between fixed and absolute
positioning once the user scrolls
beyond a certain point.)
A user can send an email to 4Site. Header A user can click an eimail icon in the site header
and see a pop-up "contact us" form, containing
fields for name, email address, subject, body text,
and a CAPTCHA. When the user submits the form
(assuming it passes CAPTCHA), the contents of
the form will be emailed to [TBD]@4sitestudios.
com.
Write a small custom module to create
and process contact-us/hire-us form,
which will appear differently (different
fields displayed, etc.) depending on
context.
A user can navigate to other pages on the
site.
Header A user can see in the site header a menu
containing links to the top-level pages on the site,
and follow those links.
Core functionality.
A user can contact 4Site about a project. Services A user can see (at the bottom of the Services page
or by clicking a "hire us" link) a form containing text
fields for name, organization, email address, body
text, a dropdown for project budget, date fields for
desired start and end dates, and a submit button.
Upon successful form submission, the contents of
the form will be emailed to [TBD]@4sitestudios.
com.
Use custom module created for "contact
us" form.
No visible CAPTCHA in the wireframe -
how do we protect against unauthorized
form submissions? Mollom?
A user can see the navigation menu
persist as they scroll down any page on
the site. Misc
A user scrolling down any page on the site can
continue to see the page navigation as they scroll.
Add jQuery to switch menu div between
fixed and absolute positioning
depending on scroll position.
A user visiting the Our Work page can
see a display of client logos, or click a link
and see a text list of clients instead. Projects
A user visiting the Our Work page can see a
display of selected client logos. The logos
dynamically position themselves in order to
minimize vertical gaps. The user can click a link to
see a text list of all logos.
Create a views display to display logo
field of the client content type (for nodes
with "promote to front page" checked)
within a masonry grid, and a second
views display to create a text list of all
clients.
A user visiting the Our Work page can
see a gallery of project images.
Projects
A user visiting the Our Work page can see a
gallery of project images. The user can toggle
between all projects and only those with case
studies, or filter the gallery by project type or
cause. Upon being filtered, the images in the
gallery will dynamically reposition themselves so
as to minimize vertical gaps. The user can display
more projects by scrolling down. When the user
hovers over an image, an overlay will appear over
the image, displaying the title of the project, the
client name, and a brief description of the project.
When the user clicks on the image/overlay, a page
will display with more information about the
project.
Create a view to display project images
within divs, with project title, client
name, description and more link
rendered in a div that is hidden until
revealed upon mouseover. Add
exposed filters for projects with case
studies, project type, and cause. Add
Masonry JS w/ infinite scroll to control
layout.
If some of the images are really
thumbnails for videos, how does the
user play the video? The onClick
behavior will display the overlay.
A user can see a project detail page.
Projects
A user clicking a "more" link on the Our Work page
can see a page with details about the selected
project. The page will include a gallery of images
from the project, the title of the project, the client
logo, a brief client testimonial, and three blocks of
text, each with a thumbnail image: The Challenge,
Our Solution, and The Results.
Theme project node page using Control
Display, template files, alter hooks, or
preprocess functions, depending on
requirements of graphic design.
User Stories
2

3. A user can see a Products page and
learn more about Hub and Dub.
Products
A user visiting the Products page can see a tabbed
listing of products (currently Hub and Dub).
Clicking a product in the tab will cause the page
below to shift to display the content for the
selected product. Below the menu tabs is
displayed an image and description for the
selected product, followed by a list of features. For
each feature, the feature name, a brief description,
and an icon or image are displayed.
Create a view to display all nodes of the
product/service content type that have
"product" selected, with only the
product selected in the menu tabs
displayed.
A user visiting the Products page can sign
up to learn more about Hub.
Products A user visiting the Products page can see a form
containing fields for name, organization, email
address, and phone number, and a submit button.
Upon successfully submitting the form, the
contents of the form will be emailed to [TBA]
@4sitestudios.com.
Use custom module created for "contact
us" form. Display through a static block
attached to the bottom of the content
area.
Should we put this into a database as
well? Can we automatically put this into
Salesforce?
A user can see a "What we Do" page and
learn more about the services 4Site
provides.
Services A user visiting the "What We Do" page can see a
series of service icons. Clicking an icon will cause
the page below to shift to show content for the
selected service. Below the icons is displayed an
image and description for the selected service,
followed by a list of capabilities. For each
capability, the capability name, a brief description,
and an icon or image are displayed.
Create a view to display all nodes of the
product/service content type that have
"service" selected, with only the service
selected in the menu tabs displayed.
A user can see a "Who We Are" page
with information about the company and
its employees.
Who We Are A user visiting the Who We Are page can see
introductory text, an embedded brand video, an
animaged GIF of the 4Site logo, text about 4Site, a
graphical display of 4Site employees with an
image and links to their social media profiles, a
graphic describing our process, and text and
graphics describing our community contributions.
Create basic page with introtuctory text,
brand video, logo GIF, and body text in
body. Create View to display staff listing
and attach block below main content.
Create static blocks to display Process
and Giving Back content and attach
below staff listing block.
A user can see an "Our Insights" page
with summaries of recently posted
insights (blog entries, white papers, case
studies, and training videos).
Insights
A user visiting the Our Insights page can see a
large image preview text and author thumbnail of a
featured insight, followed by an "infinite scroll"
display of previews of all insights. Each preview
includes an image, title, summary, post date,
insight type, and author thumbnail. The display is
filterable by insight type and topic.
Create a view to display all nodes of the
blog entry and resource content types,
in reverse chronological order, with
exposed filters for resource type and
topic. Create a second views display,
attached to the header of the first view,
to show the single most recently posted
blog entry/resource with "promote to
front page" set.
A user can read an insight, post a
comment, or share it to social media. Insights
A user visiting an insight page can see a large
image related to the post, the post title, post date,
insight type, author thumbnail, summary, post text
with embedded images, social media icons, and
an embedded Disqus comment block.
Create custom page templates for each
content type. Create custom theme
function to display social share icons.
User Stories
3

4. Content Type and Fields Field Type Widget Required
Basic page
Title Node module element
Body Long text and summary Text area with summary
Attachment File File
Blog Entry
Title Node module element
Media Fieldset
> Image Image Media file selector
> Video File Media file selector
> Caption Long text Textarea
Body w/ Summary Long text and summary Text area with summary
Attachment File File
Additional Information (Link) Link Link
Related Content Entity Reference Autocomplete
Topic Term Reference Select list
Service Term Reference Select list
Project
Project Name Node module element
Short Description Long text Textarea
Client Testimonial Long text Textarea
Challenge Long text Textarea
Challenge Thumbnail Image Media file selector
Our Solution Long text Textarea
Solution Thumbnail Image Media file selector
The Results Long text Textarea
Results Thumbnail Image Media file selector
Topic Term Reference Select list
Service Term Reference Select list
Client Term Reference Autocomplete
Cause Term Reference Select list
Client
Client Name Node module element
Client Logo Image Media file selector
Cause Term Reference Select list
Service/Product
Service Name Node module element
Product/Service? List (text) Select list
Product/Service Icon/Image Image Media file selector
Content Types
4

5. Description Long text Textarea
Features/Capabilities Field Group (field_group_multiple?)
> Feature/Capability Title Text Text field
> Feature/Capability Description Long text Textarea
> Feature/Capability Image Image Media file selector
Resource
Title Node module element
Body Long text and summary Text area with summary
Attachment File File
Media Fieldset
> Image Image Media file selector
> Video File Media file selector
> Caption Long text Textarea
Resource Type Term Reference Select list
Topic Term Reference Select list
Service Term Reference Select list
Client Term Reference Autocomplete
Cause Term Reference Select list
Require Registration Before
Viewing? Boolean Checkbox
Bio
Name Node module element
Title Text Text field
Bio Long text Textarea
Fun Fact Long text Textarea
Photo Image Media file selector
Twitter Link Link
LinkedIn Link Link
Service Term Reference Select list
Webform
Title
Body
Content Types
5

6. Vocabulary Name Description Example Terms Additional Fields Notes
Topic Shared fixed vocabulary across all blog posts,
resources, and services.
NTEN Conference, DrupalCon 2013, Content As Media Webinar
Series
Services Relates a piece of content to a specific department
or service that was delivered. Services will have a
two-level hierarchy, with top level terms
representing our divisions (Strategy, Video,
Design, Development, Support), and second level
terms representing the services offered within
each division.
Design
- Branding/Logos
- Website Design
- Mobile App Design
- Infographics/Visual Content
- Print Collateral
Development
- Website Development
- Mobile Development
- Video Applications
- CRM Integration
Strategy
- Content Strategy
- User Experience
- Management and Optimization
- Analytics and Reporting
Support
Video
- Commercials
- Edutainment
- Animation
- Event Videography
- Grassroots Video
Image: Small Image (sprite with both static and
animated version)
Image: Large Image (sprite with both static and
animated version)
Client Tagging vocabulary for clients. NetCentric Campaigns
National Building Museum
Say Yes to Education
Image: Client logo
Cause Description of the type or cause we were working
for.
Advocacy
Science and Technology
Resource Type Describes the type of resource White Paper
Case Study
Tutorial Video
Blog Post
Taxonomy
6

7. Module Name Used For Version Requirements/Dependencies Download Notes
Masonry
Homepage,
Projects
Views Infinite
Scroll Projects, Insights
Twitter 7.x-5.8 OAuth
OAuth 7.x-3.1
Library Name Used For Version Requirements/Dependencies Download Notes
Masonry or
Isotope
Homepage,
Projects http://masonry.desandro.com/jquery.masonry.min.js
Custom Module
Name
Used For Requirements/Dependencies Download Notes
4site_contact
contact-us form,
hire-us form
Modules to
Remove
Download Notes
Activity Stream
Advanced Help
Flexslider
Flippy
Fullcalendar
Geocoder
Geofield
Geophp
Mollom
Nice Menus
Nodequeue
Print
Profile2
ReCAPTCHA
Soundcloud Filter
Splashify
Modules
7