With the arrival of responsive web design several years ago we started to look for ways we could make our lives easier and our solutions more cost effective for our customers. The natural choice was to create templates, but we needed to come up with a model that reduced the number of sacrifices clients would have to make.
There were several things that were important to us.
No surprises: When we first started implementing responsive websites, our customers were surprised by how their sites changed on different devices. This is less of an issue now that responsive design is more common, but we still think it is better to show you what it will look like before we implement it. No one wants a website that they are not 100% happy with the day it launches. This increased our costs for design as we had to produce and develop not just a few pages, but we had to do each one at different screen sizes.
Reliability: In the early days of RWD everyone was developing “frameworks” a responsive framework is a collection of CSS and javascript (usually) that takes care of most of the hard work of accommodating different screen sizes and devices. We experimented with several frameworks before choosing Foundation as our go to framework. Just like the early days of web browsers, early frameworks weren’t really that good. It wasn’t until a few years ago that versions started to stabilize It also took us a while to figure out how best to integrate it into our templates so that they were easy to keep up to date. We had many false starts creating “templates” that only got used once.
Flexibility: After developing websites for over two decades, the one thing we have learned is that as soon as you try to put a customer into a box, they try to break the box. Our early experiments with templates failed because we had not built enough flexibility into them.
What changed?
We finally got the right set of tools in place that allow us to deliver the quality of website we want at the right price.
Sketch: Sketch was built for web and UI designers and is the first really significant change in web design in decades. It saves us many hours of design compared to working with Photoshop. We setup Sketch files for each of our SiteCM Templates so we can still provide the no surprise, custom design, experience to our more price sensitive web design customers. No need to close your eyes and try and imagine what the template will look like with your logo, colours, pictures, fonts, and calls to action. We are even happy to provide your designer with our Sketch templates.
SCSS/SASS: Scripted CSS or Syntactically Awesome Style Sheets let us change the template to match your designs quickly. We also made lots of structural changes to how the styles are pulled into the SiteCM components. Your templates come with a collection of Snippets based on Foundation, and custom classes that match your design and help you layout your content the way you want.
Learn more about SiteCM CMS and our Templates!
Tags: template, cms, design, sass, scss, foundation, framework