The change is called ‘Responsive Web Design’ and I’m fully embracing it!

Why the change?

The shift towards responsive web design has been brought about by the rapid growth in the mobile and tablet industry, and the fact that millions of people are now accessing the web on mobile devices. We can no longer assume that everyone is going to be viewing our websites on a desktop computer. In fact, by 2014 mobile internet usage could very well overtake desktop internet usage.

This momentum in the growth of tablets and mobile phones accessing the internet means a change in the way in which us web designers design, build and generally approach our web design projects.

Change is always hard to embrace, especially when you’re used to doing things a certain way. But it’s something I love about being in this industry, the fact that you can never get comfortable for too long and you’re quite often kept on your toes!

What exactly is Responsive Design?

In a nutshell responsive web designs are designs that adjust to the dimensions of the device you’re viewing them on, and perhaps more importantly, they deliver an optimised viewing experience specific to that device.

I think the last part of the sentence above (in bold) really strikes a chord. The whole point of responsive design in my opinion is to deliver a better experience to users viewing your website on a device with a smaller screen.

Some history…

Responsive Design was first brought to the fore-front of the web design community by Ethan Marcotte and his aptly named book “Responsive Web Design”. The first time I read it I was a little daunted – I won’t lie. But after reading so much on the subject, and also the fact that the design community is so helpful and has released a number of different frameworks that we can use for kick-starting the development of our web projects, it’s relatively easy to get started building responsive websites.

Here’s an example

Here’s a quick example of a responsive template I put together using the responsive framework Skeleton. Try resizing your browser window to simulate the viewport widths of a tablet and mobile phone (I.E. making your browser window smaller and smaller) and you’ll see how the layout responds. Basically it has a few ‘breakpoints’. These are points at which the design changes for viewing on the various devices mentioned above.

Media Queries

These ‘breakpoints’ are achieved via media queries. Media Queries are the back-bone of responsive design. They’ve actually been around for years, but have only really found their calling with the popularity of responsive web design.

We can use media queries to tell the browser to use a modified set of CSS rules based on the browsers viewport (it’s dimensions). Here’s an example of how a media query might look:

@media only screen and (min-width: 768px) and (max-width: 959px) {
/* CSS declarations go here */
}

The above media query is targeting the viewport of a tablet (possibly an iPad). As you can see the max-width is 959 pixels (one pixel less than the maximum width of our design for desktop – 960 pixels) and the min-width is 768 pixels, as anything below that is venturing into the mobile phone viewport size and there’s a seperate media query set up to handle the layout at those dimensions.

Any CSS that we put within this media query above would be reflected in the browser when the viewport of the device you were viewing the website on was less than 960 pixels wide. Hence you can see that placing adjustments to the layout and structure of your site within these media queries can make it easy to optimise the layout of a website for different device sizes.

Flexible Images

When our responsively designed website is viewed on an iPhone versus a desktop computer, we need to adjust the image sizes accordingly

We can do that easily by applying a max-width of 100% to them. If the image happens to be wider than it’s container, then max-width snaps the image back in line and forces it to be the same width as it’s container.

img {
max-width: 100%;
}


If you need support in IE6 and below then you’d need to include some conditional CSS only for IE6 and below:

img {
width: 100%;
}


It’s also worth noting that you can serve up totally different images using your media queries. Just bear in mind that these get loaded when the webpage loads along with other images, so there can be a performance factor involved.

There are a number of techniques you can apply to work around this though. The most popular right now seems to be ‘adaptive images’.

Also now with higher density displays (the Retina display in the iPhone 4 and new iPad) considerations need to be made for showing higher res images for these devices only. I’ll try and write more on this in a separate blog post. As you can see, with responsive design comes a number of other things us designers need to consider and factor in to our work.

Fluid Grids & The Future

A truly fluid grid is a grid that doesn’t have fixed widths. E.g. the widths aren’t specified in pixels, but instead are specified in percentages, which allow the layout to increase in size if you viewed it on a very wide desktop monitor.

Although Skeleton doesn’t have a truly ‘fluid’ grid, it is flexible and adjustments are made to the pixel based widths of the grid within the media queries to change the layout and make it responsive. It doesn’t however cater for responsive design where our design adapts to really wide resolution desktop monitors – i.e. the design expanding outwards to fill all of the available space.

I think in the future us designers will have to take more consideration to how our designs look on really large monitors, as well as small handheld devices. Instead of setting a page container of 960-1,000 pixels, we’ll have to move up past the 1,200 pixelmark and maybe even use 100% of the width of the browser window (although I’m keeping my fingers crossed that doesn’t happen!)

If you’d like more info on fluid grids, then check this great article out.

Awesome Responsive Navigation Technique

