Your agency has made the decision to allow Spark Logix Studios to develop your client’s web presence. If your group is providing mockup artwork to use, this will serve as your guide in understanding best practices for design preparation for development with Spark.
Complete & Customized Framework
Spark Logix Studios has spent years creating and is constantly refining Respondo, our WordPress Framework. This Framework is the base of our web design projects. It’s been thoroughly tested, is fully responsive and infinitely expandable. If you have a design preference, the framework will modify (by design) your requested needs.
Be bold in your design requests, use high quality images and provide detailed information if you know exactly what you need. We take mobile and other devices into mind when developing every website (it’s a high priority for us). Many of the guidelines here are to not only help with better user experience but also device mobility.
Default Grid System
This scaffolding takes its cues from Twitter Bootstrap. The default Bootstrap grid system utilizes 12 columns. The grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. We’ve also added an additional 5 column option and the ability to add columns within columns.
The Respondo Framework by Spark Logix Studios supports a handful of media queries to help make your projects adaptive on different devices and screen resolutions. When creating a design please take note of the 1170px standard width (unless using a full width layout). Please take note:
There are a few standard elements throughout the website that you’ll need to specify (these include the header, body and footer). These elements within our framework respond to devices (pre-planned) and are built in a way to allow great user experience. You can showcase exactly what you require, here you’ll find a guideline. We’re also open to custom modifications in order to specify exact design needs.
PreHeader: (Menu Right – Content Left) Header: Plain Text Menu (Logo Left – Menu Right)
PreHeader: (Menu Right – Content Left) Header: Plain Text Menu (Logo Right – Menu Left)
Full Width Menu – Logo Left Aligned (no PreHeader)
Basic Button Menu (Logo Left – Menu Right)
Plain Text Menu (Logo Right – Menu Left) + Call to Action
Full Width Header Menu Right Aligned – Logo Right Aligned – eCommerce Cart in Header, Search Box Left Justified in Header
Simple Mobile Layouts (Header)
These layouts are automatic, they adjust as the screen size changes (from desktop to tablet to mobile). Knowing which colors you’d like for these elements is very useful.
Mobile Header with Call to Action
Mobile Header + PreHeader
PreFooter: 1/4 – 1/4 – 1/2 (Nearly all content requested within each column is just fine) – Footer: Details Left – Menu Right
3 Column PreFooter (no footer)
All PreFooter Layout Options
Full Width & Parallax
Control the background image, background color, text color, link colors and hovers, full width content + control of container padding in pixels, or use of standard padding size. With the background image you can control it for fixed or scrolling (you can also control placement of repeating patterns).
Sizing of the background image can vary. We typically recommend 1700px wide (and the height will depend on the content and if it’s a parallax transition when scrolling).View Parallax in Action
While we don’t recommend using a slider in most situations (including “above the fold” on the homepage) – many studies have been conducted that show only 1% of visitors to a site click on the slider – we do think there are some instances where a slider may be of use. Please click on the link to visualize options for slider use.View Slider Options
View All VariationsSee Shortcodes in Action Learn About How Shortcodes Work Demo the Framework
Gathering Web Design Inspiration
Visit our Website Design Questionnaire if Spark Logix Studios is designing the website.