To reflect changes in their strategy, and the changing marketplace for their services Healthskills commissioned a marketing company to develop a new brand. As part of their branding, they created visuals for a new website.
I was asked to build their new website using these visuals and in-line with the brand identity document. The existing website content was archived. The bulk of it was not used in the new website, as it was out of date. I created redirect links to relevant content on the new site where appropriate.
Their existing website was built in traditional HTML using Dreamweaver, and the new website required more flexibility and powerful content management. I chose WordPress to handle the content, and I built a custom WordPress theme from the ground up using Zurb Foundation for sites and jointswp.com.
I spent a lot of time building the elements for the homepage, including the menu that overlays the banner slider, as well as multiple other sliders. None of the slider plugins seemed to fit the bill, so I used Ken Wheeler’s slick slider and added javascript and css manually. Slick slider is fantastic as you can get the slider to change layout depending on screen width, which works well with Foundation breakpoints I used to adjust the menus, content and footers for different devices. This means that I was able to customise the whole slider functionality depending on what screen size the user has.
For example, the banner slider looks like this on a widescreen over 1024px wide – with 2 action buttons and text for the slider navigation:
On medium screens between 640px and 1023px, I removed the slider navigation text, but left the navigation line:
On small screens, under 640px I centred the text, and removed one of the buttons:
I used Slick Slider on the next slider on the homepage, which highlights the main areas of Healthskills work. For small screens up to 639px, only one panel is visible, with the edges of the other panels showing at the margins to encourage the user to swipe or click on the navigation lines shown under the panel:
For medium screens between 640px and 1023px, two panels are visible with the margins showing a little more of the off-screen panels:
The slider doesn’t behave like a slider on screens over 1024px, and shows all four content panels on screen at the same time. The navigation is removed as it is uneccessary:
The project was very challenging, requiring a lot of custom CSS and javascript coding, but I am delighted with the outcome and the client loves the site.
