Archive for the ‘Technical’ Category
Does exactly what it says on the tin; just the posts that relate to the above...
Mobilized Header & Footer
We’ve been working a lot on building responsive sites lately. Sites which are flexible to the device they may be viewed upon, and change accordingly. For many reasons, it’s good to start small and work up to a full “desktop” version and this means it is vital we consider the site on smaller devices early in the process.
Once we had produced wireframes for a recent project, I set about producing a prototype to see how the design would work across a range of screen sizes. The desktop site follows a very conventional layout but I was keen to see how we could best optimize the header and footer for those on mobiles or tablets.
Improving navigation
I had seen a technique used on Mark Boulton’s Five Simple Steps website to turn the primary navigation into a dropdown menu for mobiles (resize your browser to test!). Samuel Cotterall also wrote a script called touchdown.js to add this functionality.
Both these examples target a single set of links and make the navigation easier to use on a mobile device. In my example, I thought we could make better use of screen space and improve usability a bit further by grouping both sets of links together in the header (and footer). With some modification of Sam’s script I came up with the following:
View the demo or view on Github
The code that pulls this together is detailed at the above links. I also added a show/hide toggle for the Search box, a common feature on mobile websites these days where finding information quickly is paramount.
Not necessarily ground-breaking, but a neat solution which you might want to consider in your project. I can see it being extremely useful if you have a large footer with lots of columns / links you wish to group together.
If you have any questions or comments hit me up on twitter.
Gordon’s Alive! (but he’s dying a slow and painful death)
Gordon had Ming but Adobe’s Flash has had to contend with a more powerful adversary in the Late Steve Jobs and he was equally merciless in his pursuit of wiping out his enemy.
And after years of bitter fighting it seems Jobs has succeeded where Ming failed, bringing Flash to its knees – if we are to believe the current rumours that is. Adobe is said to be pulling the plug on Flash for mobiles and tablets, instead focussing on HTML5 for playing video and animated content saying “We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations”. Although apparently Adobe will continue to support Flash for desktop platforms as well as providing bug fixes for some mobile platforms.
Perhaps Adobe’s hand was forced though, with most mobile devices choosing the open HTML5 format instead of proprietary plugins like Flash for multimedia elements. Windows also announced recently their Windows 8 Metro browser would choose HTML5 over Flash for security, reliability and battery life. These are good choices by the device-makers, with HTML5 constantly evolving due to the efforts of the W3C Working Group hoping to bring the web towards a fully standardised, open format.
As those immortal words once pronounced – “Gordon’s Alive!” but we don’t think Princess Aura will be able to save this particular Flash…
Roll with it… working with Oasis!
Not that Oasis!
We have created new branding and launched an online presence for Oasis, an ethical, not-for-profit human relations consultancy.
The branding and website are designed to help Oasis to clearly articulate its unique approach and skills, with much of the web content focusing on real-life case studies and testimonials.
Some might say…
Cathy Neligan, Communications Officer of Oasis says:
“Working with Mixd was an absolute pleasure. Their emphasis on getting to know exactly what we wanted meant we maintained an effective working relationship throughout the project and resulted in exactly the solution we needed. They came up with creative solutions for our branding, web and print, and we were able to rely on their expert advice and honest feedback.
“Feedback from clients and users on our new branding and website has been fantastic and we have seen an increase in enquiries and bookings through the website immediately following launch.”
Who and what is Oasis?
Oasis works with organisations to help them develop new and more effective HR and personnel management strategies. It’s clients range from not for profit organisations, charities and educational institutions to major companies such as Northern Foods, Skipton Building Society and Betty & Taylors Group.
The masterplan…
Built to the latest front-end standards in HTML5 and CSS3, the website really lives the Oasis brand and makes user interaction easy, even for such a content rich site. The jQuery animation on the homepage helps get across key brand messages with the site supported in all browsers (including iPhone/iPad) without the need for Flash.
The Executive Developers section allows users to easily search or browse to find the right developer for them, by name or region, and the Resources section allows free downloads of PDF Manuals and the online purchase of books utilising simple PayPal integration. The entire site is incredibly quick to load and navigate, by fully optimising both the front- and back-ends, whilst the search engines are kept happy by the ground-up integration of solid SEO practices that see the site sitting pretty on page one for many key search terms, even without an ongoing SEO campaign.
The website can easily be updated by Oasis through our adaptation and integration of the WordPress content management system which includes bespoke features including Custom Post Types to allow easy input of wide ranging content.
Don’t look back in anger…
Here’s what the Oasis site looked like before our involvement.
View the new Oasis School of Human Relations website.
A massive improvement wouldn’t you say? Definitely… no maybe about it!
Why is scoping important?
It is fair to say that scoping is the most important stage of any design and development project.
“None of us plan to fail, but some of us fail to plan.”
Anon. (I saw this quote as graffiti on a dressing room door!)
Without scoping, a design and development project is like trying to build a house without any solid foundations; in fact, a project built on nothing but assumptions (assume makes an ass of u and me!) and guesswork would be like trying to build a house on quick sand.
The key reasons for scoping:
- Target audience needs are reviewed
- Project requirements (and risks) are identified
- Routes to meet these needs are researched
- Deliverables are agreed
- Planning and allocation of resources are made simpler
- Indicative project costs and time-scales are firmer
- Money allocated to the project is better spent
- An initial investment creates an informed project platform or in certain cases shelves a project, saving valuable resources that may have been wasted
- Overall project time and cost is streamlined
- Solid scoping makes the project as successful as it can be
Scoping is an investment, not an expense
One careful owner…
If you’re in the market for a great deal on a used car in the Yorkshire area, you may have come across our recently launched website for Andrews Auto Parcs in Harrogate.
Website scoping
The website is the result of many hours of hard graft, with a great deal of time spent planning, investigating, scoping and ongoing user testing… to set the solid foundations that make for a structured, user focussed project. Early feedback from the client and users, along with analytics stats, is proving that it was time well spent.
Quality web design and development
Our usual standards of highly crafted code and user-centred web design are of course evident, with solid technical making complex processes, such as the finance calculator and vehicle search, easy for the user. This background technical is running using the fast emerging Ruby on Rails language and the integrated content management system allows the guys at Andrews (who will be the first to admit, that they aren’t very technical… hey, we can’t sell cars!) to take full control of their online presence from the comfort of their purpose built showroom.
Additional value added services
In addition, we undertook a photoshoot, developed a content strategy, advised on language and implemented comprehensive search engine optimisation for launch. Our work doesn’t stop there though – we like to take a proactive approach to evaluate and enhance our products – and we are currently investigating a smart-phone App and an ongoing search optimisation and pay per click campaign.
The website before Mixd’s involvement
Well, what do you think?
We’d love to know what you think about the site and if you’re in the market for a car, Andrews is well worth a visit… either online or in person.
Flash. Saviour of the BlackBerry universe?
BlackBerry losing mobile smartphone market share
With the introduction of the iPhone and Android phones, BlackBerry’s share of the worldwide mobile smartphone market started to reduce dramatically… some might say plummet. In fact, it was only a couple of days ago that a San Francisco Chronicle article reported that Research in Motion Ltd (RIM), the Canadian company behind BlackBerry, plans to cut 2,000 jobs; that’s roughly 10% of their workforce. A RIM spokesperson stated that the reductions are part of a plan to:
“focus on areas that offer the highest growth opportunities”
Now then, is one of these areas the lucrative ‘tablet’ market?
Tablet devices
The argument into whether tablet devices serve sufficient purpose to warrant the cost or whether they are just a gimmick; a nice to have; a status symbol; and so on, finds many supporters in both camps… and I’m not going to go into that here!
However, there are a great deal of them on the market from all the usual suspects, including Samsung, HTC, LG, HP, Acer, Dell and of course the BlackBerry PlayBook. However, if you asked the ‘man (or woman) on the street’ to name one, the most popular answer would undoubtedly be the iPad.
So, if RIM sees this market as one of the “areas that offer the highest growth opportunities”, they will have to impact on the iPad’s impressive current market share of circa 75%. (Incidentally, Android devices are fighting hard too and have already reduced Apple’s share that once stood at 96%!) But how to do this? Obvious… find a weakness and put the boot in!
Flash… arghhhhhhhhhhhhh!
Another argument that has been well documented and rumbles on and on is Apple v Adobe; CEO v CEO; Steve Jobs v Shantanu Narayen. (In my opinion, just let Harry Hill sort it out… FIGHT!) Jobs’ reasoning rotates around a number of factors that many tech experts say don’t stand up to scrutiny.
In terms of a web developer though, as Apple products don’t support Flash, you have to consider this in terms of accessibility and find alternative technologies such as HTML 5 and jQuery (why alienate certain users at all?)… again, another topic too comprehensive to delve into here.
However, going back to the ‘man (or woman) on the street’…
- Do they really want to know about all of this?
- Do they really care?
I’d say not. The majority of the buying public just want things to work; take the famous Honda ad campaigns as an example. So, on the subject of adverts and back to putting the boot in, BlackBerry saw this opportunity and released this promotional video for their tablet, the PlayBook:
This throws up a number of questions…
- Will the BlackBerry PlayBook eat into the Apple iPad market share?
- Is this a shot in the arm for Flash?
- Will Apple contemplate supporting Flash in the soon to be released iOS 5 or in subsequent releases? Will this even bother them?
- Is Flash a good thing for the web?
- Who would win in a fight between Steve Jobs and Shantanu Narayen?
- As a developer, what do you think about Flash?
- As a ‘man (or woman) on the street’ do you care about this?
- If a turtle doesn’t have a shell, is it homeless or naked?
- Are tablets worth the price tag or just a gimmick?
- As a client commissioning a website, is it important to you that it works across all platforms?
So many questions, so little time… but we’d love to know what you people out there think. Whether you’re a digital professional, a commissioning client or a ‘man (or woman) on the street’, please let us know your thoughts.
Website for Obesity Surgeons Group launched
Harrogate web design company Mixd is proud to have recently launched the new website for the Obesity Surgeons Group based in Leeds.
The Obesity Surgeons Group (OSG) is a surgeon-led organisation that offers leading surgery solutions to patients revolving around four core principles:
- Highly skilled professionals with vast experience in weight loss surgery;
- State of the art, purpose built facilities;
- Provision of top quality after-care; and
- Sensible pricing structures that offer best value and finance options.
Mixd was approached by long standing online marketing partner 29Red to co-create a new website that would match up to the quality of the OSG service.
Accessible and usable website design
We were chosen primarily because of our experience in website accessibility and usability and our attention to detail. Throughout the project, a ’2 heads are better than 1′ approach was adopted with key decisions being made by everyone involved and the end result reflects this. Specifically, our work included:
- Full planning, investigation and scoping;
- Creative;
- Client content management system;
- Technical development;
- Online BMI calculator (what’s your BMI?!);
- Illustration and video animation; and
- Accessibility and usability consultancy.
We’d love to know what you think of the Obesity Surgeons Group website, so do let us know… …and why not check out you BMI online whilst you’re there!
Stop press… soon to be seen on TV!
Professor Mike McMahon, lead surgeon at OSG and a pioneer in keyhole gastric surgery, will be appearing on Channel 4′s Embarrassing Fat Bodies in May; a spin-off from the ever popular series Embarrassing Bodies. ‘The Prof’, as he is affectionately known, was selected because of his skill level and will feature as the weight loss expert who consults and operates on one of the programme’s patients with a particularly tricky and complicated case.
The benefits of agile development
Agile
Adjective
Able to move quickly and easily. Concise Oxford English Dictionary
Agile development
Agile methods generally promote a disciplined project management process that encourages frequent inspection and adaptation, a leadership philosophy that encourages teamwork, self-organization and accountability, a set of engineering best practices intended to allow for rapid delivery of high-quality software, and a business approach that aligns development with customer needs and company goals. Wikipedia
Mixd agility
Here at Mixd in Harrogate, we adopted agile development methods almost two years ago and a number of projects have benefitted enormously; including:
- Booking engine and business management tool for a European holiday company to minimise staffing levels and maximise the customer’s online experience; bringing together APIs, availability & bookings, eCommerce and customer data. Furthermore, the system deals with property owners, agents and staff to differing degrees to streamline the company’s business model.
- Customer Relationship Management and booking system for a ski holiday operator. Amongst many challenges, one of the features we developed was a user-friendly web-based graphical user interface (GUI) for the call centre team.
- Database driven application and website for a car supermarket that seamlessly handles a massive slice of car data, bespoke fields and customer searches.
- Secure social network, similar to Facebook, for a department of the NHS that handles a multitude of complicated processes to give users what they want, with minimal involvement from the administrators.
But how? Why? What are the benefits?
Benefits of agile development
Now, I was going to write the benefits of agile development as two lists, separated by the headings ‘client’ and ‘developer’; however, to do so would go against everything that agile is about… collaboration to develop the best possible solution and deliver true business results.
So, here is a single list of the main benefits of agile development:
- The emphasis is very much on:
- Individuals and interactions over processes and tools
- Working software over comprehensive documentation
- Customer collaboration over contract negotiation
- Responding to change over following a plan
(taken from the Manifesto of Agile Software Development)
- Client satisfaction through the rapid delivery of software / applications they can use
- Adaptability of the end product remains high throughout development:
- The impact of changes only increases workload slightly the further through the process you go
- Changing requirements aren’t the end of the world, even late in the development process (regular adaptation to changing circumstances is possible)
- With more traditional development methods, the adaptability of the product decreases hugely within the first few weeks
- Visibility of the development process is clear:
- Relevant, working iterations of software are delivered frequently for review (weekly is commonplace)
- Progress is measured by the supply of these iterations of working systems
- With more traditional development methods, the visibility is almost non-existent other than near to the start and end of the project
- Business value is maximised at every stage of the process:
- Relevant, working iterations of software are delivered frequently for review (weekly is commonplace)
- A partnership way of working; regular co-operation between ‘client’ and ‘developer’
- With more traditional development methods, business value drops away until such time that the project is finished
- Business risk becomes low very quickly and remains low:
- The development process benefits from a steady, constant pace
- Projects benefit from a highly skilled team of motivated individuals with a common goal, who can be trusted to deliver
- Technical excellence and good design are always at the forefront
- Simplicity of development
- With more traditional development methods, business risk starts high and remains high until nearing completion
Have I missed anything? What is your experience of agile? We’d love to hear what you think of agile development, good or bad.
MAFTA ‘Best Website’ award
GET IN! I’m shouting. I’m on a roof top. One of our sites has won the ABTOF MAFTA for Best Website!
What’s an ABTOF MAFTA? You may be wondering…
Well, ABTOF is a travel industry association and stands for the ‘Association of British Travel Organisers to France’. MAFTA, not to be confused with BAFTA, is the acronym for the ‘Marketing Awards for French Tourism’. Not sure where the last ‘A’ comes from! So there you have it, an ABTOF MAFTA is an Association of British Travel Organisers to France Marketing Award for French Tourism. You see why it’s called an ABTOF MAFTA now.
Mixd site scoops award
At the annual Association of British Travel Organisers to France (ABTOF) conference in Saint-Malo (the port in Brittany with the huge walls) held on 1st – 3rd April 2011, the Ski & Summer Morzine site (designed and developed by Harrogate web design company Mixd) collected the MAFTA award for Best Website against stiff competition. In making the award presentation, David Ball of Social Fuel (main event sponsor) cited the cleanness of the site, ease of navigation, relevant content and the quality of the photographs.
Hurrah!
It’s safe to say we are well chuffed that over 12 months of work has been recognised by a travel industry award. The Mixd team was involved right from the get-go; working from a blank canvas to arrive at a fantastic, user friendly site. Our work included:
- Existing site audit
- Full investigation, scoping and planning
- Brand evolution
- Content consultancy
- Creative concepts, development and implementation
- Agile technical development
- Full content management system
- Development of a bespoke and fully integrated back-end booking and customer relationship management system
- Usability testing throughout
- Accessibility consultancy
- Search Engine Optimisation (SEO) technical work and recommendations
- Social media recommendations and training
What do you think?
We’d love to know what you think about the Ski and Summer Morzine website, or indeed the ABTOF MAFTAs. Do let us know.
Browser wars
March has been a big month for browser makers, with each of the big three unveiling a major new release. Here is a brief summary of events (I won’t bore you with the technicalities – I’m sure you can find those elsewhere on the internet if you’re interested!)
First up was Google Chrome 10 coming out of beta on the 8th of March. Generally regarded as the quickest browser available, Google have increased Javascript performance even further as well as create a slicker user interface (UI) and even launched a new logo! Helped by scoring 100/100 on the Acid Test (the Web Standards Project’s test for browser compatibility) it firmly cements its place as the fastest and in our opinion, best browser available.
Internet Explorer 9 was next to be released on the 14th March with a fair bit of hype surrounding it. Microsoft (to their credit) have acted on criticisms from the web community and created a browser streets ahead of anything they’ve released before. An improvement in all areas certainly, but IE9 still falls some way behind in terms of speed, web standards and technology support. There is also talk that some of the claims Microsoft have made are misleading.
Last to come was Firefox 4 on the 22nd March. Improvements include re-working the rather dated interface as well as faster rendering up in-line with the speed of Chrome. Of particular note is synchronisation support for syncing bookmarks and history across multiple devices. Handy. Firefox too remains the leading browser for a customised experience, with the most add-ons, extensions and skins available
All three browsers are free and you should have been reminded automatically to update some time this month. Of course we have our favourite here at Mixd (Chrome) but whichever browser you choose we recommend you update to the latest version; for their performance / UI improvements and support for new web technologies.