Amongst all of this, for devices with smaller screens, one of the main elements you need to adjust is your navigation. Sometimes its not enough to just stack your main nav items on top of each other. You need to keep in mind the ‘press-ability’ and space.

You may have noticed that on the mobile version of my example, the navigation gets replaced by a ‘select’ dropdown form field. This is an increasingly popular technique as it’s so easy to use on a mobile device, as opposed to trying to press small text links with your fingers. It’s also a great space saver.

The ‘select’ form field is set up to be injected into the code using jQuery. Below you can see that I’m using ‘appendTo’ to place the form field inside the ‘responsive-nav’ div:

From there we need to create the option in the form menu that says ‘Go to…’ by default. This helps from a usability point of view, as having the item automatically show the text ‘Home’ may be confusing for the user. Here’s the code to do that:

Then we just need to populate that dropdown form field we’ve created with our navigation items. Doing it this way means that we only have one menu to maintain. E.g. if we add another main navigation item, it will automatically get shown in our dropdown.

Here’s the full jQuery:

Finally, we just need to look in our stylesheet for the @media only screen and (max-width: 767px) media query, and hide the main ‘.navigation’ unordered list that we want displaying only for our desktop version, and style our form field to make it more easily press-able on mobile – like so:

The Future…

Responsive design is definitely here to stay and its pretty exciting to be getting involved in it relatively early on. I haven’t yet had an opportunity to mess around with layouts that grow much past the 960 pixel / 1000 pixel mark, but it’s on my to-do list!

Below are some links to other resources which might help if you’re a designer looking to get started with responsive designs, or you just want to find out a bit more on the subject.

I’d also love to hear your experiences getting to grips with ‘responsive’ in the comments below.

Resources

• Mobile Web Best Practices
• Convert a Navigation Menu to a Dropdown for Small Screens
• Adaptive Images
• 15 Responsive CSS Frameworks Worth Considering
• Fluid Grids

So, what is ToucanBox?

Before I launch straight into the case study, I’ll give you a little background about ToucanBox and what it offers. Put simply, parents pay a subscription to receive monthly activity boxes for their children through the post each month.

It’s all about spending quality time as a parent interacting with your kids, whilst the activities, arts & crafts and games inside each box are actually aiding your child’s development at the same time. Many of the books and activities in the boxes have actually been designed by child development experts with that purpose in mind.

If you’d just like to view the designs, then click the button below. If not, then please read on to find out how the project was approached.

Stage 1: The Logo

The first step was to start by creating a revised logo for ToucanBox. The old logo looked good as a starting point and I could see it had potential, but myself and the client agreed that the box in which the Toucan character was sitting was too formal, and didn’t really fit in with the rest of the “feel” that ToucanBox was aiming for. We also felt that the Toucan character itself could be refreshed significantly and have a classy children’s story book illustrated feel, rather than being really bright and glossy.

With that in mind I enlisted the help of a fantastic illustrator, Vicki Gausden. Not being an illustrator myself I knew that whilst I could have created something good, having Vicki (whose style was exactly the vision myself and the client had for the new logo) would get the best results.

Below you can see the old logo versus the new logo. Myself and the client were really impressed with the finished result. It was vibrant, but in a more professional way than the existing logo and we could see it being instantly recognisable to children when printed on a box arriving at their home. The new character had personality, but a the same time it was giving a much more professional feel of a trustworthy company, which we hoped would appeal to the parents of those children.

Stage 2: Information Architecture / Wireframing

Moving on, the next stage was to think about the information architecture and produce wireframes for the main page types of the site. With this particular ecommerce site there were no limitations imposed by the platform that the site would be developed on. The development company the client was using were going to develop the site in Ruby, meaning that I had a totally free reign when producing designs for the checkout process and the site in general.

The ToucanBox homepage needed to get across several things:

1. What ToucanBox is – e.g. a subscription based service
2. Pricing / Info on how to get started
2. How it actually works
3. Whats in the boxes that get delivered
4. Some info about the boxes actually being beneficial for child development
5. Credibility (press logos)
6. Social Interaction (Facebook / Twitter)

Having made a list pretty similar to the one you just read, I set about creating a wireframe which you can see below. One other element that was important to include was a nice big sliding banner, showing kids actually playing with the product itself.

Some of the other main page types were the

• ‘Boxes’ page, which needed to clearly outline what activities were inside two example boxes that the client wanted to showcase.
• The ‘Get Started’ page, which had to quickly convey the different subscription options in a clear and concise way.
• And also the ‘How it works’ page, which obviously needed to show in three simple steps how the ToucanBox service works.

Here are some snippets from wireframes for some the other main pages:

Once the wireframes were all signed-off it was time to move onto the design. Thanks to Vicki’s great work on the logo I had a fantastic, vibrant, playful colour palette to work with.

Stage 3: The Design

