Makemedia are proud to see the launch of the Classified Platform for Reed Business Information brand Farmers Weekly. Find out more about our latest project…
Farmers Weekly Classified provides a revamp to the design and functionality of their online listings for used farm machinery and equipment; which means an improved experience for both buyers and advertisers.
The new site utilises responsive web design to target mobile users, providing best experience for both buyers and sellers on a range of devices.
Tony Hill, Marketing Managerat Farmers Weekly said:
“We worked closely with Makemedia on the new look layout and made improvements to the search functionality. It allows our agricultural and farming professionals to easily find listings that are relevant to them. It is also quicker to post ads; this area has had a major overhaul to improve navigation and make it easier.”
Do you want to incorporate a classified listing or directory into your online offering? Speak to Makemedia to find out how this could work for your business: call 0845 017 8777 or email email@example.com.
Among the promises to lose weight, cut down on the red wine, or travel more, you may have put together some business resolutions for the new year. Perhaps in 2013 your organisation will finally take the plunge and embrace HTML5. But where to start?
The HTML5 specification encompasses all manner of exciting web technologies, but these can appear intimidating to those deciphering the benefits without technical knowledge. A great starting point for those taking their first steps happens to be the most familiar aspect of the spec: markup.
HTML has been around for some time (published specifications first appeared in 1995), and refers to the simple tags used to give structure and meaning to content on the web. Paragraphs surrounded in <p> tags, a list in a <ul> and so on – all familiar to anyone publishing on the web since the last century. HTML5 adds a host of useful new tags, allowing for even more meaningful markup around your lovely content.
Whereas more generic structural elements such as the age-old <div> gave little indication of the content encased, a host of new elements allow for more thoughtful page structure. Even previously tricky customers like audio and video with their endless formats and embed codes benefit from simplified, standardised markup in the HTML5 spec.
Lean, and meaningful
Added semantics are useful for content consumers (search engines, screen readers, or even humans), but have development benefits too. The more meaningful, readable nesting of HTML5 markup can afford more ‘hooks’ for developers to harness without adding extra weight to their code.
Leaner code can reduce loading times, another boon in an era where speed is paramount, particularly for devices where connection speed can be limited. Functionality such as form validation can now be handled through HTML alone where additional server-side scripts may have been previously required.
Ready or not?
At Makemedia we’ve been using HTML5 markup for nearly 18 months, including some of our largest projects. Although not as ground-breaking as some of the more attention-grabbing aspects of HTML5 (Graphics, Online, File Access) the new markup is reliably supported by all modern browsers. Where support is lacking, there are a number of widely used techniques to force older browsers to play nicely.
The learning curve for the new markup is relatively shallow. There’s no shortage of great resources to check you’re doing things properly, and these have been hugely helpful while the Makemedia team have been familiarising ourselves with the how best to apply the new markup.
If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email firstname.lastname@example.org.
Recently, Makemedia designer Ben Scammels spoke at UX Camp Brighton on the subject of Design Processes and Prototyping for Responsive Web Design.
You can hear the talk in the video below, where Ben contemplates the challenges of designing for Responsive Web Design projects and how Makemedia overcame them. There are also some handy tools for prototyping for responsively designed websites.
If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email email@example.com.
“In an average week, 13.3m users worldwide use their mobile or tablet to visit the BBC News site and apps – around one-third of total users to BBC News Online.”
We have noticed the same trend in our own website visits with an increase of 64% from mobile visits year on year – with this in mind, we’re in the process of a responsive redesign which will go live in 2013.
It’s worth noting that the BBC news mobile website is not responsive, rather an adaptive design which enhances the mobile experience depending on the capabilities of the user’s device. The BBC team chose this route of progressive enhancement in response to the vast range of browsers used to browse the site:
“We have ~80 significant browsers / operating system combinations regularly using our application across the globe and a long tail of hundreds more… So this is the conundrum of our project from a technical perspective. How do we continue to support the vast number of older and less capable devices while delivering to our brief of creating a world class news experience tailored to smart phones and larger resolutions?” BBC Responsive News Blog
The BBC built a simplified website that would work for the lowest common denominator (IE6), and then add layers of improvement depending on the device used. By identifying the browser, it’s level of feature support and connection speed, the BBC then service enhancements to the UI complexity based on the detected capabilities.
Adaptive design techniques are often used in conjunction with Responsive Web Design. Whereas Responsive websites adjust layout based on viewport size, applying the progressive enhancement ethos of adaptive design brings an extra layer of optimisation based on device capability. Those who can’t benefit from the extra enhancement are still delivered a good baseline experience for their device. The video below shows how the responsive design of the Infrastructure Journal Online website works to deliver optimised navigation and layout depending on the user’s screen size.
How can a responsively designed website provide better ROI?
Responsive websites are designed to be device agnostic and can save on development costs (as this is one build as opposed to building multiple Apps for devices) and can communicate a cohesive design no matter what device they are accessed from, therefore providing a better experience for users and more value to subscribers.
However, projects such as this should be judged on a case by case basis; truly understanding all aspects of a business and their targeted audience could mean you oversee an alternative – and potentially more appropriate – solution. Although demand for app development as a mobile solution has been extremely popular, it is an example of a technology which may not be appropriate in all cases. Responsive web design allows organisations to cover a greater user base by using technology most modern devices understand, although web technologies cannot utilise all of the hardware on some smartphones and tablets like a native app. Whether web or native is appropriate for you will depend on your businesses audience and goals.
Businesses with an online presence should be aware of competitors who are beginning to offer a better web-based mobile experience using Responsive Web Design. Where a business relies heavily on website visitors as a source of revenue (either through selling services and products, data collection or advertising to them) an un-optimised experience risks users jumping ship for better mobile options with competitors.
Examples of large scale responsive design websites
In conclusion we are seeing more and more big players relaunch their websites responsively, either as a whole or in parts as a staggered rebuild. To do so is to meet the needs of your mobile users, increase your ability to generate revenue from those users and set yourself ahead of the competition.
If you would like to learn more about the Infrastructure Online project or how Makemedia can help you with you mobile strategy or large scale website build please do get in touch by calling 0845 017 8777 or by emailing firstname.lastname@example.org.
Firstly, a big thank you to the organisers of both events; I feel very lucky to live in a town that holds a month long digital festival. It’s particularly useful to hear from and meet other marketeers, especially if, like me, you work in a small or one-person marketing team. It’s a chance to bang heads and discover some new tips and vantage points that will benefit your own marketing strategy. I would recommend BDMF for all round marketeers looking to build up knowledge across new areas. BrightonSEO is more specialist, although they do invite speakers from other areas of expertise such as UX and even linguistics (e.g. Lynne Murphy, who was particularly amusing). It didn’t seem quite as controversial as previous years (reference: angry blog 2011) but there was a whopping turnout of attendees (circa 1500).
If you want to listen to all the talks you can expect to see them up on the websites soon. In the meantime, here are my top takeaways from the events.
1, Don’t waste your speaking opportunity by turning it into a full fat sales pitch.
It takes guts to get up in front of a room full of people and present your ideas and the speakers are brave to do so. However, spending 40 minutes slapping your listeners in the face with how great your company is instead of speaking about something that will inform and benefit them will bore and annoy your audience. Instead, focus on providing information that is of value to listeners, whilst reflecting your expertise. It will be obvious from this that you would be a knowledgeable supplier.
2, Useful tools for links and referrals
Thanks to Berian Reed (Berian Reed’s presentation slides) for these tips. Copy and paste is still the top way data is shared. You can use TYNT for automatic link attribution when users copy and paste from your site.
Mobile mobile mobile! Yes, it’s the “year of the mobile” (again).
Alex Meisl wisely advises to consider you mobile audience not the mobile device, therefore avoiding jumping on the App bandwagon. Aleyda Solis advises a mobile first design, which has the added benefit that what you end up with on your screen is cut down to the most essential information.
The Makemedia mobile website is in the making presently so keep your eyes peeled for a future launch.
4, The future for mobile (according to Alex Meisl)
Mobile specialist Alex had some interesting points to consider regarding what aspects of mobile marketing are more substantial.
NFC (although the new iPhone does not have NFC capability so perhaps this is still some time away from becoming ubiquitous)
Location – in a saturated market locative marketing can give you the edge.
SMS – although we were discussing at BDMF how unwelcome SMS marketing can be intrusive, annoying and possibly damaging to the brand.
Image recognition – I’m excited to see how both image recognition and the semantic web will develop as surely this will change how we use the web forever!
5, Images of people in your marketing are important.
Marc Munier advised that when you use images of people in your marketing they should be looking at the thing you want your audience to look at – your great offer, call to action, etc.
6, A few tips for your PPC campaigns…
Nikki Rae reminds us to ensure you have the correct time zone selected in both your Google Analytics and Adwords accounts for accurate reporting (edit profile settings to do so).
Setting up a group on LinkedIn is effective but a lot of hard work so instead you can target PPC campaigns on the site to those groups – James Faulkner has seen returns here.
James also reminded us to include links in PPC ads that will allow users to call directly from mobile phones and tablets.
7, Making an impact with your marketing is the most important step!
Dave Trott gave us all something to think about with his talk on “Predatory Thinking.” In a saturated market 90% of ads fail (probably more). Using the example of asking Mrs Trott for a cup of tea, effort is being exerted like this:
Dave Trott’s triangle illustration of where energy is often allocated by advertisers.
Often, the majority of effort goes into persuading. However, if you make no impact then no-one will notice the ad anyway. Communication is still important because if you don’t start the conversation there will be no opportunity to persuade. Therefore, we need to turn the triangle on it’s head as getting noticed is the most important step.
Dave Trott’s triangle illustration of where energy SHOULD be allocated by advertisers.
Dave also told us that the brain picks out what is different so you need to make your ad →stand out← to be remembered.
On the other hand, Allister showed us how you can use this theory to trick the brain. Product listings are often similarly designed to look the same (see below). The consumer will generally go for the mid-price option thinking this is the best option.
Deja vu design
Simon Penson explained that when scheduling content strategy you should utilise peaks and troughs. So you can use regular items – serialised content, top 5s, quick tips, etc. – and then less often you will have your “big bang” content – such as your press and TV campaigns.
“Do you want to evoke an emotional reaction or a rational act?”
You will be designing your marketing differently depending on this. Your product or the essence of your brand will define which one you’re going for.
10, Delight comes in small doses.
Small surprises can really lift our mood! Small gifts, things we didn’t expect, even working out a puzzle in an advertisement or logo – it’s the little things that matter. Allister used the arrow in the FedEx logo as an example:
The Fed Ex logo is an example of a hidden visual puzzle and also a visual signal of what they do – getting something from somewhere to somewhere else.
So that’s my top tips. Please do add to the comments if there are any particular tips that you would like to add and if this article was useful to you please share.
Writing a good brief doesn’t need to feel like this! Clear and concise is best.
Starting with a clear brief is the first step to a successful project, whether that is a website build, a training simulation or any kind of web application. It makes life a lot easier in the long run to get it right first time – and time is money! There are many articles and brief templates out there that are a good starting place, however there a couple of things that seem to always get missed or thought about later on the project that should be considered up front.
So here are Makemedia’s suggested top 5 items you may have forgotten to include in your brief.
1, What is your content strategy?
Although it’s important to consider what your website will do and who it aimed towards, many brief writers forget to consider the nitty gritty of content. Who will export the content from the old site or who will be writing your new content? Do you need to use an external provider for copy writing or to review SEO quality? Will all the copy be ready by the go live date? What are your deadlines? A web build that is held up by late content is going to eat away at your budget.
2, What is your mobile strategy?
It can be a mistake to jump on the “lets-build-an-app” bandwagon without considering the true needs of your business. Clients need to consider their own unique aims, then how these would be best served. This may be by building an app OR a responsively designed website may serve these needs better. What is essential is that you consider your mobile strategy to extend the relevant life period of your investment and remain competitive.
3, Who is really the decision maker?
If you don’t clarify who really has the sign off on the project there is a strong chance you will be wasting your time and budget later on. Imagine the following scenario. The head of department gives a department manger the responsibility to sign off phases of the project. The manager is happy with a phase and signs it off. However, when the head of department sees it later they want changes. To implement the changes at this stage is far more costly than to have done it before the sign off where time is built in for amendments. Either the manager needs to have full culpability for the project or the head of department needs to be identified as the true decision maker.
4, Don’t be shy about your budget.
You might not want to give an exact figure but even a ball park range will help to identify that you are approaching the right size of agency and set expectations. Having a full proposal written up for you from an agency that is far too expensive or not well resourced enough to serve your needs will waste time on both sides. The scope of what you want to do could be highly varied with many different possible solutions but a good agency will give you the best possible solution to fit your budget – and they will want to work with you again in future so giving you the best value is in their interest too!
5, Keep aims and objectives clear throughout the development of the scope.
Your brief should communicate clear business objectives and the critical success factors for the project. Anything added to the scope should lead back to these aims. Have a colleague read through your brief to check that it is clear and concise. Are you communicating what you are trying to achieve to a new potential supplier who hasn’t got to know the business fully yet? Naturally, a good agency will be practiced in extracting this information but it will save you time during that process. Save even more time by ensuring that your internal team all understand the project aims so you can relax in the knowledge that your team are communicating your needs correctly.
Please do add your tips in the comments!
If you are looking for a supplier for a website, simulation or other digital project please get in touch on 0845 017 8777 (select option 1) or email us at email@example.com.
The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (app) downloads, motivated by a number of factors, including the perceived improved user experience, performance advantages, and ability to utilise hardware features.
The advantages for publishers of the marketplace ecosystems provided by each manufacturer include improved findability, and the potential for profit-making by taking a percentage of download cost for paid applications or content subscriptions.
The lure of apps is easy to grasp, with layout, navigation, and typography optimised for the specific screen size, big or small. The boom in app popularity has seen a number of organisations simply translate their website content into downloadable applications, moving e-commerce, editorial, and social platforms from the browser, directly onto their user’s hardware. Even though many of these applications replicate content available from the same organisation’s website, they prove enormously popular with consumers.
Although the quality of their design varies, good smartphone and tablet applications deliver content in a way which does not require a user to work hard to get to the content they need. No need to pinch and zoom to scale up page content, no waiting for unnecessary page elements to load, and no need to battle with navigation designed specifically for a desktop user. Choosing an app over a website is often the pain-free choice.
The New York Times website viewed on Mobile Safari (Attr: Robert Scoble)
However, although app’s can be a viable solution for organisations wishing to optimise their content for portable devices (depending on their objectives and technical aims), there are potential pitfalls.
Producing multiple apps to ensure coverage of the most popular hardware can add to development overhead, and this often means production effort may be limited to a defined number of devices. Market share is spread among a plethora of smartphones, tablets, and e-readers, so a percentage of any potential audience is lost.
Updating device specific applications can increase development effort and cost depending on the language employed, and add to the intrusive load of updates served to users. In addition, new arrivals to the marketplace may prove popular enough to justify additional investment.
Like VHS, CD-ROM’s, and DVD’s, apps have a best-before date which is hard to predict. As new formats bloom, new hardware launches, and application eco-systems change, so the software developed specifically for these devices will one day reach a point at which they are incompatible with the latest device or operating system.
The ecosystems within which applications are managed by hardware and software manufactureres (such as the Apple App Store) mean a percentage of revenue is surrendered by publishers for every download of a paid application or subscription.
For several years the trend toward fixed-width website layout became something of a standard practice, delivering pages at set pixel width to allow greater control over their appearance. As desktop screen sizes grew, so did the accepted ‘standard width’ for websites, until the explosion in mobile browsing meant this would no longer cut the mustard.
Navigating a website optimised for a large monitor on a small screen (such as those on an iPhone) can be a frustrating experience, and the App Store beckons for those requiring for a more usable mobile experience.
Responsive web design
Infrastructure Journal’s responsive platform
The term Responsive Web Design was coined in May 2010 to specifically define a set of design methodologies and web technologies used to create websites that adapt to the size of the user’s screen size. In essence, a responsive web design can detect the size of a user’s web browser window size (from the smallest smartphone to the largest cinema screen) and reorganise the website’s content and navigation to suit.
It is delivered through a single set of code, without the need to create separate code for each of the different sizes of device. The result? Users of any version of iPhone, iPad, modern Android devices, and Windows Phone experience the same website, but with the user experience adapted accordingly. Those on desktop machines experience the same website in a form optimised for large screens too. No apps required, just modern web technologies.
The technical bits
Using a flexible grid system (the guides designers use to define page layout), flexible media (text, images, and video which can change size), and a technology called CSS3 Media Queries (website code which applies layout and styling changes based on the user’s current screen size), we can create websites which optimise for desktop and portable devices instantly using the universal language of the web – HTML.
Makemedia recently launched a responsive redesign for Infrastructure Journal, a global data and editorial website for the global infrastructure finance market. If you’re using a desktop browser, follow these steps to see how the new IJ changes it’s layout as the browser width decreases in size (such as on a smartphone), or watch the short screencast above for a quick glimpse of this technique in action.
Resize your browser window, making it narrower on screen
In a modern browser, you will see the page content flex and move to suit the size of your browser as it changes without the page reloading. Page content is reordered, navigation is optimised, and text sizes are adjusted for comfortable viewing.
Opening the same page on your smartphone or tablet browser has the same effect, with the website automatically adapting for the size of your chosen device, using the exact same set of website code used for the desktop site.
An app experience for everyone
HTML has been the language of the web since it’s birth; websites designed fifteen years ago still work in today’s modern browsers, and will continue to for years to come. By developing responsive websites using HTML and CSS, experiences can be optimised to deliver websites optimised for any screen regardless of portability, manufacturer, or operating system.
From iPhone to Kindle, Android to iPad – the kind of experience previously the reserve of mobile-specific websites or downloadable applications can be had by all, through the browser.
Maintainable and scalable
Updates to websites designed responsively only require a single set of code to be updated when changes are required, without the need to interrupt a user’s experience through intrusive updates or negotiating app store approval.
More than a trend
Responsive design has quickly become an important part of many designer’s and agency’s workflow, and it’s ethos is starting to bloom beyond the technical definition outlined by Ethan Marcotte in 2010. It has led to many traditional design processes being reconsidered (with strategies such as Mobile First becoming more popular), with speed and performance again becoming one of the top considerations when developing for a multitude of devices that may have wildly differing connection speeds. Rather than simply being concerned with optimising for screen size, more detailed elements of a user’s context will soon be used to shape the experience they have, ensuring the most usable and optimised solution is delivered through their browser.
Like any design or technology choice, users and business cases need to be considered carefully before deciding a strategy for development: responsive web design isn’t the answer for everyone. Although multiple app development can be costly, responsive web design done properly usually requires additional planning, research, and design. Of course, there are occasions when web technologies alone cannot deliver the solution required, such as when direct access to restricted hardware (such as camera, accelerometer, or sensors) is needed.
Some publishers prefer the direct marketing opportunities presented by the marketplace ecosystem, and find designing to the restrictions of individual platforms a more efficient workflow. The monetisation model for app stores are also familiar to users, and cut down on the steps required for purchase once payment details have been stored. Until faster, more universal, and more integrated payment gateways are popular in the browser, app store ecosystems do offer a more seamless method of commerce.
However, if your aim is to simply translate an existing website experience for mobile, responsive web design is a great solution for delivering an optimised experience for as many users as possible, using web technologies which will stand the test of time.
I hope to follow this post up with some more detail around the methods and technologies used to deliver responsive web design, including case studies of how we delivered areas of Infrastructure Journal.