Author : Citrus Frog

How to add an iPhone home-screen icon to your website

Posted by Citrus Frog at 4:31 pm

With the event of the day being the release of Apple’s iPhone IOS4 update (not the UK budget) we thought it would be a good time to start some iPhone related website tips and tricks.

One of the most simple things you can do with your website for iPhone, Touch and iPad answers this question asked by many of our clients;

How do I add an iPhone icon to my website?

Well, the answer is “pretty easily!” With an earlier update of the iPhone operating system came the ability for the iPhone to automatically detect a specific image in the root of your website to use as the home-screen icon.

All you have to do is save an image as a PNG that’s a minimum of 57×57 pixels (we tend to do 156×156) and name it: apple-touch-icon.png Apple will then do the rest for you, adding the rounded corners and shine – aren’t Apple nice!

Actual icon sizes are as follows;

iPhone icon size: 57 x 57 pixels | iPad icon size: 72 x 72 pixels (some suggest 75px) | iPod touch size: 57 x 57 pixels

There are a many who say that 60 x 60 works best for iPhone and iPod Touch icons, but in our experience it seems to resize very nicely whatever size you use as long as its 57+ pixels, in fact it tends to resize it better than photoshop! – also, bearing in mind that you probably want it to work on an iPad too, we recommend over 72×72. Why not keep in mind the idea that one day you may have an iPhone app too, for this it may be worth creating your icon at 512 x 512 pixels, then there’s the Spotlight Search of 29 x 29, though this is resized for you be the iPhone anyway!

Here’s ours as it was uploaded…

Right, so you’ve created your 57×57 pixel masterpiece and named it apple-touch-icon.png - now just upload that to the root of your website (the main folder containing your website files) and you’re pretty much there!

To test it, why not visit your website via Safari (on your iPhone of course!), then click the plus (+) button to add the bookmark, selecting the “Add to Home Screen” option when prompted. From here you can name your bookmark, and you should see your new icon to the left – it can sometimes take a few seconds to appear, during which time you’ll see a tiny version of the page.

Click the “Add” button top right to save it to your home screen. Now all that’s left to do, if you want, is to create a folder (now available in IOS4) and add your bookmarks to it – a superb visual representation of all your favourite websites in one place.

With the addition of the folders within this iPhone 4.0 update, it seems to us that more and more people will be creating visual links to their favourite sites via their home-screen, so now is a good time to be adding your icon for iPhone/iTouch/iPad to your website.

If you’d like any help doing this, or have any questions please leave a comment below or email us via our contact form.

British International Comics Show

Posted by Citrus Frog at 6:10 pm

Having been given the green light yesterday, the British International Comics Show’s new website is now live!

The new Comics Show website now boasts an interactive slideshow on the home page showcasing the top talent they will have at the show in October at the ThinkTank in Birmingham. As well as info on the Venue, Where to Stay, Featured Events, Exhibitors, Guests and ticket sales, there is also a blog that will soon be full of exciting news from the show.

So why not head over now to check it out;

British International Comics Show (BICS) thecomicsshow.co.uk

Andy Sutcliffe Wedding Photography

Posted by Citrus Frog at 5:30 pm

We’re really pleased to announce the launch of Andy Sutcliffe’s new website. We have worked closely with Andy and his Wife Gill to create a clean and contemporary photography website that also focuses on supporting content to help drive traffic to their website.

We are currently writing a full case study for our portfolio and will post a link on the blog as soon as it is available.

For now, check out their full site here: Yorkshire Wedding Photography by Andy Sutcliffe

More Skate Hut animated Gifs!

Posted by Citrus Frog at 1:38 pm

Following our last post, thought we’d put up the last four animated Skate Hut banners.

These will soon be seen across the web advertising their fantastic online store: skatehut.co.uk

That’s all for now!

Skate Hut animated banners

Posted by Citrus Frog at 5:28 pm

We are currently working on some animated banners for www.skatehut.co.uk to use in their online marketing.

Here’s a couple of samples!

(click wide banner to see full size)

More to follow soon…

Envision

Posted by Citrus Frog at 6:20 pm

Environmental Vision needed a vibrant and powerful new website to handle the needs of their incredible growth, both as a company and in the numbers of schools that they engage with.

This youth education charity was promising exponential growth and Citrus Frog helped them build a platform to give all their school members and teams a voice and an opportunity to share their ideas.

Citrus Frog encourages any business needing a new or updated website to get involved in the creative process from the very start.

We worked with Envision to build their next generation website into a social networking platform that allowed their site members to publish their own content and to interact with each others groups for the purposes of mutual encouragement and critique.

Click for larger images

Environmental Vision also needed a bespoke content management system (CMS) to help present their company brand and vision for the organisational sections of the website.

Through consultation with Envision staff we went on to improve the initial specifications of the CMS to also allow attaching galleries, which became an important aspect of the in-site communication. There are many other custom modules that were developed for this website which work seamlessly in the background to help Envision deliver their objectives.