The key element which I knew would impact greatly on ToucanBox’s success would be to achieve a design that was:

1. Professional enough to give trust to parents to commit and subscribe to the service, and;
2. At the same time be playful and exciting enough to appeal to parents and show that ToucanBox would be a fun product and also beneficial for their children.

Font choice was crucial to help achieve this. I wanted to use a playful typeface, balanced out with something a little more serious. After searching Google Web Fonts, I settled on Terminal Dosis and Neucha, which I think really complement each other well in the design.

Another element that would help get across the playful and less formal look and feel would be the use of hand drawn / erased lines. I felt that having lines in the design that weren’t straight and formal would help get across the playful, child-like feeling. I also tried to achieve this feel with some hand drawn sketches on the homepage to help illustrate the ‘How it works, What’s Inside, and Child Development’ content blocks. I took it a step further by doing something similar with the hangdowns on some of the other page designs, the banner area on the homepage and on other parts of the design too.

Checkout Process
The checkout design was a crucial page to get right. The process had to be easy to use and the form had to be easily understandable and easily usable.

With that in mind I set about breaking the form up into various sections and laying the fields out in a way that would allow users to work their way through it with ease. I also wanted to eliminate all distractions during the checkout process, so I removed the navigation and created a minimal layout that simply focused on the checkout form – nothing else.

Below is a link to view designs for the entire ToucanBox project as images in your browser. I’d love to hear your thoughts in the comments below.

To Conclude…

Now that the project is finished I’ll be offering advice to the development company and providing them with any additional graphical elements that they might need as they build the site.

All in all ToucanBox was a fantastic project to work on, and Virginie (the client) was an absolute pleasure to do business with. She trusted my judgement, offered up great suggestions and fed back concisely and promptly. Pretty much the perfect client!

Here’s her take on the project and working with Authentic Style:

“I found Will after a careful search process and I immediately liked his style: simple and elegant. Will was a pleasure to work with, he laid out the plan at the beginning of the project and stuck to it. He managed to turn my vision into an engaging, professional looking website, all with very little directions from us. I’m extremely pleased with the result and looking forward to working with Authentic Style again on future projects.”

Background

The premise of the Face-Jack Me app isn’t an original one – I’m sure the client won’t mind me saying that, and for that reason at the beginning of the project I had some doubts about it. Essentially you take a picture of yourself, or someone else, that photo is then broken up into 3 segments, and you swipe your finger left and right to shuffle through different face combinations. There are sample faces that come with the app, or you can take more photos of your friends or family and combine your face with theirs for some really quite funny outcomes.

Whilst doing some research it was clear that this idea had been done before. From looking at and playing around with some similar apps, I felt that the slick look and feel and simplistic ease of use of these existing offerings was missing and due to that there was a definite gap that this app could fill if done well. In short to make this iPhone app a success it had to be easier to use and better looking.

Planning / Wireframing

As always the first stage consisted of wireframing the main screens of the application. This was so important because it allowed myself, the client and also the developer (Kriss Bennett of Createful) to spot any shortcomings before we’d got to the design stage and beyond. It also allowed me to come up with a ‘process’ for ‘Face-Jacking’ a photo that I felt was much easier than how any of the other apps did it, with buttons in easy to notice places, ways to quickly take a step back in the photo capture/editing process, and a way of making the app social too.

Here are a few screenshots of the wireframes that were presented to the client:

Some key features were the ability to save your ordinary photos into one gallery and your ‘Face-Jacked’ photos into another gallery. We also wanted to let people share the funny faces they’d created on Twitter or Facebook.

The main thing though was coming up with a really easy to use process for taking and modifying a photo, and also making it immediately obvious how to get started as soon as the app loaded up. This process turned out to be refined and modified during the development as it became clear that we hadn’t quite accounted for everything. Kriss (the developer) released several test versions of the app on TestFlight to allow us to test it and see what was missing.

Icon Design

The icon design was something that I was a little nervous about initially. Usually for an iPhone app icon I’ll try and create a shape or simple illustration that gets across the premise of the app. See the Sea Urchin app icon I created. Here though the client also wanted to see a version using photos of faces. Having looked at a few other apps that used photos in their icons for inspiration, honestly I thought they looked like they’d been thrown together in five minutes.

With that in mind I set about creating some ideas:

The photo icon was starting to look good and the client really liked it. I wanted to combine several faces to get across what the app does and stagger them to show the user they’re adjustable. I then combined this with a simple ‘FJ’ combined to create something that I and the client really loved. Here’s the finished icon.

The App User Interface Design

The client had initially requested a red and black colour scheme, but after some experimentation during the icon design, I thought a blue would work well. Usually red and blue would be a colour combination I’d steer clear of, but somehow it works here. It feels fun and vibrant. The ‘feel’ from the icon needed to follow through into the design of the app as a whole.

