Design - Craig Jamieson

7 things I’d like to see in digital for 2013

I was just reading a .net article on the 20 top web design and developments trends for 2013 and I have a few thoughts on what I’d like to see in digital for 2013, especially in South Africa.

Responsive Web Design
Probably the largest trend, still not picking up enough traction in South Africa is RWD, which makes absolutely no sense to me. The thought of creating a website purely for desktop, when we have such a large percentage of mobile users locally its ignorant. At the same time, RWD might not be the perfect solution after all, given that have multiple layouts require content to be turned on or off, but that only means its hidden from the user’s eye, but all the multiple layouts and content are still downloaded, which in SA, really defeats the purpose.
Content
If you’ve ever read anything on the web, you’ll know that for the most part, it’s absolute rubbish. I believe that content has to be a bigger priority in 2013, that doesn’t mean to say that it needs to be bloated, while content is king, it doesn’t have to be a silly bloated one at that. Craft of visual assets needs to be factored in and more relevant content be created, instead of just recycling images from a google search on a specific subject, purely as a cheap option to visually populate your wall etc.
Conversation
Social media conversations need to be better aligned, this prescribing posts months in advance has to stop. Agencies need to be employed and empowered to write content in real-time. While a strategy can be in place to guide the conversation based on the brands objectives, a more natural real time conversation should take place, where agencies speak in the brands tone to people, engaging in conversation rather than shouting out and waiting for responses. The other problem with the month in advance post prescriptive content creation is waiting for client to sign off everything is the delays it causes. clients need to have a little faith in the communication agency they hire.
Focus
Most agencies try to be all things to everyone, instead of trying to do everything poorly for the same budget, agencies need to identify real opportunities in the digital space and focus more on that specific area rather than spread themselves too thin across every digital channel.
Hybrid designer
I’m borrowing the term Hybrid Designer from the .net article and I’m going say what they’ve said in my own words, the best digital designers have the ability to code as they have a better understanding of what the constraints of the medium are. I’ve mostly done all of my own coding of the sites I’ve done in my career. I lack the level of development of a lot of the talented developers I’ve had the privilege of working with over the years, but I have always had a better balance between design and development output.
Story telling
I believe true engagement is to tell a really compelling story, taking people on a journey, giving people a reason to believe, to interact and be inspired to want to share. In SA, I’m yet to see anything like the type of campaigns AKQA or North Kingdom produce. We spend millions producing TV adverts that run for 30 seconds for a couple of weeks, instead of creating rich online engagements that can last for much longer and offer a lot more information, interaction and share-ability.
Waving carrots
I have noticed that there are few digital campaigns that don’t involve a huge prize as an incentive to engage. If the prize is the reason to engage, then the focus isn’t on the message we’re trying to drive, but rather the “whats in it for me” mentality. If you’re going to give something away, then it’s simple, have an entry form. But if you want people to understand and engage with your brand, give them an experience they’ll never forget.

Tips when naming images for SEO

Quite often we forget that the average joe client, doesn’t have a clue how to do something as simple to us, as naming their images. I have spent many hours renaming images, working much harder than most clients are willing to pay me for, so I decided to start telling them that I want images named correctly, quickly finding out that there’s a lot more to this than even I thought as I watched my Dropbox update with new advice I gave them.

Let’s start with a few rules:

No spaces
lowercase
Use hyphens instead of underscore to separate words, underscore cannot be viewed when a URL is underlined
No full-stop in the name, only before the extension .jpg
Don’t abbreviate
Only letters and numbers
Numbers should at least be double digits 01 – 09 if lower than 10
Don’t start naming with numbers, they usually only represent the numerical order of an image
Abbreviations can be used at the end for things like thumb nail = tn or large lg etc but purely as reference for your developer
No more than 50 characters long
The main image types supported by browsers are .png .jpg and .gif

This is how correct image naming looks like

product-name-01.jpg or product-name-tn.jpg

A few tips when working with images for the web

Use the progressive setting when saving in Photoshop to ensure that it shows something, rather than loads in bits on a page
Use img {max-width: 100%;} when doing responsive designs to scale proportionately
Thumb nails don’t need to show the entire image, zoom into something that is obvious and makes sense to the user
You must give your images a description
<img src=”image-name.jpg” alt=”The image must have a description for better SEO” />

These are just a few tips, if you have more suggestions, please feel free to share

An alternate approach to building a website

