1. Developer? Make me a website!

    How predictable…

    The number of times I’ve heard this after telling someone what I do for a living is exactly the same as the number of people I’ve told. So you want a website? And you assumed that this would trigger the developer within me. I would run to my corner, head glued to the screen, and type away like a maniac. Within a matter of hours, if not minutes, I will produce your beautiful website; because that’s my job as a web developer, right? Read this entire article and then tell me that you want a website. If that’s still the case, it’s an opportunity that I (and indeed perhaps other developers out there) won’t pass up, my friend.

    It’s crucial to take baby steps if you want to avoid wasting a considerable amount of time and effort. Mine and yours. Whatever you do, don’t skip the first step of identifying the requirements of your website. Not only that, but you must note them down too. I cannot stress enough the significance of documenting everything there is to document. This isn’t to say that you’ll need to end up with a book thicker than the Chinese dictionary. (I did just say not to waste time, didn’t I?) It’s not about quantity but quality; thus defining the key points will be more than enough. Okay. Perhaps I should be more direct. I wouldn’t seek to discourage you this early in the article from wanting a website.

    Base your document on these four questions.

    1. Why do you want a website?

    2. Who is your target audience?

    3. How will your audience be able to interact with your website?

    4. What will your audience be able to gain from your website?

    Your answers don’t have to detail everything to the pixel. You may end up changing your mind as you answer the questions. And we’ll end up having to keep revisiting the previous questions. Remember that time is of the essence. To make things even more clear, here is a rule: the answer to each question must not be longer than one sentence. I am not going to go in-depth of the construction of these questions.

    Someone once said to me: “You can’t build a house without building its foundation first.”

    Let’s process this further to help you understand what I mean. The first question allows me to understand the purpose of your website. If, for example, you only want to get a message across and nothing more, you can take advantage of having a simple, static HTML website. And why does that benefit you, you ask? Well, it wouldn’t take a great deal of time to develop it, for one. Keeping things simple will also decrease the downtime of your website. And lessen the risk of user experience issues cropping up. Now, let’s say that the message you want to get across concerns your skills and talents, which you want to share with the world. As we all know, a person learns new things on a daily basis. Thus your skills will grow and your website should reflect this. The simple, static website we were talking about earlier, will not be the best approach. The reason is that it will need a great deal of code maintenance, which can be tedious.

    For websites requiring regular changes, having a static website is not advised. Of course there is always the option of learning how to tweak the code. Then you don’t have to hire a developer on a continuous basis. But it’s not something to go into lightly. After all, one little missing comma can easily break your website.

    So, what do I recommend instead? How about a website that benefits from server-side scripting? If that sounds a bit technical let me explain: server-side scripting is a web server technology in which we, as users, can send a request to the web server. The process uses scripts to generate dynamic web pages. There is a lot more information on the internet about server-side scripting. Go ahead and take a minute to look into it, I’ll be waiting at the beginning of the next paragraph.

    You didn’t even bother looking into that, did you? And there you were thinking about learning how to code to build a static website… I’m not judging. Let’s just quietly move on.

    The second question is to make sure that you have your website built in such a way that it’s suitable to your target audience. Developing your website is not directly related here; I know that the website will reflect badly on you, and not me, if your target audience isn’t considered. But it would be sacrilege for me to support the existence of such catastrophic websites. It’s called constructive criticism. (Look THAT up.)

    Let me give you an example. Say you want to target a younger audience. What you might hear from me is that you shouldn’t add too many complex features; this might cause confusion for your young audience. To sum it up: I encourage straightforwardness and minimal interactions when targeting a younger audience.

    The third question relates to the task of developing your website, and doesn’t relate to how it should look or behave. Let’s simplify this. Imagine the following scenario: you have the attention of your audience and they are busy loving being on your website. Your goal, no matter what the purpose of the website may be, is to keep the attention of your audience. This can be, perhaps, achieved by engaging them. For example, if your audience can be seen as viewers, the website can function with minimal user action. This would mean that you are leaning towards the development of a non-interactive website.

    Perhaps you prefer for your visitors to interact with you and each other? (My, my, aren’t we adventurous!) Now we’re getting somewhere! In that case, we need to work with more than what a standalone website has to offer. That’s right, I am talking about getting databases involved. This takes us back to server-side scripting. What? Doesn’t this ring a bell? Well, you should have looked into it earlier, when I suggested it. A basic understanding of these things will save you a great deal of time and money.

    Well, look at that. We’re almost finished with the four questions. That wasn’t so bad, was it?

    If your answer to the last question is to keep your users up to date with your thoughts, findings or collection of information. Then we’re talking about fun, fun, fun! My response will be a mere whisper of the one most beautiful word in web development: CMS.

    What is this you ask? CMS is currently my favourite web application. It stands for Content Management System. The words kind of say it all; CMS is a system that helps you manage your content. Alright, all joking aside, CMS is something I would recommend to anyone and everyone. Okay, not to everyone; everyone who needs content regularly updated. Simply because it will ROCK YOUR WORLD.

    And there you have it! Your ticket to an amazing website. It’s now time to explore the many opportunities of making it come alive.

     

    Author: Marfat Abdullahi.

  2. The Shopify e-commerce platform: why and how to use it

    Last week we had the privilege of attending one of the few workshops that Keir Whitaker delivered on how to use Shopify. You might recognise his name if you’ve ever listened to The Back to Front Show podcasts. Or if you know of – or indeed have read – Insites: The Book, which he co-wrote with Elliot Jay Stocks, formerly his partner at Viewport Industries. He’s also a regular attendee of one of the best web-related events I’ve ever had the chance to attend, MK Geek Night; a free event taking place every three months which attracts many of the better-known designers/developers from across the country and beyond.

    What is Shopify?
    Shopify is an e-commerce platform for the creation of online stores. Founded 8 years ago in Ottawa, Canada, it’s become the platform of choice of more than 100,000 active stores, and now employs about 420 people. Last year Shopify doubled its gross merchandise volume (or GMV) reaching $1.5bn.

    Why use Shopify?
    To answer that question we first need to think about the world of e-commerce. Traditionally, e-commerce platforms have not been particularly pretty. Their focus has been, and some would say rightfully so, the functionality of getting you through the process of choosing a product and paying for it online. There are loads of examples of really bad e-commerce sites; like arngren.net, where the clutter is such that you can’t even find any products you might be looking for. Why anyone would use this site, other than to show how bad it is, I have no idea.

    One of Shopify’s unique selling points (USPs) is that it puts you in control of the design of your e-commerce platform, allowing you to choose among hundreds of well-crafted templates – or create your own, and make it fully responsive for the modern era.

    It’s a completely ‘theme-based’ hosted commerce platform, meaning you don’t have to install anything on your machine. It has no dependencies or requirements (except for the need to have at least one layout defined) so, for the coders among you, you don’t need to install any javascript libraries or use any particular framework; and you can go ahead and write really bad code, if that rocks your boat, knowing that it won’t complain. (Although the rest of the world might.) Shopify also uses Liquid as the templating language, which is really easy to use and also degrades gracefully. It looks a bit like this:

    <ul id=”products”>

         {% for product in products %}

              <li>

              <h2>{{ product.title }}</h2>

              Only {{ product.price | format_as_money }}

              <p>{{ product.description | prettyprint | truncate: 200 }}</p>

              </li>

         {% endfor %}

    </ul>

    The double curly brackets are the key to outputting data. As you can see from these examples, you can manipulate data with all sorts of filters using the pipe (‘|’) character:

    {{ product.title | up case }}

         {{ ‘logo.png’ | asset_url | img_tag: ‘Site Logo’ }}

         {{ ‘capitalize me’ | capitalize }}

         {{ article.published_at | date:”%a, %b, %d, %y }}

         {{ ‘style.css’ | asset_url | stylesheet_tag }}

    It also uses dot syntax, which is a very simple way of specifying parameters for variables:

    {% if product.available %}

    Show Add to cart button here

    {% else %}

    Display message —not available

    {% endif %}

    A theme is basically built using HTML, CSS, JS and Liquid; though you could potentially do it all using just Liquid, generating markup or dynamically creating JavaScript or CSS files. You can also use Sass – check out Shopify Timber – though you can’t use @import, which means you can’t rely on helpers like Compass or Bourbon. Instead, there’s a Sass Mixins section that provides some of what you might be looking for in these helpers.

    When you work with many products, things can easily get complicated. Shopify tries to simplify your product-management, allowing you to have ‘variants’ of your product (think different sizes, colours, etc.) This is very helpful when it comes to tracking products, or in situations when you might want to apply a discount to a particular product. It also makes it a breeze to create collections and filter them by type or tags, which helps you relate products too. You can even set your own criteria so that new products which follow that criteria get automatically added to collections.

    Shopify’s User Interface was revamped very recently. The new one might remind you a bit of the WordPress admin interface, with the left column being your ‘toolbox’ where you can find all the features you need. (You can even build a blog with it…) There are also apps that extend the functionality of your shop by integrating with shipping providers, loyalty programmes, SEO, etc. All nicely bundled up in its own dedicated app store.

    But these aren’t the only selling points that Shopify has to offer. For example, Shopify does all the transaction handling for you, and since last year, it “allows merchants to accept payments with VISA, MasterCard and AMEX credit cards without requiring a third party payment gateway” (from Wikipedia). And if you’re a designer you can even take fake payments to demonstrate functionality for a client, which is pretty nifty, in my opinion. You may also choose to join the Partner Programme and become a maker of Shopify shops; or even define yourself as an Expert in whatever field, so that clients might come looking for you. (A little bird tells me that there is a huge niche for Shopify photographers.) Many custom theme builds are going for $10-20k and there are even some theme designers making more than $100k, which doesn’t sound too bad to me at all.

    Some example stores include A Book Apart, United Pixel Workers, Whipping Post, Pure Fix Cycles, Hiut Denim, and 8 Faces.

    I must say, I went to the workshop only half-convinced about using Shopify as an e-commerce platform. But, having learnt more about what it has to offer, whether you’re a designer interested in ecommerce or you have a product to sell, Shopify is probably one of your best options to create a modern shop for the modern era.

    Author: Yago de la Torre.

  3. CSS Frameworks

    Why they’re worth using – and building

    frameworks-header.jpg

    What I mean by a “framework”

    What exactly makes a framework a framework? What’s the difference between a style library, a framework and a general CSS library? Lots of different names and terms are put about. For me, a “CSS library” covers all as a more generic term. A “style guide” or a “design framework” is more like a bootstrap with a UI layer on top and more specific stylings. A “framework” is something in the background giving your project that robustness and foundation. This is where Inuit and similar libraries come in.

    Why you need a framework

    If, like me, you’re constantly moving from one project to the next, you need tools in place to get started quickly. The last thing you want is to have to start at the beginning every time, writing out the simple classes you need for grids, etc. – or even just resetting the CSS. Most people have a tendency to copy and paste from one project to another. At best this can be messy, and at worst dangerous. If you do this, I assume you spend a lot of time later deleting or overwriting stuff that didn’t need importing. A framework gives you a solid foundation to build from. And you can easily customise for each use, choosing just those areas you need.

    Give your projects structure

    All too often in projects, as the time goes on and the pressure to deliver is applied, we find ourselves faced with the idea of quick fixes. This can be seen by the many projects we come across where developers in a rush have placed CSS at the bottom of a file to overwrite something on top, applying random classes – always with the notion of coming back on a rainy day and neaten it all up.

    Having a good foundation gives you the ability to just add that extra class to an element that’s already defined and has the styling you need. You can also move into a workflow where there are separate style sheets for the new objects. You may even wish to create a naming practice for your classes and apply throughout.

    Make it your own

    Your base framework may not be built by you; but that doesn’t mean you can’t extend it for your own personal needs. There is always a point where you have to create the same objects over and over again for each project. So why not change the framework to use those objects? Or, furthermore, extend so that you can turn those objects on and off depending whether they’re relevant to that project? Even if you start with the best framework in the world, you’ll want to make it your own. The possibilities are endless.

    Inuit – An OOCSS framework

    Recently our framework of choice has been inuit.css by csswizardry. (You can find Inuit on github here.) Inuit is a great choice for a framework and a solid foundation to build from. Below I’ll go through a few great features of Inuit. (Most, but not all, shared by other great frameworks.) I thought it’d be best to show you how some of the features of this library have benefited us.

    Use more classes and less CSS

    The immediate difference between Inuit.css and other libraries out there is its use of classes. Inuit’s classes are based on BEM methodology. This can, for your average developer like myself, take some time to get your mind around. If you are really intrigued by this point I advise you to read this great post by Nicolas Gallagher.

    There are a great deal of libraries out there that have vast areas of mixins for font sizes and animations. But these generally all use things like Sass @extend to pull that into your classes. The real key with Inuit is that everything is pre-built in to object-oriented classes. Bootstrap also uses classes, but Inuit’s are not styled. With Inuit you can build out most of the structure of your project without writing one line of custom code.      

    Start with a good responsive grid system

    When starting a build, most of us will start with a HTML structure. And we’ll want to get this right first time. Having to constantly restructure is a nightmare – especially after you’ve applied CSS to that structure. Inuit, like other great libraries out there, has built in a grid system, allowing us to quickly structure out our HTML. But Inuit doesn’t stop there; it also has built-in responsive breakpoints. This means we can target break points easily and quickly.

    Often we find that with responsive sites as soon as you reduce the viewport size the layout and structure will change. So, to counteract this effect, Inuit has the idea of taking the foundation grid system and names spacing it with its media queries.   

    To explain what I mean, imagine you have a grid with three columns. On a desktop this looks great. But then you get down to tablet size and you want two columns wide and the third column to be full-width underneath. Easy: turn on responsive grid system. Now you can apply the “one-third” class and next to it place “portable—one-half” class. When you resize down to tablet all of a sudden the “portable—one-half” will overwrite the “one-third” class. Then you can structure your HTML document for all viewports and once again you have not written one line of Sass!

    Having the ability to target breakpoints with classes and quickly structure in all breakpoints decreases development time massively. You can see your app come together fast, and build for all devices at once.

    Have a custom UI layer

    Inuit does not have a design layer. I personally hate the idea that nearly all Bootstrap sites look the same; having a design layer can easily make you lazy and stop you putting that personal brand on what you’re building. Like Bootstrap, Inuit has all those custom objects built in (like buttons and beautons) but with no design on top. Having no design layer allows you to put your client’s custom branding over the top. I can quickly build out custom styles in object-oriented classes and apply them to my elements.

    Use Sass

    CSS extension languages like Sass give us the ability to do so much more with our CSS. They speed up development and give us the features we need to keep clean, maintainable code in our framework.

    Variables may seem like simple things, but do not underestimate that ability to get you off the ground fast. With most projects you start with a design; that design will contain font sizes, colours and a whole array of set things throughout. Wouldn’t it be great if when you loaded that framework into your project you could go and update a “variables” files? In this file you could quickly lay out all those things.

    Resetting the CSS

    Most developers start their projects with a base layer of CSS. This CSS will most probably be a reset. To get all browsers more or less on the same wavelength, Inuit has normalize built in. Generally, reset libraries do very dissimilar things. Having a CSS-reset is a great idea and can quickly stop you hitting those simple and common cross-browser issues. There’s no need to stick with normalize; you can change it for any CSS-reset. (Or maybe just put in your own.)

    The downside?

    I know what you’re thinking: “Here we go, you’ve built us up to disappoint us.”

    Not really! The only foreseeable downside with a framework is its size. But there are ways around this. Bootstrap’s approach is to let you download a custom build of their library with only the things you need.

    Inuit’s approach (something that you should definitely build in if you extend a framework) is to have a place where you turn those objects and features on or off as required. This gives you the easy ability to go “Oh no, I forgot this!” and just turn it on later. None of the code you’ve chosen to turn off will be compiled and you will have just what you need.    

    Conclusion

    At the top of this article I tried to explain what I considered a CSS framework to be. Frameworks are something we should all be using, and all be collaborating on. Just because we have the ability to start from scratch, doesn’t mean we should. We’d be better off spending our time building the cool stuff on top of our projects that sets them apart from the rest; not tirelessly chipping away resetting CSS or building umpteen grid systems.

    A framework should be a major part of your build setup along with grunt files and JavaScript libraries. Done right, it can be an amazing tool to get you off the ground; I’m sure if you needed jQuery for your project, you wouldn’t set about writing it for yourself.

    I’m sure most developers have some kind of CSS out there they place in every project. So take that time and build it into a robust framework that can benefit you – and others.

    Author: Matthew Fowles

  4. <h1>Learn to code</h1>

    image

    <p>Some online tools that will help you improve your developing skills</p>

    If you work with developers day-to-day and sometimes struggle with the jargon, or if you’ve decided to take the plunge and become a dev yourself, these tools should be of interest…

    treehouse1.png

    Treehouse

    My favourite tool is Treehouse. Treehouse is an online non-stop growing education platform. Its main teaching approach takes the form of video tutorials in which a group of distinguish professional developers cover a wide range of content: web development, programming using different languages, iOS or Android development, and lately even business or soft skills.

    All the courses start from beginner levels and increase as you progress. Videos are alternated with questions and objectives in which you need to prove what you’ve learnt in order to access further content. They have recently developed a workspace where you can practice in-browser, so programs or text editors are no longer needed. Content is being added weekly too, so the library never stops growing.

    Another positive is that due to the points system for completing courses it’s really easy to follow your progress – or indeed your colleagues’. Learning can became a little competitive. (See? Coding is fun!)

    The main advantage of Treehouse is that they use videos; visual learning is more effective than reading for many.

    The only downside is that it’s not free; but such a great learning platform well deserves paying a membership. And there are a few free courses where you can try before you buy.


    codecademy.jpg

    Codecademy

    A free alternative to Treehouse (although the content covered isn’t so wide and its courses are purely focused on web development), Codecademy uses a totally different approach. Instead of explaining the concepts by using videos it uses a “learn by practising” methodology.

    The screen is divided into three sections: the main one is a text editor in which you write the code for solving the different problems they suggest to you; on the left is the theory and instructions for each exercise; and on the right side of the screen you can preview the results of the code you have just written using the text editor.

    It also has a points-and-badges program which rewards your perseverance while learning, tracking the days you’ve coded and the days on which you’ve obtained the most points. You’re not going to create a competition with your colleagues, but there is no better rival for learning than yourself.

    Codecademy doesn’t cover as much as Treehouse but would definitely be a preferred tool for those who find it easier and more enjoyable to “learn by doing” – actually coding instead of reading or watching videos.

    And last but not least,

    CodingSchool.jpg

    Code School

    Code School. Another “learn by doing” online teaching platform, it’s not for free but there are some free courses available.

    In Code School there are two ways to improve your learning: following a path, or choosing the courses you’re interested in and (literally!) charting your own course. All the courses are grouped on five paths: Ruby, JavaScript, HTML/CSS, iOS and Electives.

    The approach here is a mixture of the other two tools’, using videos for explaining the theory but also providing plenty of code challenges you can complete directly in the browser as well.

    Code School has the funniest interface of all them; all the videos start with a song and they try to make you feel like you’re playing a game each time you start a course, mixing videos with an interactive console and writing code into your browser, etc.

    I’d like to go deeper, but as yet I’ve just tried the free version. All I can say is that, as far as I’ve used it, I have the feeling Code School starts from the basics (maybe even too basic for some people) but also has the videos and challenges with the biggest game-component of all the platforms, which I find to be very enjoyable and conducive to learning.

    Becoming an expert

    If all this new knowledge has stirred up feelings of determination inside you and you’d like to get more involved with the developing community, the next step is to visit two absolutely essential sites: Github and Stack Overflow. Then you can start sharing and learning from other colleagues online.

    GitHub is the world’s largest open-source online community. It’s based on personal repositories published online where everybody is able to collaborate on the improvement of the code.There are also forums and wikis where you can find the answers to your problems or keep up-to-date on your coding skills.

    Stack Overflow is not an online repository as such, but it’s a huge community online that works on a question-and-answer basis – making it the best place for getting trustworthy information.

    Other links to keep in mind, as they may be a great help at some point, are:

    1. CSS-Tricks, great for making your sites look pretty using the best CSS.

    2. HTML5 Doctor, an online resource for knowing everything about HTML5.

    3. Can I Use, a site that’ll help get your code working properly in the browsers you need.

    Learning web development is now available to everyone.

    What are you waiting for?

    Author: Ana Cuesta Biel.

  5. The Internet’s Lost Colours

    A short interlude into why Facebook is blue, why I never know if my football team has lost or won, and how a simple tool is going to save your client thousands of pounds.

    Growing up I never realised that I had a colour vision deficiency. Diagnosed with Deuteranomalous when I was very young, it didn’t limit me in any way; I just didn’t notice. In all honesty, I had forgotten about it until now.

    A few days ago, during our daily team banter, one of our technical directors mentioned a free simulator visual deficiency tool called Color Oracle. The tool simulates in real-time how people with a colour vision deficiency see. I was fascinated mainly because I vaguely remembered that I might be colourblind.

    I took an online test called Ishihara (I recommend you try it out, it only takes a few minutes). Within minutes it confirmed my forgotten truth – I am colour blind. Staring at test plate after test plate, I couldn’t see the numbers, with my colleagues looking on perplexed and with interest.

    At Cohaesus we get to implement the carefully crafted designs and UX of many leading agencies but I am not sure colour-blindness gets the consideration it deserves.

    We all know that building highly accessible websites is best practice, but how many designs are tested using tools such as Color Oracle? Not many is my guess.

    A good example of missed testing is from the BBC – somewhat surprising given their reputation for championing accessibility.

    image

    Above: Normal colour vision

    image

    Above: Deuteranopia vision via Color Oracle

    The table is quite clear and I can read all the information easily. The problem occurs for me when I view the last 10 games played by each team. I cannot clearly view the difference between the colours red and green used in the table. The indicator icons used are way too small, resulting in low contrast for someone with a colour vision deficiency like mine.

    Another example that affects me when visiting websites is in selecting colours with colour-picking tools (e.g., personalising the design on Twitter). Did I really want the colour I selected, or select the colour I wanted?

    Online forms can also affect me when incorrect or incomplete fields display errors using red or green text. The impact of ignoring color deficiencies starts to ramp up in these scenarios.

    Now you might be thinking “What’s the problem? After all, it’s only a few people.” But actually, the numbers may surprise you. Colour Blindness is very common globally, with 1 in 12 males and 1 in 200 females being affected. According to Colour Blind Awareness, almost 2.7 million people in Britain (4.5% of the total population) are colourblind; of which the majority are males. Apply this to the recently released figures for Q4 2013 by Office of National Statistics, which show 87% (approximately 44.3 million) of the UK’s adult population use the internet, and that’s roughly 2 million internet-users who are colourblind in the UK – all of whom will face difficulties when visiting websites.

    What’s the cost?

    Assuming you have some type of funnel, arbitrarily your abandonment figure is 60%. Up to 4.5% of that could be due to issues with the experience related to color blindness. Assuming 10,000 visitors start the funnel, that is approximately 270 lost conversions!  

    Now this is some napkin maths. But for a few minutes of extra effort integrated into your design and build process, you could potentially recover a significant amount of revenue for your client. Obviously, your mileage will vary.

    The fix?

    Simply add a tool like the Color Oracle into your standard usability testing. If you are a project manager/producer, add it into the UAT testing too, just to make sure. Most fixes are pretty simple to implement and better done before go live.

    Oh, and why is Facebook blue? It turns out that Mark Zuckerberg is colour-blind.

    Author: Deepak Ark.

  6. Yikes! We entered the Sport Relief London Mile!!

    We are really excited to announce that part of the Cohaesus UK team will be participating in the Sport Relief 2014 event on Sunday 23rd March at Queen Elizabeth Olympic Park. Sport Relief is the biggest fundraising event in the UK designed to bring the entire nation together to participate and raise funds for people who aren’t as lucky as us both in the UK and other parts of the world.

    Our team will take part in the running event called ‘The London Mile’. Given the options of running 1, 3, or 6 miles, we all must be crazy as every team member has chosen to run the longest run of 6 miles! Our target is to raise £1,000.

    We all know it isn’t as easy as it sounds, so preparations are well underway to ensure the event is completed by everyone. We are really looking forward to the run and knowing that we can contribute to make someone’s life a little better.

    Please do sponsor us, via our Cohaesus team mile page: http://my.sportrelief.com/sponsor/cohaesus

  7. Which Web-Design Trends Will Rule 2014?

    image

    There are many elements to a great design. A sure-fire way to make your site look clean, contemporary and up-to-date is to jump on the bandwagon and copy a trend that’s being used by the top brands.

    In this article, we’ll take a look at web-design trends that are likely to dominate 2014. They may not all be entirely new, but they are all highly likely to reach mass-usage this year.

    And if you think we’ve missed out any key trends, please feel free to leave your tips in the comments below.

    Flat Design

    Flat design has been around for a while. In fact, Dieter Rams’ designs since the ‘70s follow many of the same principles. Said principles have been in use in digital for the last few years, with Windows 8 as the stand-out example.

    However, it really didn’t reach trend status until apple released iOS 7; now a significant proportion of the PSDs we’re sent by our clients have dropped the drop shadows and gradients.

    Flat design is non-flashy; the text is concise and to the point; the buttons and links are clear and noticeable. This more minimalist approach can help users easily find what they’re looking for. Making websites user-friendly should be on top of every company’s agenda, and flat design, when used well, can go some way to meeting these requirements.

    Responsive

    We delivered many responsive site-designs throughout 2013, and the tools and methods to build them have matured in a short space of time.

    It’s difficult to say that this is a ‘trend’ in a way (or limit its influence to one year) as it such an important development. Retailer John Lewis recently reported that over a third of their web traffic on Christmas day 2013 was from mobile and tablet devices.

    That said, it’ll still be one of the most important factors being considered in site design in 2014. We’d even go so far as to say that any site built in 2014 that doesn’t consider mobile (which means at least some responsive too) is a failure.

    Video backgrounds

    With more powerful web-browsing devices and faster internet speeds, online video is inevitably becoming more important. This is moving beyond an embedded YouTube player on a page, and seeing video being more deeply embedded into the site experience.

    This trend probably isn’t suitable to serve all types of projects, but we still reckon it’ll be huge in 2014. The Variousways website is a perfect example to showcase what can be achieved with this: http://www.variousways.com/

    Richer content

    Users have higher expectations from websites they visit nowadays. Providing richer content experience will be vital in 2014 to ensure companies can engage well with the audience and continue to attract a high volume of traffic.

    A combination of audio, video and animations along with many other digital elements ‘richer content’ allows web designers to provide visitors with an extraordinary experience. The Kennedy and Oswald website provides a great example of the richer content experience: http://kennedyandoswald.com/

     

    Author: Deepak Ark.

  8. 7 Top Tech Tips for 2014

    What to expect from digital tech, and how it will affect your agency

    image

    As 2014 unfolds, all eyes are on digital tech; with people across the globe eagerly awaiting the newest innovations from one of the world’s most progressive and exciting industries.

    Fierce competition, consumer demand and company pride all drive the world’s leading companies to keep pushing for newer, better technologies – from Amazon’s flying drones to Apple’s iWatch, 2014 certainly shows promise.

    This year, we’ve gathered the highly experienced Cohaesus team to offer their tips on what to expect from 2014, and how innovations might affect agencies.


    Richard Bundock (Technical Director – Enterprise)

    We all dislike corporate IT. When you’re trying to get a project delivered, their slow speed and silod culture tends to drive us and our agency clients mad. Deployments of updates and new projects can be extremely difficult. For 2014, I hope (and predict) to see corporate IT embracing development environments in the cloud, which will reduce a lot of complexity, and some cost, for our agency clients.

    With cloud-based development environments, agencies can quickly get their code deployed into production/staging sites allowing faster feedback and a better service. All we need is corporate IT to embrace and enable this.


    Matt Meckes (Technical Director – Creative Coding)

    2014 will be the year that virtual reality finally breaks through into the mainstream. Although this technology has been touted as “just around the corner” since the ’90s, the latest offerings are finally starting to give a compelling experience.

    We’ve already started to see the potential of combining hardware like Oculus Rift, and gesture-based controllers. A great example in 2013 was PaperDude. We now just need a really smart team to come up with a killer implementation, and the tech will fast find its way into everyone’s living room.


    Mark Pynen (Technical Director – Support & Maintenance)

    Digital currencies and wallets will gain more traction and mainstream acceptance in 2014.  Bitcoin is easily the digital currency with the most awareness as it currently stands; and more and more practical uses for it will continue to increase over the next twelve months as products and services begin to accept digital currencies as payment.

    Digital currency will be making lots of headlines in the coming year, on topics ranging from regulations and legality to security and volatility.  Bitcoin in its current form may not manage to remain the dominant digital currency as alternatives continue to emerge, and digital currencies may never become the currency of the future; but one thing is absolutely certain – digital currency in one form or another is here to stay, and it will be big news in 2014.


    Marfat Abdullahi (Developer)

    The much-anticipated Amazon drones (or Prime Air as they’re marketing them) will influence the market tremendously. Products at your doorstep in 30 minutes will surely change the world of online shopping, as long as Amazon delivers.

    It’s been claimed that a drone can cover areas within a 10-mile radius of their distribution centres; what better way to grab the attention and the curiosity of consumers than a flying drone? This is certainly an opportunity to take advantage of exposure to a large amount of population in a short time, and in targeted areas. I am convinced that the idea of drones will spark the creative ones to take this chance and bring in new and exciting ways of entertaining an audience too.


    Ana Cuesta Biel (Developer)

    Hybrid cloud will change the way business are run, and in 2014 it will be widely used.

    We’re used to the concepts of public cloud (open to anyone) and private cloud (open to an organization); but, according to Rackspace, the future which has already started is the Hybrid Cloud, which consists of public cloud, private cloud and dedicated hosting, all together.

    They defined DevOps as the culture and work methodology that uses a set of tools and deployment strategies to automate all the processes. Some of them are already widely used (GitHub for coding, Jenkins and Gerrit to automate testing, etc.). The hybrid cloud will be key to this change, which will embrace all the DevOps.


    Jose Terrones (Developer)

    3D printing has been a much-touted trend for the last few years. Mostly it’s been used for hobbyists, or very high-end uses, as the cost has been astronomical.

    But I really think that 2014 will be the year where 3D prints have an impact on the wider market.

    We can already see in CES that 3D printers are covering more markets, such as the food, jewellery and gaming. There are already  a few companies where you can orders high-quality products online to be printed for competitive prices.

    This is a great opportunity for brands and agencies to create bespoke, customised products, at reasonable prices. There are many ways this tech could be used in really interesting and creative campaigns. Watch this space!


    James Hunt (Creative Technical Lead)

    This is the year for wearable tech. We saw Google Glass come and go, with very mixed reviews, with the majority being bad. There were also a few other pieces released, such as fitness trackers. But I think this year companies will start to release things that really do change the way we interact with everything and each other.

    These new bits of tech will bring benefits to both our business and social lives. With the ability to make us more involved with our online worlds, while at the same time freeing up our hands to get more involved with what it is we’re doing.

    Author: Deepak Ark.

  9. Digital Project Technical Teardown: British Airways Look Up Campaign

    image

    The web is full of teardowns of consumer electronics but digital projects don’t really get a look in. We thought we would produce an occasional series of blog posts picking apart how a recent digital campaign may have been created.

    For this inaugural outing we are going to “tear down” the wonderful British Airways “Look Up” campaign:

    It’s a great creative idea and the industry press have been keen to feature it. To recap, digital advertising displays show an advert for British Airways (BA), the advert is interrupted with a child pointing to the sky when a real BA jet passes overhead. It’s a great effect.

    No one gives much away about how it’s done, and the The Drum article describes the tech as: “custom built surveillance technology” which sounds very intriguing (and almost illegal). The DailyOoh points out that: “A weather feed reads the cloud height to ensure the plane is visible before showing the advert. The messaging of the creative will change depending on which plane is above the Towers, with the destination of the planes influencing what content is displayed.”

    We gathered our teams of technical directors and technical leads together to look at how you might put a similar campaign together.

    The core challenge on this project is to make sure the creative is timed accurately with the plane in the sky. A few solutions:

    1) Precalculated Data: One approach is to load the flight times into the computer, driving the display and then approximating when the plane will be above the display based on the flight time. We discounted this option as sometimes flights could be running late (or early). At least we hope they aren’t doing it this way, as it’s not very exciting.

    2) Real-Time Data: There are a couple of ways to get real-time data, different only in their accuracy:

    a) They could’ve used real-time data from the flight information system at the airport. This is available via a commercial API here. Again, this data is near-real-time as so some calculations and assumptions would need to be made;  

    b) Data could have come directly from BA. We discounted this option, as in our experience, asking an end-client to provide such data will typically take a long time for their internal sign-off and work to be scheduled;

    c) So, our favourite option was to to use data directly from the planes, and this is the solution we break out a little further below.

    Real Data from Real Planes

    Currently, 60% of European planes transmit details about their location, speed, altitude, flight number, etc. All this is sent through the air to anyone who is interested in receiving it. In fact, air traffic control are moving to use this data rather than radar when managing our airspace.

    To receive this data, you need a £20 USB TV Receiver and some open-source software which converts the signal into a nice text stream. The receiver can be upgraded for better reliability by adding an additional antenna for £50. A custom application needs to be written to take the text stream and match the data to BA flights. (Remember some flights BA might not actually want to display.)

    Once you have the flight number, location and altitude, it’s simple a case of some maths to work out the average view of the location and match that with the video of the child pointing; triggering the interruption at the right time.

    System Architecture

    The next big question is around architecture. There are many ways to deliver the project from this point of view, and the solution should be based around the requirement for control, maintenance, upgrades. Being able to upgrade and control the logic for the displays remotely is extremely appealing and possibly necessary to deal with any atypical events.

    The display provider will dictate this part of the solution to some extent.

    Fallback

    The fallback is pretty easy in the case of issues with the feed, the display continues but without the interruptions about BA planes nearby.

    Other Ideas?

    So this use of transport data gets you thinking; perhaps an agency might try this with train data or bus data soon?

    We hope you enjoyed our inaugural digital project teardown. Let us know which digital project we should cover next via hello@cohaeus.co.uk.

    Author: Richard Bundock.

  10. Does my digital project need a specification?

    image

    Most agencies don’t like specifications. They’re cumbersome, they’re not very visual and they take too long to write. What’s more, most digital producers, project managers and developers haven’t really had any experience in writing them. If the agency doesn’t have a Technical Director, this can be even more of a challenge.

    Nevertheless, a lot of brands have internal processes which demand specifications are written and submitted. Often a project won’t be able to progress brand-side without a specification. That’s not such a bad idea, as specifications help everyone think through the project before too many resources have been committed.

    I have written my fair share of specifications for agencies and continue to do so, and I hope by sharing some of my biggest learnings I can help you.

    There are some good how-to guides about writing a specification, which I’ll link to at the bottom of this article. I won’t repeat what they have to say, but here are a few important things I have learned to take into consideration before you get started:

    1) Level of detail

    A specification needs to be just detailed enough. Where is the line drawn? It’s difficult to say, as it really depends on the audience. Get the spec level too low and you’ll end up with something that raises more questions than it answers. Too detailed and… well here’s a story about that:

    “One of our agency clients, giddy from landing a global financial brand to their client list, set off to help them develop a web-based application which would add value to one of their financial products. A great idea. The agency got their crack UX team on the project and before long a 20 page annotated wireframe was signed off. Everyone was happy and the project began. A short while later, the main point of contact at the brand moved to a different position and the brand appointed a Business Analyst from their IT Group to take over the requirements of the project. Within weeks the simple annotate wireframe had morphed into a 100+ page functional specification. Within months, it was up to 200+ pages. The functional specification was beautiful: a work of art, describing what the annotated wireframes had before, but in a lot more detail. It had a full traceability matrix, appendixes, cross-referenced requirements. So much detail, in fact, that the project budget was blown out the water. But how? The two documents described the same thing. But they described the same thing at two vastly different levels of detail. More detail is not always good.”

    2) Audience

    Specify the audience and make them do some work before they read the specification. Something like:

    The audience for this document must be familiar with {list of documents} and with the {existing system, etc}.

    3) Clear keywords

    The best practice way to identify requirements in the spec should be to use the standard words MUST, SHOULD, MAY as defined in the somewhat wordy but useful “Key words for use in RFCs to Indicate Requirement Levels” in RFC 2119.

    4) Clarity and brevity

    Don’t make it too wordy. Lean on the designs if you have them and the wireframes if you don’t. If you don’t have designs (flats) or wireframes – and this system has a visual interface – get them before you start. There is nothing worse than the specification grossly out of sync with the wires/flats.

    5) NFRs

    Non-Functional Requirements (NFRs) are better referred to as Systemic Requirements because they capture the requirements of the system rather than it’s users but NFR is the most used term.

    Almost every agency, if they have already written a specification, pays little attention to this area. NFRs define how the system (site/app) deals with interaction outside of what we all think of as functionality. For example, must the system cope with 1,000 concurrent users? How quick should the homepage load? How far back should backups go? All these items are good to ask, but again be careful – every additional requirement requires more budget than just the development and project management time. But not asking these questions can place the project outcome in jeopardy. Remember to ask for the traffic plan from the client, and if one isn’t available make some educated guesses from previous similar campaigns.

    6) Walk-through

    Every specification needs to be walked through by the key people on the project. It’s not enough to simply send it round for review. Get the key people in a room, and go through it page by page. Get these scheduled into the timing plan.

    So if you find yourself producing a specification, remember the above: especially the level of detail. In the agency world you need to move fast, and delivering an overly complex specification won’t help you; but getting the balance right is a very hard task and needs your full attention. Remember that without a specification your project will probably cost more in reworking than without.

    If you want to find out more about writing specifications, here are a couple of good places to look at:

    1.     http://www.joelonsoftware.com/articles/fog0000000035.html

    2.     http://www.its-all-design.com/what-actually-goes-in-a-functional-specification/

    About Cohaesus

    Cohaesus is the technical partner of choice to some of the worlds leading creative, advertising, marketing, communication and digital agencies. Based in London, we advise, architect, plan, build, integrate and maintain some of the best digital campaigns, applications and sites.


    Extra Skills - Extra Thinking - Extra Capacity - Extra Resources


    Author: Richard Bundock.