The homescreen of the app had to be simple and just let the user get started straight away. I wanted the Face-Jack button to be clearly ‘pressable’ and also point the user right to the button with some kind of visual cue. It had to be really obvious how to get started.

From here the photo capture/editing process had to be designed. It had changed a little from the initial wireframe, and even during the development Kriss and I refined the process a little adding and taking away buttons to make sure the whole process was as easy to carry out as possible. We also wanted to keep the branding strong when a user plays around adjusting the segments, so we added a frame to the photo that included the Face-Jack Me logo.

Above you can also see the gallery where you can save your creations, and also some of the other screens.

Overall

The client was very happy with the finished outcome and so were myself and Kriss. We think the app is well worth 69p, so go over to iTunes and download a copy - it’s had some great reviews already. Honestly its really funny to take some pictures of your mates down the pub and start mixing them together.

Creating a great design is only part of a successful web design project. Once a site has launched it’s essential to install analytics so you can start to see how visitors are interacting with the website, and if you’re even getting the number of visits you or your client hoped for in the first place.

Having produced lots of designs for a leading conversion rate optimisation company, I’ve got a pretty good understanding of where to place calls to action and what to include in a design to give visitors confidence and trust to buy your product (if you’re selling something), or contact you regarding a service if your site is a lead generation tool. Sometimes though its difficult to predetermine how visitors are going to use your website. Your visitors are human and we’re all different after all. Out of 10 people to visit your site you can bet that 2 or 3 are going to pose a question you didn’t see coming if you sat next to them whilst they used it, or totally miss the phone number in the sidebar of the site that you thought was so bold it was going to slap them round the face!

User testing a prototype of your clients website is the best way to go to ensure that you cover those points listed above (and of course many more), but lets face it, not every client has the budget/time for their designer to produce a full on prototype of their site before designing and building it for real.

The next best step – and one that I always undertake – is to wireframe the site. Ideally if you have access to your client’s customers, then show those wireframes on paper to them – take their feedback on board and make changes based on what they say. In an ideal world it should be an agile process – quick iterations and changes based on feedback provided by the client’s users or people from the same demographic. However, even if you or your designer has gone to all those lengths you can’t sit back and leave you’re site. There are always improvements to be made once it’s out there.

One bit of kit I’ve been installing on my client’s websites of late is CrazyEgg. Its a web app that allows you to see an overlay of where people are clicking – literally anywhere on the site, even if its not a link – and you’ll be suprised to find some people clicking things that you think are obviously not links. There is also a scrollmap which shows how far people are scrolling down the page, which is particularly handy if you’ve got a long page with some calls to action or maybe a form further down the page.

There’s a few more useful features too, but even armed with the simple overlay its easy to make design improvements and minor modifications to a website to improve its success. Below you can see what the scrollmap looks like.

Take a site I’m working on at the moment. It launched a while back and its not quite getting the traffic that my client hoped for. We’re just starting an on-page SEO campaign to improve that, but out of interest I installed CrazyEgg on the homepage of their site to see how the visitors they were getting were interacting with the site. The homepage is literally where all of their visitors are landing from Google.

Now the homepage isn’t your typical homepage, in that there isn’t a main navigation as such – the client didn’t want that. There are just 3 logos to access the different divisions to their business, above that the logo and strapline and then under the 3 logos links to special offers and bookings. Once you get into the three main areas then the site becomes more typical and a main navigation bar appears.

What CrazyEgg revealed was that actually visitors didn’t seem interested in clicking to ‘enter’ the various divisions of the clients site, or seeing the special offers right away, they just wanted to read about my clients business and get their contact details. Those links were only accessible in the footer on the homepage. CrazyEgg showed me exactly the number of people clicking these links and proved that my initial concerns about excluding these links prominently on the homepage had been justified.

Based on that data I have been able to make suggestions to my client about how we can go about making some minor changes to make that information more easily accessible for their visitors. I’m literally about to make these changes in the next week or so, and I’m really excited to measure these changes to see if they out perform the previous version of the site.

So, thats a little insight into the final step in my 4 step process – Plan, Design, Build, Manage. Managing a completed site and improving the way it works is an essential part of the service I offer, but something I’m not sure ever web designer thinks about.

If you’re reading this and not a client of mine, then please feel free to get in touch and I’ll be happy to help you get started improving your website based on actual data of how your visitors are interacting with your website.

ATTENTION: This position has now been filled. Thank you for your interest.

About Authentic Style

Authentic Style is the web design and development company of freelancer Will Smith. Based in office space located in Shaftesbury, Dorset, Will has been freelancing successfully for 3 years and has built a reputation for creating beautifully designed websites, iPhone apps and email newsletter for his clients.

