We’ve been working with Gable Fine Art since they launched their first website in 2011. We built a modern and artistic WordPress website, designing and developing a bespoke theme. The original website has aged extremely well in terms of its aesthetics and ease of administering its content.
Old website design
Move forwards 5 years and Gable Fine Art has grown significantly and is supporting more artists than ever. It’s now re-branding and re-launching as Gable Contemporary, and along with that comes the need for a new website that meets the latest advancements in technology as well as the expectations of its ever-demanding audience and their broad range of browsing devices.
The owner of Gable Contemporary, Graham is still extremely happy with the look of their first website and is still receiving extremely positive feedback from its audience, so maintaining the look and feel of the first website was crucial during the redesign process. Other criteria included:
Making the website fully responsive.
Introduction of a Facebook feed into the homepage (stylishly integrated, rather then a simple plugin dropped onto the homepage).
To maintain a contemporary and classy look to the website.
To use our creativity to modernise its aesthetics, while maintaining the brand, look & feel.
We always design mobile-first – our mobile audience is the fastest-growing, most demanding and will only increase over time so arguably our most important audience. Also, having such a small screen to design for involves many challenges that we should understand and tackle before other work starts.
New mobile layout
Once a mobile design is finalised, then we grew that design into a tablet version. With the mobile and tablet both being restrictive in terms of screen space, many of the same technologies and considerations are used in both designs to aid navigation and provide a natural and efficient user experience.
New tablet layout
The next design stage is for larger screen devices, including laptops, desktop computers, HD screens, TV’s and even projectors. Typically the website would be manipulated using a mouse and keyboard at these sizes, although touch screen laptops and desktop touch screens are increasing in popularity all the time, so although primarily designed for mouse/keyboard use, all aspects of the website are made to be touch-friendly as well.
This design is at 1920px wide, a typical high definition screen. This design utilises much more of the space available on an HD screen than the older design (when larger screens were rare) and really shows off the artwork. Image galleries have increased in size so thumbnails are now larger and when clicked on, all gallery images now display in a simple full-screen lightbox slideshow.
The slideshow is can be managed by both mouse clicks or finger swipes, on touch screen devices.
New HD layout
As well as meeting Grahams needs in terms of aesthetics, bespoke Facebook integration and ensuring usability on all browsing devices, we included the following work during this redesign and redevelopment project as we do with all of our development projects:
- Create a custom 404 page
- Create the necessary redirects – 301 & Canonicals
- Include a Favicon
- User friendly URLs
- Create print friendly CSS
- Add search feature
- Mobile First Development
- Create low resolution imagery for mobile display
- Minimal amount of code
- Optimization of imagery
- Include browser caching
- Include Server side caching (if hosting server allows)
- Manage code placement & load order
- SEO friendly responsive development
- Mobile First Development
- Google Friendly Coding
- SEO friendly URLs
- Meta data assisting plugin installation and setup
- Include an XML sitemap
- Facebook Open Graph protocol integration
- Facebook Insights integration
- Twitter Cards integration
- Google+ integration