SPEC Machine and Supply Ltd. is an Edmonton based company. They manufacture and sell different types of flanges for pipelines.
A pipe flange is a disc, collar or ring that attaches to pipe with the purpose of providing increased support for strength, blocking off a pipeline or implementing the attachment of more items. Pipe flanges are usually welded or screwed to the pipe end and are connected with bolts. A gasket is inserted between the two mating flanges to provide a tighter seal. Pipe flanges are either custom with dimensions provided by the customer or they are manufactured according to published specifications. Several organizations and associations have published specifications that provide dimensional information as well as pressure specifications at different temperatures.
Spec Machine & Supply is an extremely organized company and puts a large amount of focus on their customers. They are a great company to do business with.
Working with Spec Machine & Supply was a real treat. On our first meeting, they came prepared with documents, logos, ideas, mockups and designs for us to look at. One of the best documents was a wire-frame outline of the website layout. It consisted of their main pages they wanted on the site and where individual items should be positioned within the pages. The design was up to us, as long as it matched their business’s personality and branding.
The requirements for this project consisted of:
- a clean, professional design
- to match their existing printed materials
- mobile friendly/an ability that would allow the website to look equally good on large desktop monitors as well as small mobile screens
- to work on iOS, Android and BlackBerry devices
- backwards compatibility on older desktop browsers
- an image slider.carousel to cycle through photographs
- a system to act as an ‘order desk’ to their customers to retrieve product details and request quotes online
As the existing print materials contained a lot of photography of the actual products they make, and that the products are red, we chose to go with a monochromatic colour scheme consisting of black, white and red.
To address the requirement of being mobile friendly, we designed and implemented a responsive design. Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
A responsively designed website adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule. Try it out for yourself. Resize your browser window to see the content and layout adapt and ‘respond’ as the width narrows and widens.
Being that modern web design (responsive design) requires modern browsers to work, we added backwards compatibility for older browsers to gracefully degrade and still look great.
The major part of the Spec Machine project was the custom contact form, used as a system for readers to get almost instant quotes and estimates through the website. We looked at out of the box solutions, none of which really fit our needs. So, we made our own. Using conditional logic, we and pre-populated values, we created an estimate form that dynamically generates more entries/products as needed. You can see the form on the SPEC Machine & Supply website.
We are extremely happy with how this project turned out. Not only was it a great design, but the SPEC team was amazing to deal with. Efficient and friendly. Be sure to have a look. www.specmachine.com