Prior to that Will worked at several agencies and has 7 years experience in the industry, having produced design work for clients such as Vodafone, Google, 888 and AOL as well as smaller businesses and start-up companies from London to as far away as Tokyo, and also many of the places in between. 

Responsibilities

As the first member of the Authentic Style design team, you will be expected to produce original web design concepts for current and new clients using Adobe Photoshop. You will also be responsible for turning these design concepts into fully functioning websites, built using semantic HTML5/CSS3 to W3C standards. You will also be responsible for producing iPhone application designs for new and existing clients.

You will be required to work enthusiastically with existing and new clients alike, and encouraged to have first hand contact with them, participating in meetings and phone calls.

You’ll be someone who enjoys managing their own time, is passionate about design for the web and iPhone, who is looking for an opportunity to join a very small company on the rise and is able to commute to an office located in Shaftesbury, Dorset UK.

Essential Skills / Traits:

• Designing website concepts in Adobe Photoshop
• Coding these designs using HTML5/CSS3 that is valid and semantic.
• Experience using WordPress to build content managed websites.
• Willingness to keep up to date with the latest goings on – reading blogs, articles etc
• The ability to manage your own time and prioritise.
• Being able to cost up jobs from briefs (written or verbal) from a client.
• Confidence talking to clients over the phone and in face to face meetings.
• Most of all – raw design talent and a passion to learn.

Nice to haves…

• Using jQuery to enrich user experience
• Experience working with PHP.
• Print design experience using Adobe InDesign
• Experience designing for iPhone.
• Knowledge of mobile web design/dev best practises
• Email Newsletter design experience.

Salary: Negotiable based on experience.

Perks

• A new iMac to work on.
• An office Spotify account for inspirational tunes whilst working
• A relaxed and friendly working environment with no strict dress code.
• The chance to potentially work on some in house web design / iPhone app projects as well as client work

Want to Apply?

Great! Please send an email to will[at]authenticstyle.co.uk, with examples of your work and a link to your online portfolio. I look forward to hearing from you!

Nannies Like Us (NLU) contacted me to design and develop a simple static website that would enable them to start taking inquires and help generate some new business for them. Here’s a quick snapshot of the homepage (click the image to visit the site)

Starting out with a meeting…

Initially we started with a meeting and spent some time discussing what pages the site should have and what kind of content would be displayed on these pages. Everything needed to be kept pretty simple to keep within the clients budget, but I wanted to try and add a few touches that gave a slick, professional look to the site, while at the same time having a slightly playful feel as after all this site was about nannies looking after and caring for children.

Simple Logo

Before I was able to start wireframing the homepage of the site we had a slight set back as the original name for the company had been taken by another company who had seemingly cropped up over night. This mean’t a new logo needed to be created – just something simple and colourful. My client sent me over a sketch of a typographic logo arranged in a circle, which I then recreated and tidied up in Illustrator. It was nothing groundbreaking in terms of design (I’m sure they won’t mind me saying that!), but we all felt it was playful in colour and would work well on the website and in print.

I think its important to understand that not all companies/businesses need to spend a fortune on branding, and although usually I like to spend slightly over a day producing a variety of logo concepts and then more time developing those further, that isn’t necessarily the right solution for everyone. Sometimes something much more straight forward will fulfill the client’s needs.

Wireframes

Once the logo was finalised I quickly moved on to producing a wireframe for the homepage and internal pages of the site. As the logo was circular I saw this as a perfect opportunity to place the logo in the middle of the page and have the navigation options arranged either side of it. My client immediately liked the idea and signed off the wireframes with next to no amendments.

During our meeting I’d determined that NLU offered a free one hour consultation – a pretty good selling point I thought. With that in mind I wanted to include this on all the pages of the site.

The main purpose of the site was for people to get in touch so we needed the contact details to be easily accessible. The only issue was that with the logo being positioned in the centre with the navigation options either side, a telephone number above this (the typical place for these details to be found, as opposed to being listed on a contact page) needed to be balanced out equally with something else the other side. That didn’t quite work, so I opted for a phone icon positioned flush to the top of the browser window, that when clicked would slide down to reveal the contact details.

NLU were also going to rely on social media to find candidates for jobs so it was essential to include Facebook and Twitter links on the homepage of the site.

Design

Here’s a quick look at the design of some of the elements mentioned above.

Below is the idea for the logo and navigation layout, along with the telephone icon that when clicked would slide down to reveal the contact details.

Below you can see the design for the “What We Offer” and “Free Consultation” boxes on the homepage. I decided to make the headers have a slightly slanted top edge to further reinforce the subtle child like nature of the site. I was sure to add the “Free Consultation” box to the internal pages of the site too.

Here’s a partial look at one of the internal pages. I wanted to frame the main body content on white and have the peach coloured background fill the entire page.

