logo
Web development with Themify

Web development with Themify

At Yellow Cat Design we use a many different approaches to web development depending on the requirements. This can range from completely bespoke hand coded sites using a custom built CMS to those that are built using themes as a framework. The beauty of using a theme such as those that Themify develop is that if chosen carefully you can find one that matches your designs without having to compromise on your creative vision. The time that this saves on custom development means that we are able to offer uniquely designed websites of the highest quality for a fraction of the usual price.

In this instance we used the Stack theme as it was pretty much identical to the wireframes that we had already sketched for the site. The metro style tile layout was perfect for our client and we had identified right at our initial briefing meeting that this approach would suit the aims and content of the site.

Initial installation was simple enough, we just logged into the Themify members area to download the theme files. These were then uploaded to our WordPress installation and were ready to use straight away. A neat feature is the ability to import the demo content so that you can get a feel for how the theme works and what features are available. However, as we were simply using Stack as a framework and intended to customise it fully we didn’t take up this option.

Themify Tiles Example

Themify Tiles Example – Some simple labelling would help

Pages can quickly be constructed using the Themify drag & drop tool that is simple enough for novices to use but flexible enough to give designers plenty of control over the page layout. With options from 1 to 6 column layouts as well as asymmetric layouts and a huge range of modules we found that every layout we had designed could be easily recreated. Whilst the drag & drop tool is great and one of the best we’ve used there’s still room for improvements. For example it would be helpful if there was the option to give modules a title for easy identification because when you have multiple copies of the same module with different content it can get a bit confusing (see example).

Themify Front End Editor

Themify Front End Editor

One way around this issue is to switch to the front end editing mode which allows you navigate the page itself and simply click on the element you want to edit. This is a really good feature and is perfect for any clients who don’t want to be messing about with html or anything too complicated but is probably a little too basic for creating more complex layouts that we require.

The only other feature that I could recommend would be the ability to save a page layout to be re-used elsewhere on the site. For example, once you’ve spent a while with the drag & drop tool creating something like a complex case study layout it would be useful to be able save this to re-load the case study template for future case studies. You can do this using the “Builder Layouts” section but we couldn’t find an option to create reusable layouts from pages you’ve already built – this could be a small but useful feature to add.

The website that we built using Stack is still under development but we are pleased with initial results. We have needed to make a few CSS changes to get the layout to suit our needs because of the way the tiles scale on mobile devices but the support has been very good as our first question was answered in good time. The customise menu also provides a wide range of options for adjusting the site without delving directly into the CSS and although this can still be a little fiddly to do it provides yet another level of customisation which is really important to the way we work. We still have some work to do to iron out a few styling issues at the time of writing this but initial feedback has been very good.

Overall we would recommend the Stack theme because of it’s distinctive layout which coupled with the drag & drop tool gives you a complex responsive site that can be easily edited by an end user with no coding experience whatsoever. In places it’s not the most polished theme that we’ve ever used and it requires a far bit of tweaking to get it to work the way you want it to but this is more than offset by the other features and the price. As a new member of Themify (this is our first theme) then the Stack theme has certainly persuaded us that should our designs require us to use Themify in the future we would have no hesitation.

Share
New Responsive Website for Abbey

New Responsive Website for Abbey

We are proud to announce that yesterday we launched a new re-designed and re-structured website for the Abbey Cleaning Service.

As a loyal customer of many years we have worked with Abbey to not only develop their brand but to use their website as an important marketing tool. Search Engine Optimisation (SEO) is an important part of this and with yesterdays Google Algorithm Update that focusses on mobile friendly websites we decided that the old site was in need of an update.

We started by reviewing the current content to determine what we needed to improve from a SEO perspective, but more importantly, from an end user’s perspective. One of the results of this analysis and further research was that we created new “service” pages to explain in more detail the range of services that Abbey offer. Not only does this provide potential customers with a better insight into the high quality work that Abbey undertake but it also allows for more focussed SEO with each service page being optimised for different keywords.

Abbey Website iPhoneMaking the site responsive was vital not only to avoid being penalised by the new Google update but crucially to ensure that all visitors to the website were able to access the information they need quickly and easily regardless of the device they use. Our analytics data showed that over the past year more than 25% of traffic to the website was from mobiles or tablets and even though that percentage was relatively low it was certainly something that needed addressing.

