Call us on 0845 017 8777 or get in touch
Makemedia
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 Manager at 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.”
See the Farmers Classified at http://classified.fwi.co.uk/
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 info@makemedia.com.
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.
So why is markup a great place to get started with HTML5? Firstly, support is excellent across the browser landscape, and even older browsers can be encouraged to behave like their newer cousins. The new or revised HTML tags bring enhanced definition, offering your content extra semantic goodness.
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.
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.
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.
We’re now well practised at developing with HTML5 markup at Makemedia, and we’re not alone in using the new elements in the wild. By September 2011, 34 of Alexa’s top 100 websites were already using the new tags, a statistic which now includes the likes of Apple and Microsoft.
We’re just touching the surface of HTML5 here; Javascript API’s, offline storage, and 3D animation all offer exciting development prospects we can start using today. But as a first step to embracing HTML5, understanding and implementing the new markup is an important starting point.
If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email info@makemedia.com.
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.
Enjoy!
If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email info@makemedia.com.
The BBC has recently relaunched its news offering for mobile users, directing the majority of smartphone users to a dedicated mobile-optimised website. This is a smart move with so many of their visitors now arriving via portable devices:
“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.
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.
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 info@makemedia.com.
Sign up to the Makemedia newsletter here.
Allister Frost implores us to “Make Marketing Noble!”
(If you want to understand what Makemedia do you can check out our creative digital projects here)
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.
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.
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.
You can also use this Google Analytics filter to see full links in your list of referral sites. Perhaps these sites will be more open to partnerships as they are already linking to you?
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.
Mobile specialist Alex had some interesting points to consider regarding what aspects of mobile marketing are more substantial.
Allister Frost talked about how product reviews with photos are considered more trustworthy – and even more so if a description of the person is included. Research tends to show that reviews and personal recommendations enjoy a high level of trust from consumers.
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.
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.
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.
There’s a good blog on Dave Trott’s talk in the Silicon Beach Training blog.
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.
Stephanie Troth asked us to focus on one question:
“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.
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.
Otherwise, check out our work to see what Makemedia do!
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.
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.
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.
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.
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!
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 info@makemedia.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.
If you want to check out some of our responsively designed websites and other projects see Makemedia’s case studies here.
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.
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.
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.
Unsurprisingly, the use of this technology has become enormously popular, with organisations like Starbucks and The Boston Globe redesigning responsively, and others (like the BBC) experimenting with employing responsive web design techniques.
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.
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.
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.
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.
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.
The good news is that support for the technology part of designing responsive websites is very good, with most modern browsers – which includes the majority of popular smartphones and tablets – able to take advantage of the techniques required to design responsively. Older browsers can experience a fixed width design, so don’t lose out on the same content.
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.
In the meantime, take a look at some of the other responsive website’s we have launched recently (Martin Searle Solicitors, BRS Global), or get in touch if you want to know how we could do the same for your organisation.