Technology Plan for new 4SiteStudios.com
1 like1,196 views
A user can see various visual representations and information on the homepage of a website for a design studio called 4Site, including recent projects, services offered, a video, blog posts, tweets, and options to sign up for the newsletter or contact 4Site. Navigation menus allow users to access other internal pages for projects, services, products, and contact information. Interactive elements and forms allow users to learn more about specific topics or contact 4Site directly.
![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](https://image.slidesharecdn.com/4sitetechplan-130611150424-phpapp02/85/Technology-Plan-for-new-4SiteStudios-com-2-320.jpg)
![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](https://image.slidesharecdn.com/4sitetechplan-130611150424-phpapp02/85/Technology-Plan-for-new-4SiteStudios-com-3-320.jpg)
Technology Plan for new 4SiteStudios.com
- 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