Citrus Frog has also been involved with many other Envision projects from printed material, newsletters and apparel. Below are a few examples of the work we have created for them.

Click for larger images

Why not take a look at the Envision website here: www.envision.org.uk

Or follow Envision on Twitter for their latest updates: www.twitter.com/envisionuk

B’ham Conservation Trust

Posted by Citrus Frog at 10:39 am

The Birmingham Conservation Trust is a West Midlands based charity set up to “preserve and enhance Birmingham’s threatened architectural heritage”. Their projects secure the future of buildings at risk in and around the City Center, the sort of buildings that many other charities or developers would rather not tackle.

Birmingham Conservation Trust asked Citrus Frog to redesign their visual identity to bring it into the noughties so it would appeal to a new audience of the social networking age without alienating their current supporters.

The Birmingham Conservation Trust’s (BCT) previous logo did not allow for easy manipulation for use on social network sites such as Facebook and Twitter. Our job was to give the Birmingham Conservation Trust’s visual identity a complete overhaul and ensure that its new logo was simple to convert into many formats across the web, as well as being a strong instantly recognisable brand across their printed material.

Click for larger images

We started by looking at what the Birmingham Conservation Trust was really about, raising the funds to not only save historic buildings, but also to give them a new purpose, we settled on their iconic work with the Back to Backs in the City Center near the Hippodrome. These historic building are a real part of Birmingham’s past, and now serve as a living museum for the thousands of visitors that see them every year.

Taking the Back to Backs as our inspiration we set about illustrating our version of the iconic buildings. We had to ensure that this would be detailed enough to capture the full likeness of the original buildings whilst being uncomplicated enough to be instantly recognisable even as small as 24 pixels square on twitter!

The other key elements in the new Birmingham Conservation Trust’s logo were the typeface and colour palette. For the typeface we used a bold, uncomplicated and easy to read font with a little styling. The colour scheme used bright orange to represent their creative approach to their work, against a deep graphite and stark white. These high contrast colours give the Birmingham Conservation Trust a positive visual identity and also allows for strong icons to be used across the internet.

Click for larger images

