WordPress build collaboration for Ecofurb retrofit service
As well as offering full web design and build of WordPress websites for clients, we can also build from supplied designs. This can often be when working with an agency, or company that already has a designer. Ecofurb have design skills in their team so we agreed to collaborate on their new website and build a custom WordPress theme from his designs.
About Ecofurb
Ecofurb is the product of our practical experience over the past twenty years. Team members have experience in delivering advice for over two million homes, building supply chains, protecting consumers, and managing jobs across the UK. Most importantly, Ecofurb team members have upgraded their own homes with insulation, glazing, ventilation, and heat pumps!
Ecofurb’s impartial advice and retrofit coordination service can help you achieve your energy-efficient dream home by assisting with planning, delivering and financing your retrofit project.
More about retrofit from the Centre for Sustainable Energy
Web Design Software
There are so many options for web design software. Some people still use Photoshop, one agency I know use InDesign (!) and there are a various tools like Penpot, Figma and Sketch that combine apps and online preview and collaboration tools. I personally use Sketch for its ease of use, online preview feature and because they are not trying to sell out (like Figma).
The Ecofurb designer used Canva for the new website designs – certainly unusual but I have built a few websites from PDFs or other flat images. They had great brand guidelines available along with imagery and a comprehensive library of SVG icons.
Challenges
With the designs being output from Canva as PDFs, there were a few hurdles to overcome.
Type scale – It’s easy to end up with various font sizes across a website if these aren’t defined at the start. Using elegant CSS also means setting type sizes for headings, body text, buttons etc and letting the cascade style all the type across the site. I nudged the supplied text sizes into a ratio using https://typescale.com/ with different ratios for mobile and desktop and slight tweaks as the theme was seen on screen.
Sizing – Only a part of a web page can be seen at any given moment, so designing and viewing full pages at 7000px wide isn’t ideal for web design. When designing in Sketch, this is done at actual size so the previews can be viewed in browser to get an idea of how the site will look once built.
Accessibility – A slight tweak to the teal in the Ecofurb palette meant the button contrast was acceptable for WCAG AA accessibility and is barely noticeable to the eye. I recommended click to open menus as used by the widely used Bootstrap framework (their reasons here), and modified the WordPress menu code to add ARIA opened states. The mobile nav uses the same code so the site makes sense to screen readers by not having multiple, similar menus.
Grid – I design on a grid system which keeps elements aligned and gives them balanced proportions. I nudged things onto the grid while building the Ecofurb theme.
The Results
It was an exciting process working with Ecofurb to bring the design to life! We had regular video calls to discuss any design points that came up and answer any questions.
The new theme is easy to use, loads quickly and doesn’t rely on an excessive amount of WordPress plugins to function. This makes the site easier to maintain longer term.
I build a lightweight page builder so we can avoid Gutenberg/Divi/Elementor and other complicated page builders. The first version of this wasn’t quite right so we developed it further, making it easy for the team to add and remove panels on the site pages. Inline notes give hints to text length or image sizes.
Summary
As well as offering a full WordPress web design & build service, we can build from your designer’s work and collaborate on new web design projects. Contact us today to discuss your next project!