Budgets are tight, so I needed to rethink how I build websites. The usual approach would be to research, wire-frame, design, build and launch. Okay so that’s, pretty simple and I’m being vague and skipping quite a few steps, but it’s not really important, I still do some of the things I might have skipped over. What was a huge time-consuming task, was getting clients to agree on a layout. This could get tedious, and even under contractual agreement to a set amount of reverts, clients seem to focus too much on unnecessary details, wasting huge amounts of time, which is of course money, something almost every client seems to have a shortage of. So I’ve taken a new approach. Given that most of the time, I’m involved from concept to execution, acting as designer and developer. I follow a different process, reducing the time it takes.

This is where I blow your mind!

I research, I wire-frame (briefly) and then I start building, then I do what we generally term as design. I have found that people respond better to a working site, so that’s what I do. I build the site, keeping it simple, avoiding focussing on the shine that makes the site beautiful. I build a framework, I add the content, navigation and general functionality. At this point, when the client agrees that I have met the functional requirements of the site, I pretty much skin it. Giving it the type of polish it deserves. I have avoided designing something, that changes multiple times before dev, during or after dev, which saves clients moolla.

A few warnings though.

Not all clients respond to this route, they just can’t seem to be able to visualise the site. Working this route in a team environment might not work either as the design is in my head while I’m deving. Too much complexity might also require design first.

It’s unconventional, it takes experience and it takes a lot of faith by your clients. But it cuts down time, which means it cuts down costs and delivers on the “form, follows function” theory.

My current Kindle reads

I thought I’d share a few Kindle books currently on my iPad

Abduzeedo Inspiration Guide for Designers (Voices that matter) – Fabio Sasso
Content Strategy for the Web – Kristina Halvorson
Creative Workshop: 80 Challenges to sharpen your design skills – David Sherwin
The Digital Diet: The 4-step plan to break your tech addiction – Daniel Sieberg
Don’t Make Me Think – Steve Krug
The E Myth Revisited – Michael E.Gerber
The Essential Guide to HTML5 – Jeanine Meyer
Flash Mobile – Matthew David
Foundation HTML5 Animation with JavaScript – Billy Lamberta & Keith Peters
Good Strategy / Bad Strategy – Richard Rumelt
HTML5 Guidelines for web developers – Klaus Forster & Bernd Oggt
Mobile Design & Development – Brian Fling
Mobile Web Design for Dummies – Janine Warner & David LaFontaine
ReWork – Jason Fried & David Heinemeier Hansson
Steve Jobs – Walter Isaacson
Stunning CSS3 – Zoe Mickley Gillenwater
Undercover User Experience Design – Cennydd Bowels & James Box
Untitled – Blaine Hogan
The Wake-Up Call – Jonas Eriksson
Web Form Design: Filling in the blanks – Luke Wroblewski
The 4-Hour Body – Timothy Ferriss
The 4-Hour Work Week – Timothy Ferriss

FNB are quick to respond but are they responsive?

Earlier today I commented on a tweet which mentioned FNB will bring the new iPad to South Africa. Simply, I was curious as to why FNB, not Apple (The Core Group) were bringing the iPad to SA, given that I know FNB as a bank, they handle your money etc. Promptly I received a response which I noted because someone I respect had a good chuckle at my expense.

@MichaelJordaan: A real Guru wouldn’t ask “@Digiguru: What the hell does FNB have to do with iPads?”

This was met with quite a few retweets by people who were either laughing at me or at the cocky response from @MichaelJordaan – CEO of FNB. Not taking it too seriously, without hesitation I replied…

@mikestopforth @michaeljordaan LOL I’m not a real guru, but would hope that FNB was a bank and not a Apple distributor 🙂

I quite appreciated the sensible responses from a few other people who informed me how FNB are trying to encourage clients to make use of electronic channels as a medium to do banking. If that’s the whole truth, I applaud their efforts. Giving them the benefit of the doubt, I decided to visit www.fnb.co.za as I wanted to see how they were offering the iPad. I arrived at their seemingly well designed home page and after clicking on an iPad image, I read that FNB gives you an Apple iPad, Samsung Galaxy or Smartphone at a reduced rate, with your Cheque Account. 24 Months to pay. As long as you’re a FNB cheque account customer, you probably qualify for their deal. This isn’t empowering anyone any more than it is signing people up to their business. This I understand, given that I know a little about marketing and advertising. Good for them and it answers my question “What the hell has FNB got to do with iPads?”

I know a designer who works on the FNB brand and wasn’t too surprised that their site looks quite descent on the surface. As far as banks go, FNB seem like a forward thinking bank, I have noted they have an App, which is fantastic in a geeky way, but it’s device specific and not the only way to access their content from tablet & mobile devices. As typical South African standards go, I wasn’t too surprised that the site is not responsive, it doesn’t adapt to multiple devices, making it quite difficult to bank online on mobile phones etc. People don’t seem too bothered about viewing sites on their tablets, when held horizontally they look like they do on computers browser, but what about when you display it vertically (portrait) and on your phones which have an endless amount of screen sizes? Thats where it would be in their best interest to have a rethink of their existing site and perhaps design it to adapt better to the devices they say they the want to empower people to use.