Overall the client was very happy with the look and feel of the site. They showed it around and the general consensus was very good.

Development

The site was built using HTML5 and some subtle CSS3 enhancements.

If your browser allows you’ll notice the main navigation links fade down when hovered over with the mouse. Here’s the code (highlighted in bold) that does that for each link;

li.nannies a {
text-indent: -3000em;
background:url(../images/nav/nannies.png) no-repeat left top;
width: 67px;
height: 21px;
display: block;
overflow: hidden;
float:left;
margin-left: 35px;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

I also used the jQuery bgFade plugin to create a nice fade effect on the logo and telephone icons when you hover over them. All pretty subtle things but details that I think are really important enhancements to add to a website.

Summary & Client’s Comments

My client was really pleased with the work and I believe the site has been getting a fair amount of visits already. The next step is going to be to start on an SEO campaign to try and boost the sites rankings for a select number of key phrases.

It all looks great Will. Thank you. I love the colours and the layout.

What HTML Email Designer Offers

I wanted to create a website geared specifically towards offering HTML email newsletter design and development services, with the ability for clients to easily be able to manage their own newsletter content each month, and also send out campaigns with complete ease.

Email marketing is a great way for clients to keep contact with existing customers and also promote special offers and latest news, and I still feel that too many small businesses are passing up a great opportunity here. So that’s why I decided to create HTML Email Designer. A place for small businesses to start out on the road of email marketing at (hopefully) quite affordable prices.

The services I’ll offer are pretty simple

1. I design an email newsletter for you, provide you with the PSD and you develop it. Perfect for developers who need a bit of design flair or companies who have an in-house development team.
2. I develop your newsletter based on a design you provide. Perfect for a busy designer who doesn’t want to waste time testing their design in Hotmail, Outlook etc.
3. The complete package – I design, develop and integrate an HTML email newsletter with Campaign Monitor or MailChimp allowing you to manage your newsletters content, access some great analytics and send out your campaign each month without the hassle of having to pay a designer/developer to do so for you.

Campaign Monitor & MailChimp

Both these solutions in my opinion are fantastic for sending out email newsletters. They let clients update the content of their newsletter with ease, and also provide some very interesting statistics enabling you to see how many people opened the email, what links they clicked and much more. There are also some cool ways to integrate social media into your campaigns these days. In terms of developing newsletters for each platform, yes there are some differences, but I believe offering both as options is the best way to go as each have good and bad points.

The decision to use Campaign Monitor or MailChimp for a certain project will definitely depend on the clients needs and also the frequency with which they intend to send out their campaigns as the pricing does vary with both.

Thoughts behind the HTML Email Designer design

Initially I set out designing a site that was much more in depth and I even started developing it. Client work took a front seat and I put the development on the back burner. When I came to get started again I knew I’d bitten off more than I could chew trying to develop a reasonably large site in between client work. With that I started from scratch and tried to simplify.

I wanted to create something really clean and easy to use, with a focus on typography and also past email newsletter designs I’d created. At the time Typekit has just announced the release of Futura on its platform, so that was the perfect excuse to use that for many of the headings you see on the site. Unfortunately the condensed version of Futura isn’t available on Typekit, so I had to use image replacement there.

In the ‘hire’ section at the bottom of the page I also wanted to spell out the process for the client, letting them know exactly what to expect.

Behind the scenes

I built the site using HTML5 (as I do for all client sites now) and also used some subtle CSS3 to further enhance the experience. Mainly on the email client logos, using subtle CSS3 gradients and box-shadow transitions when you hover over them with the mouse.

To conclude…

Overall the site came together pretty quickly and I’ve had some good feedback so far.

I think its going to be an interesting little project because now I need to promote the site (cue this blog post!) and get some visitors to it. I’ll definitely be pointing my clients to the site once I finish working on their website projects. After all having an email newsletter to match your brand new website is the perfect partner in my opinion!

Before I begin, the images here were taken with my iPhone, so please excuse that the quality isn’t top notch.

Last Wednesday I was finally able to move into the new Authentic Style HQ, conveniently situated in the Wincombe Business Centre, just 1.5 miles from my house in Shaftesbury. What wasn’t so convenient however was the time it took BT to set up my broadband. Having had an engineer come out the previous Tuesday and tell the business centre manager that the installation of both my broadband and phone line was successful, I moved all my stuff in and tried to get online. Needless to say, you guessed it, no internet connection had been set up, and I only found out after paying for a networking guy to help me get online and him suggesting I call BT just to double check they’d installed everything. Anyhow, a week later I was in the office and online.

So why move out from the home office and spend money renting a room somewhere else?

After working from home for just over 2 years I felt like it was time for a change. Authentic Style has been doing great over the last two years and turnover this year is up on last year by 23% if my calculations are correct. Whilst working from home does have its perks, it also has some downsides which I felt were getting to me a little after 2 years of doing it.

My main reason for getting some office space was that I don’t want to be a solo freelancer the rest of my career. I want to eventually take on staff and try and build Authentic Style into a small design and development outfit, so why not take the leap now and take on the extra overhead whilst its just me, continue to build the business and then look at maybe taking someone on in the next year.

The second big reason was having a place to leave the laptop, and work in general behind for the evening and also the weekend. When you work from home you have to be so disciplined to stop work at 6pm and not just sneak back to respond to that email or tweak that design later that evening. Whilst its convinient and nice in the beginning to be able to do that, after a while I was finding it increasingly hard to switch off. I’ve only been in the new office for about a week now, but I’m already enjoying being able to leave work behind in the evenings and having a place to go each day. After all I’ve still got my iPhone if I really need to check my mails or respond to an inquiry quickly after hours.

The room I’m renting is a good size and would definitely accommodate another desk and possibly a third at a push (there’s more space to the right of this shot). There is also a lovely meeting room available for use at the business centre and I can’t wait to use it for the first time next week with a potential new prospect.

For now its time to continue working hard and seeing where that takes me in my third year freelancing!

As a quick side note, the development of this application was handled by Kriss Bennett of Createful. Thanks Kriss, great job! Now on to the case study…

Application Overview

The Sea Urchin iPhone application was really pretty straight forward. In essence it lets people who are interested in chartering Sea Urchin (a boat captained by my client Mick) find out a little more about exactly what’s involved in the day, costs, videos, availability, weather forecasts and tidal information. You can download the app from the iTunes store to take a look for yourself.

Stage 1: Information Architecture

The first step was to organize the information on the homescreen of the application.

Mick told me the sections he wanted the app to have, so I sat down with a pen and paper and started to think about how these could be best organized to allow users to quickly access each section of the app from the homescreen.

After a quick bit of sketching I decided that there were too many areas to simply list in one menu without the user having to scroll to see all of them. Ideally all the areas needed to be visible to the user without any need for scrolling. With that in mind I decided to break the navigation up into two sections. One for the ‘Availability’, ‘Weather’ and ‘Tides’ information and another for the more text heavy based pages. I used the conventional black bar at the bottom of the app (which many other apps use) to house the ‘Availability’, ‘Weather and ‘Tides’ icons, and then settled on a simple button style navigation for the links to the other sections.

Prior to starting the wireframes Mick had also sent me a few images of his boat and also some happy customers snapped with their biggest catch of the day. I felt it was pretty important to include some of these images, so there needed to be a space devoted to that on the homescreen too. My idea here was for the images to fade in and out in a nice smooth cycle.

Once I’d settled on a layout for the homepage I opened up my wireframing tool of choice (Omnigraffle) and reproduced the sketch to then present to Mick. I also produced wireframes for the ‘Prices’ and ‘About’ screens of the app to show Mick how the ‘content style’ screens would look.

The ‘Prices’ page was a crucial one to wireframe in my opinion. The content Mick had sent across for me to work with included all the right information, but it was buried away amongst a mass of text, so actually finding all the different price options was pretty tricky. I solved this problem by clearly highlighting the prices and costs for chartering the whole boat in their own clearly defined blocks.

Stage 2: Icon & Application Design

With the wireframes signed off I started work on the icon design. Initially I went with an all blue theme, but after some input from the client I worked in an orange tone to match the clients existing website.

The icon itself went through several iterations until we reached the fishing hook and waves which was immediately chosen by Mick. First off I went down the route of having a boat in the icon, then tried a couple of approaches with a fish silhouette and rod, but I knew we were on to a winner with the hook and waves combination.

With the design of the homescreen of the application I wanted to keep things really simple and focus on the navigation and images of the boat and past customers. Since this screen was really only a means of navigating around all the content, that had to be immediately obvious.

I was also keep to use some nice iconography to draw the users eye to the more key parts of the app – the availability calendar, weather and tide info.

Here’s a look at the designs for some of the screens:

Stage 3: Development

Once we’d signed the designs off (which happened very quickly might I add!) it was time to save out all the images for iPhone 3 and iPhone 4 retina display and then send them off to Kriss at Createful to develop.

Prior to the development we’d discuss the best way of integrating the Sea Urchin availability calender along with the weather and tides info.

A mini version of Mick’s availability calendar was able to be linked to from within the app itself, there for not interrupting the user journey by closing the app and opening Safari instead. We also included a button to enable users to switch to the more detailed view of the calendar as well.

For the weather we were able to display the Whitby weather forecast straight from the Met Office website within the application.. Obviously this updates on the fly so is always the latest forecast – something thats very handy for a fisherman!

Unfortunately with the tide information there was no API which we could tie in with the app. Because of that we had to resort to linking to the relevant section of the National Oceanography Centre website.

Finally for the videos we were able to link to the mobile version of Youtube and pull in all the Sea Urchin videos enabling users to view them within the app.

Conclusion

Overall I think both Kriss and I produced a great looking app that provides everything that someone who is interested in chartering the Sea Urchin boat would need to know. I’d love to hear what you think of the design and/or the process in general in the comments below.

Client Testimonial

Many thanks to you both, the app looks awesome. The end product is very professional to match your working practices. I would recommend your services to anyone.

Related Post

• iChampi iPhone Application Design

The difference between iPhone 3Gs and iPhone 4

The old iPhone 3 and new iPhone 4 have different resolution screens. Basically the iPhone 4 retina display has double the pixels of its counterpart, which means double the detail horizontally and double the detail vertically. Consequently this creates a little more work for us UI designers.

Here are the specifics:

• iPhone 3Gs – 320 x 480 screen size
• iPhone 4 – 640 x 960 screen size

If you use much of Apple’s pre-built interface library for your app then you don’t need to worry about these differences, as much of the work is already done – the default Apple UI buttons, labels etc work fine for both resolutions. The slight headache comes however if your iPhone app design is highly custom – e.g. it includes lots of custom made images, graphics, icons, menus etc. If that’s the case then you need to create versions for both iPhone 3 and iPhone 4 so that you can export two sets of images at those different resolutions.

So does that mean I need to create my app designs twice?

Thankfully, no! It’s all about using solid color, pattern or gradient layers with vector masks and in Photoshop to ensure that you can design first at the iPhone 3 resolution (320 x 480), and then scale that design up to the iPhone 4 resolution (640 x 960) without loosing any of the detail. You have to use vectors instead of bitmaps as bitmap images blur terribly when you scale them up.

Here is a list of 6 tips that will help you to create iPhone app designs that work for both platforms in Photoshop:

1) Start out designing at the lowest resolution