The design needed to be clean and fresh in keeping with the Abbey brand and whilst we were creating a new site it needed to be consistent with the old site too. We utilised a lot of white space within the design and kept the clean feeling by using simple icons and subtle grey tints. In contrast to the white we then used bright imagery and the distinctive “Abbey blue”. Each section was designed in distinct, responsive elements so that they simply reflowed on smaller devices. This simple approach makes the content easily accessible and easy to follow on any size device.

From a technical point of view we utilised techniques such as minification, gzip compression and image optimisation to ensure the site was as lightweight and quick to load as possible. We continue to monitor and improve this to ensure a great ongoing user experience for Abbey Cleaning customers.

If you would like to know how Yellow Cat Design can help you use your website as an effective marketing tool please get in touch.

Share
Design Tip: Get hi-res image previews from iStock

Design Tip: Get hi-res image previews from iStock

A standard iStock comp image

A standard iStock comp image

All graphic designers will be familiar with image libraries and there are plenty out there to choose from. By far the most popular because of its range and quality of images is iStock and it is one that we use here at Yellow Cat Design. When creating those initial proofs for customers you obviously don’t want to pay for an image in case it turns out to be not quite right so iStock provide a low resolution watermarked “comp” image (see sample image). These are usually fine because they give you a rough idea of how the image will fit within a design but often the large watermark obscures the image and when blowing them up to A4 size or larger they get very pixelated.

However, there is a very easy trick that will allow you to access much higher resolution images with smaller watermarks by following the steps below. We have used Safari on a Mac for the demo but you should be able to do this in any browser with an inspect tool add on.

  1. Before you start you need to enable the Developer menu in Safari by going to Safari>Preferences>Advanced and tick “Show Develop menu in menu bar” at the bottom
  2. Next, find the image that you want and click through to the image page e.g. http://www.istockphoto.com/photo/closeup-of-sunflower-50901542
  3. Instead of clicking the “Get a Comp” link as usual zoom right into the image as far as it will go.
    iStock Zoomed in image

    Zoom right into the image to the highest magnification.

  4. Return to the page and right click anywhere on the page and select “Inspect Element” from the menu
    Inspect Element

    Right click and select “Inspect Element”

  5. In the Developer menu find and open the images folder and look for images that start with the word “zoom” .
    Developer menu Safari

    Find the largest “zoom” image within the Developer menu.

  6. Double-click the largest “zoom” image with the number 3 at the end to open it in a new window.
  7. Right click the image and select “Save Image As…” and save the higher res version wherever you like. Now you have a nice large image with much smaller watermarks to use in your mockups!
The larger zoomed in iStock image.

The larger zoomed in iStock image.

Please note that these images should only be used in design mockups for private use. If you want to use the image in commercial or public work then please purchase the image through iStock.
If you find this little tip useful please share!
Share
New responsive website launched for Bedazzled Cleaning Services

New responsive website launched for Bedazzled Cleaning Services

Bedazzled Cleaning Mobile Site

The Bedazzled Cleaning responsive website adapts perfectly to mobiles for easy access on the go.

Today sees the launch of the brand new website for Bedazzled Cleaning Services. Yellow Cat Design took Bedazzled’s existing logo and created a fresh new identity that better reflected the professional service that they provide. The site is fully responsive which means it adapts to all screen sizes from large desktops to mobiles. We created special features such as an Instant Estimate Form, a click to call button on mobile devices and a floating contact tab to make sure that it was as easy as possible for potential customers to find the information they require and quickly get in touch for more details.

Share
Swansea Gymnastics Re-brand

Swansea Gymnastics Re-brand

Yellow Cat Design are proud to announce a sneak preview of the new identity for Swansea Gymnastics Centre. We have worked closely with the team over the last few months to design and fine tune a range of ideas. We had to consider many things such as complimenting existing colours and use across a wide range of applications such as on leotards, signage, online and print. Check our portfolio section soon for all of the details but in the meantime click the boxes below to take a loo at the logo.

AfterBefore
SGC-Logo-Idea-1-Circle-v6

Swansea-Gymnastics-Centre-Logo

Share
New brand launched for Aspirations Counselling Service

New brand launched for Aspirations Counselling Service

Aspirations Counselling Responsive Web Design

Aspirations Counselling Responsive Web Design

Yellow Cat Design are proud to launch a new brand for Aspirations Counselling Service. We were chosen for the project based on our track record or creating new brands for startup companies and affordable prices.

Share
Share