iPhone 4 portrait screengrab

iPhone 4 landscape screengrab

I honestly don’t believe that FNB care any more about empowering people by using devices like the iPad any more than they are building brand loyalty through association, leveraging the cool factor. That’s great marketing. However, if they were concerned about empowering, they would already have built their site to adapt better on devices, make the buttons etc large enough to be selected on touch devices, legible enough to read on smaller screens and reduced site speed by removing the +- 40 images that make up the page and rather used CSS, as phones accessed the internet well before the iPad was released. But they’re cool, @MichaelJordaan has many fans who would sooner laugh at his response to my comment than actually think about what FNB are, and what they are supposed to be doing, which in my opinion is banking. I’m not in a battle with FNB, I quite respect their marketing efforts, they seem like they’re ahead of the competition, sociably they seem to be doing the right things too and I’m certainly not going to get into it with every retweeting fan, I’m smarter than that.

I’m no social guru either, and nothing can be taken back, but now that they have this gem of information from me, the right way to deal with my response online would be to acknowledge what I’ve said and say thanks for the advice, we have noted your point about our site not being responsive and we’ll look into it.

For anyone who cares, let this be a lesson to you. Don’t expect to get an informative answer from brands, you might just get a cocky response. People you respect and others you don’t will point and laugh. But maybe you’ll get lucky – like I have, by actually getting an opportunity to turn this around and hopefully make a suggestion that could actually benefit the brands users.

I buy Apple products, from Apple. I bank, at Standard Bank.

What clients need to know about time

Time has to be one of the most important aspects of any project and most design professionals will make all sorts of considerations to ensure deadlines are met, quite often even with the very best planning, time can slip away and dare I say, it’s the clients fault. Ofcourse we love our clients and we do our best to accommodate their every need and tolerate all sorts of things, but I do think there are a few things to consider when you are the client to ensure you don’t delay the process.

Understand that if you set the deadline on a project, you must either stick to the project schedule or accept that the deadline will have to move out and might incur additional costs.
When you agree on a timeline, know that this is scheduled time, so don’t assume that when you exceed the given timeframe, it can immediately be scheduled into the studio.
Some of what seems like the simplest functionality can be some of the most time-consuming tasks, don’t assume anything, when asking for additional design or functionality, know what it entails and how it will impact the projects deadline.
Agree to a date and time when you review work and respond. Keep it consolidated and communicate clearly to avoid further delays.
If a designer quotes you for a certain amount of hours, do not expect to receive your project so many hours later, most designers do multiple tasks, including running their business, so they might only spend so many hours a day on the project, so agree on a delivery date.
Work in phases, create milestones and always ensure you are not delaying the process.
Payments are not immediate, they take a couple of days, so when paying deposits, understand that your work will only commence when the money is in the bank. the same applies to final payment, if the arrangement is to be paid upon approval of the site, that is prior to the launch, the go live date will be delayed until payment is received.
The most common delay I experience is the MIA client who lets other things get in the way, abandoning the project and then expecting your designer to jump when finally realising the deadline is looming.
Another common problem is that clients decide to move deadlines without discussing this with the designer first. Just because your deadline moves out, doesn’t mean the designer can accommodate this change.
Have a single point of reference between your business and the designer, who consolidates feedback. Nothing delays the process more than getting multiple feedback at different times from different people.
The basics on any project should be some sort of timing plan, which should include time for reviews, allow the designer time to make the relevant reverts and allow for testing. Even non technical projects require testing of formats, hardware and delivery by email, sms or on disc.
Be transparent about how many people need to approve work and make sure you manage them and give fair timelines for feedback, designers understand this, but do not have clear foresight of how your business operates when they are building a project plan and scheduling in reviews.
Looking for stock photography can be really time-consuming, so you could help by asking your designer where you can go look for images to give as reference.
Build in buffers as often as possible, delays happen and nobody wants to miss the all important deadline, no matter who is to blame.
Designers don’t do open heart surgery, studios are not an ER, things can wait, you should not assume designers will work through the night or over the weekend to accommodate your needs.
Before committing to a project, make sure you have everything your designers require, nothing throws a spanner in the works than getting half way through the project and then handing over assets that could affect the scope of work.
Most brands have CI guidelines, it’s a good idea to get the latest version and understand that your designer will work with this as reference, if this changes, it impacts the project timeline.
New clients should schedule workshops to educate the designer about what you do, so they are well-informed because they understand your brand.
Unless you are a startup, there is usually lots of information from previous projects, worth sharing with your designer, so that they are better informed and do not make the same mistakes previously made.
IP is not free! Pay for your designers consulting time for better results.
If a designer has taken the time to see you, done research and sent through a proposal, respect their time by at the very least responding to them, even if it’s to turn them down.
Meetings, emails and phone calls are hugely disruptive, try keep them to a minimum as they waste a lot of time.
You are paying for a design professionals time, don’t waste time by trying to be a designer.
You get what you pay for, no matter which way you spin it, you are ultimately paying for a designers time. You pay peanuts, you get monkeys.