Start out designing for the iPhone 3 which uses the lower resolution. I won’t go into the specifics but after a quick experiment in Photoshop, vector masks and shape layers seem to scale up better than they scale down.

2) Make sure ALL layers are made from shapes with layer styles for effects

Get in the habit of using layer styles, shapes and vector masks. Bitmaps should not be used in iPhone app design because they’ll cause you headaches when you scale your design up. Shapes created with the rectangle / rounded rectangle tool will be your best friend as they easily scale up and down. One quick tip is to avoid using the ellipse tool for creating circles – for some reason it won’t snap to pixel properly. Instead use the rounded rectangle tool with a large radius to achieve a circle shape. Also, if you want to use textures, you first need to define that texture as a pattern, which you can then use as a ‘Pattern Overlay’ in the layer style options.

3) Enable the ‘Snap to Pixel’ setting when drawing with the shape tool

To make sure this is enabled select the shape tool, then cast your eye to the top of Photoshop where all the options for the tool you’ve just selected appear (see image above). Next click the down arrow to the right of the Custom Shape icon (labelled Geometry Options on hover) and then tick the ‘Snap to Pixels’ checkbox.

4) Icons must be vectors pasted into Photoshop as ‘Shape Layers’

If you use bitmap icons they’ll just blur when you scale your design up; you need to use icons that are in vector format. That may mean recreating some of your icons in Illustrator and then adding layer styles to them in Photoshop (Gradient Overlay, Stroke etc). Be careful when you copy and paste these from Illustrator into Photoshop though – you need to paste them into Photoshop as ‘Shape Layers’ (see image above).

5) Scale up as you go to check your work

As you’re designing its best to keep checking your work by scaling it up 200%. This way you’ll notice any things that need correcting/adjusting as you go. At the bottom of this article is a link to a very handy Photoshop action that lets you do this in a single click.

6) Export your images

This isn’t something I’ve had to do myself as I provide all my iPhone app designs to developers who export the images and then develop the app. I should really start to learn Objective-C, but the time escapes me at the moment. Anyway, I know that the whole exporting process can be a little tedious.

According to this great article on Smashing Magazine (Designing for iPhone 4 Retina Display: Techniques and Workflow), the best export method seems to be:

…enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

I’d advise checking out that article, especially the exporting section for more info, and also the incredibly useful Photoshop actions that can be found at the bottom of that same article. Also, this article may be of some use too: ‘Designing for iPhone 4′s Retina Display: What I’ve Learned’.

Helpful Resources

I hope some of you found this article useful. Below are a few links to some handy resources I regularly use for my designs.

• iPhone 3 GUI Design Kit
• iPhone 4 GUI Design Kit
• iPhone / iPad Icon Kit

Also If you have any iPhone app design tips to share yourself, I’d love to hear them!