Masonry Grid and Masonry Grid Items
Each topical and content type summary page uses jQuery Masonry to display ‘teaser’ nodes of available articles, tools, polls, quizzes and glossary terms. These nodes are sortable via a number of methods using the pull down menus above the items.
There are two basic designs required for these pages: the overall Masonry page design and the design of the individual Masonry node items. The desire is to be able to make each of these ‘brand-able’, primarily using different backgrounds, colors and/or fonts to match style elements where the microsite is to be integrated. The design selected will allow for this type of branding.
Masonry node items consist of five items or fields: A node title, content type, content subject, rating, and teaser image. Node titles are the titles of the article, tool, poll, quiz or glossary term. Content type is represented in the existing website as an icon (image file), but alternative design approaches can be proposed for this field. Content subjects are image files (in the existing website they have a three-sided CSS border), so they can be either text (as shown) or graphic icons. Ratings are limited in design options as the design of the stars used is selected from a set of available options. Finally, there is a unique teaser image associated with each node.
Designs for these masonry items should include all five fields, but designers are free to suggest alternative arrangements/ordering of the fields, layout approaches, Masonry item and field element sizes, etc. as part of their design approach. Again, these items should be capable of being ‘branded’ using different fonts, image files or color schemes.
If designers are unfamiliar with jQuery Masonry, the following are several example Masonry-based sites:
While Masonry-based pages feature ‘teasers’, actual site content is featured in a more standard web page format. There are five different ‘content types’ associated with AdviceSite:
Each of these content types should share the same design theme, with a few accommodations based on content and layout requirements.
Articles, Tools and Glossary items will be pretty much identical from a design perspective. Tool pages include <iframe> content that is not part of the design requirement, which is represented by the input fields and graph results of the financial calculator loaded within the page. Those pages do have slightly different layouts in order to accommodate the size of the financial tool being loaded into the frame.