My current iBooks reads

I thought I’d share a few books currently on my iPad

HTML5 for web designers – Jeremy Keith
CSS3 for web designers – Dan Cederholm
The elements of content strategy – Erin Kissane
Responsive web design – Ethan Marcotte
Design Professionalism – Andy Rutledge
A practical guide to designing for the web – Mark Boulton
A practical guide to Designing with data – Brian Suda
A practical guide to Information Architecture – Donna Spencer
Adaptive web design – Aaron Gustafson
The win without pitching manifesto – Blair Enns
Essential JavaScript & JQuery design patterns for beginners – Addy Osmani
Hardboiled web design – Andy Clark
Mobile design for iPhone & iPad – Smashing Magazine
How to create selling e-commerce websites – Smashing Magazine
Website owner’s manual – Paul Boag

Digital Monarchy website

We recently launched our new Digital Monarchy website. It was built in html5, styled with css3 and has some great functionality thanks to jquery. We believe in responsive design, so have made sure it’s viewable on desktops, tablets and smartphones. Please feel free to check it out, we think you’ll love it!

http://www.digitalmonarchy.co.za

Friday finds + friendly tips

Just when I thought I was growing tired of things online, (I actually even tweeted that I was bored with the web) Google and a few other companies have dropped some serious bombs and there are now a bunch of interesting things online worth exploring. With all this geeking it up, even an old hat like myself can learn a thing or two, I feel worth sharing with you.

Finds

Google+ launched and has already got 10 Million+ users. It’s still by invite only, so send me your gmail address and I’ll invite you.
If you have email overload, then perhaps Shortmail’s 500 character limit will help. No attachments, no junk mail, no folder management. Just pure text. Claim your name @shortmail.com
Adobe released the Flash Player 11 beta for desktops. This particular build brings with it Stage3D APIs, for “advanced” 2D and 3D rendering, 64-bit support, H.264 encoding, and 7.1 surround sound.
+1 buttons let people who love your content recommend it on Google search. Follow the instruction’s and easily add the +1 button here.
Kevin Rose decided to point his domain kevinrose.com to his Google+ account as it gives him more (real time) feedback and engagement than his blog ever did.
Over 36 000 businesses may have already signed up for Google+ which will launch later this year.
State of the Internet 2011 is an interactive infographic created by Online Schools.
If you like infographics, then you need to visit Visual.ly, the world’s largest community for exploring, sharing, creating, and promoting data visualizations.
Plus buddy analyzes your public Facebook profile and provides recommmendations of who to follow on G+
You can register for DesignSignoff, a new elegant tool for design presentation & review.
For interesting stats and to discover and Find People on Google+
Tweet my Plus is a service to tweet your Google+ posts.

Friendly Tips

Don’t tweet at 2am about yawning, you might have yawned several times tweeting, but no one will be around to respond to your curious questions.
Keep your url’s short by using the Google url shortener
Despite being irritated when receiving calls from blocked numbers, answer the phone, apparently clients might be calling your from PABX systems etc which will block the number.
Create a short URL for your Google+ profile on http://glpl.us
If you are a client, please don’t call, email us so we have a record of our conversation. If we talk, we’ll do it face to face, I promise we play well with others.
Learn how to redirect your homepage /+ URL to your Google + profile like this http://digiguru.co.za/+
Lots of functionality not available in Google+ can be achieved by using Google Chrome’s extensions
If you hit the home button on your keyboard, it scrolls to the top of the browser (Yes, I really didn’t know that)
If you’re not sure what is going on currently on Google+, don’t worry, the hottest topic is currently people are talking about Google+ as it’s full of early adopters.

Responsive Web Design by Ethan Marcotte

The latest book from the clever people at A Book Apart, Responsive Web Design by Ethan Marcotte was not only brilliant to read, challenged how to approach web design in this new way, but it had Ethan’s personality all over it, which kept it as entertaining as it was brilliant.