The final two elements that were added toward the end of the design process where the “bct” on the side of the building and the crane that can be seen clearly behind the Back to Backs. The decision to add the “bct” was two-fold, firstly it would allow for the building to be used as a stand alone icon without the full “Birmingham Conservation Trust” text and secondly the very act of putting “BCT” on the side of the Back to Backs illustration would give a new sense of ownership to their flag ship project that had previously been seen mainly as a National Trust property (The National Trust run the Museum but were not responsible for the restoration project.

The crane represents the true nature of the Birmingham Conservation Trust’s work, and is a reminder of the scale of the restoration work that is undertaken for some of their projects. The juxtaposition between the finished Back to Backs and the crane represents both parts of the Trust’s work – to restore old buildings and give them a new lease of life.

Having designed the main visual identity for the BCT we then went about creating their new printed identity with letterheads, compliment slips and business cards (all on recycled or sustainable pulp of course) and also their online web presence in the form of icons and banners.

Click for larger images

To stay up to date with their great work, why not follow them on Twitter: www.twitter.com/BirminghamCT

We also worked along side Nick Booth from Podnosh on this project: www.podnosh.com | www.twitter.com/podnosh

The Forest Hotel

Posted by Citrus Frog at 6:20 pm

www.forest-hotel.com

Citrus Frog was approached by the Forest Hotel in Knowle to update their website with search engines in mind. Their previous website was a small flash-based affair that was not getting them the search results they needed to drive traffic to their site.

With Search Engine Optimisation (SEO) as our starting point we set about redesigning The Forest’s online presence as a search engine friendly website with plenty of content and an understanding of what their visitors wanted to see. The main aim was to strike a good balance between engaging searchable text-based content and great images that would serve as a visual guide to the hotel, its restaurant and their eye for quality.

The Forest’s website was redesigned using their rich colour palette with a strong layout that would aid visitors in finding the content they were looking for, with bold imagery at the top of each page and well conceived copy beneath.

Click for larger image

For example their wedding section is now broken down into several sub sections, each tailored to help the happy-couple-to-be find everything they need to make an informed decision about booking The Forest as the venue for their special day. Rather than the usual catch-all info, the Forest, with our help, has crafted pages for Wedding Receptions, Civil Ceremonies, Civil Partnerships, and Wedding Fayres, and with the addition of transparent pricing, room capacities and sample menus the website is doing what it should – helping visitors imagine their special day before they even have to pick up a phone or fill out the contact enquiry form.

We have also added an extensive gallery to their wedding pages, allowing their visitors to see just how fantastic their weddings are, and having some of their many thank you cards also displayed in the gallery people get to read some testimonials directly from previous brides and grooms.

With our help they also have a large number of events fully documented on their website with menus and offers attracting some excellent search results and sending more people than ever to their website. With the addition of analytical software tied into the site, The Forest can also see what parts of their site are attracting the most visitors, and can adapt the pages that need more focus on marketing.

The website we have created for The Forest Hotel has now become one of their most powerful marketing tools, and a showcase for their fantastic hotel, restaurant and luxury rooms. We know they are now receiving more enquires than ever before for their wedding, conferencing facilities and events.

Not only did we deliver a new search engine friendly website for The Forest, but we have also gone on to produce their latest printed material. We have designed various flyers for them to go in local press and mail-shots, as well as their latest Christmas brochure that has attracted many people to booking their festive parties at The Forest.

Click for larger image

The Forest Hotel is a privately owned hotel with 12 boutique en suite bedrooms, a friendly local bar and contemporary restaurant listed in both Michelin and the Good Food Guide. Why not visit their site for yourself here: www.forest-hotel.com

Why not follow them on Twitter to keep informed about their latest offers: www.twitter.com/foresthotel

Skate Hut

Posted by Citrus Frog at 10:41 am

www.skatehut.co.uk

Skate Hut is one of the UK’s largest online retailers of Skateboards, Heelys, Scooters and all manner of extreme sports gear and streetwear.

Skate Hut approached Citrus Frog a couple of years ago to design their visual identity and their e-commerce website, since then our relationship has grown and we now regularly update the design and functionality on their online store as well as designing flyers and other printed material to designing and sourcing their latest clothing range.

Click for larger images

Our most recent work with Skatehut was the design and creation of their blog, this is the latest addition to their online presence along with their regular “Tweets” on Twitter.

Their e-commerce website, the Skatehut blog, and their printed material are designed to appeal to both their product target market of teenagers and young adults and also to their largest group of buyers – their parents. To achieve this we gave them a clean design with distressed graphical aspects to add a “street culture” feel to the site.

The clean layout makes for easy navigation and clear presentation of important product information, whist the distressed graphical look adds an edge to the site that will appeal to the younger audience without alienating their parents who hold the purchasing power.

Click for larger images

The website is very search engine friendly, and with naturally high search engine placing and help from their Google ads campaign, this website receives an average of 4,000 unique visitors a day!

Skate Hut has also taken our advice and fully embraced the Social Networking aspect of online marketing. Skatehut regularly use Twitter to not only advertise their site, but to also get their personality and ethos across to their many followers. In their latest update we integrated their Twitter feed into their main e-commerce site as well as their new blog.

Here at Citrus Frog we love Skate Hut’s attitude to really fun marketing, from using Twitter and their blog for constant up-to-date offers and news, to their cool stickers and flyers, even their business cards are cut into the shape of a skateboard!

Visit their awesome site here: www.skatehut.co.uk

Follow them on Twitter here: www.twitter.com/skatehut

Rival Insurance

Posted by Citrus Frog at 3:46 pm

www.rivalinsurance.co.uk

RIVAL Insurance are a forward thinking self drive hire insurance company who were established back in 2002, and have since been providing self drive hire cover to their clients across the UK, Northern Ireland and EIRE from their head office in Birmingham.

RIVAL chose Citrus Frog to redesign their website ensuring that it was optimised for search engines as well as having a fresh and engaging new look. Within the first few weeks of the new RIVAL insurance website going live, RIVAL were already starting to have better results for their key search terms like “Self Drive Hire Insurance”. From not fairing well in Google they now appear on the first page of both Google.co.uk and Google.com averaging 5th position from over 4 million results. This was achieved by using our Search Engine Optimisation (SEO) techniques to ensure good natural listings within Google for their chosen keywords.

Click for larger images

The new look for the RIVAL insurance website was based around their strong branding and creative colour palette. This enabled us to create a bright engaging design that was clean and easy to navigate whilst really driving the RIVAL brand to the forefront of their website. We created a dynamic flash banner for their home page using their key messages and some testimonials to instantly get their core brand across to visitors to the website.

The new look web site was just the tip of the iceberg, as RIVAL wanted to fully embrace the latest social media techniques to develop a new customer support area, using a blog format to deliver frequently asked questions, video tutorials and online resources as well as a more informal area on the RIVAL interactive area of the blog offering related news and features. This is all accessible using the great archiving system that blogging provides as well as the integrated Google search features that visitors can use from any page on the RIVAL website and blog pages.

Click for larger images

Supporting their new blog, RIVAL uses Twitter and YouTube to deliver content directly to their customers in a new and engaging format. Citrus Frog designed and implemented their Twitter and YouTube accounts to continue their visual identity across the social networking sites in such a way that the visitor never feels they are away from the RIVAL website.

Visit the RIVAL Insurance website here: www.rivalinsurance.co.uk

Follow them on Twitter here: www.twitter.com/rivalinsurance

Check out their YouTube Channel: www.youtube.com/rivalinsurance