articles tagged with: technology
Whenever I stop by to see my parents, I am reminded of how far I've come (and I don't mean geographically). There is a framed school project piece of mine that hangs proudly on their wall. I remember feeling that was well deserved at the time. Now though, I'm convinced it gets worse with each visit but even that doesn't date as quickly as websites can. It's frightening how fast web design moves, but with that comes a continuos flow of new and exciting trends and techniques to take on.
There are many factors that can change in web design; technology, user behaviour and other creative fields that can influence the web such as graphic design and fashion.
- Responsive Web Design (RWD)
It is so popular right now and will no doubt continue to be throughout the year. It serves the same HTML code to all devices and uses CSS to alter how the page appears on the device. It is also what Google recommends to build mobile-friendly websites. Many of the trend predictions featured in this list are most suited to RWD.
- Increase in UI Patterns
We've seen a lot of similar looking websites lately which many blame on RWD and the rise of WordPress. Take the hamburger menu for example, it has been criticised for being everywhere but this is also why it is so easily recognised by users. UI patterns are there to guide users through the experience, making it easy to navigate and the hamburger menu does just that. I think we'll see designers working hard this year to be the one to come up with the next popular UI pattern. This will no doubt result in a lot of visually inspiring attempts.
- Memorable Typography
We are no longer limited to a few system fonts. Services like Google Fonts and Typekit make custom fonts readily available and easy to use on the web. Expect adventurous experimentation with type to make a strong statement in design.
- Material Design: dramatic alternative to Flat Design
Like flat design except it uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user. Material Design creates clean, modernistic design that focuses on UX.
- Flat Design with a Twist
It has been around for a while now but it looks set to stay for 2016 with a few differences to keep things interesting. A little like material design long shadows will bring more depth to flat designs. Vibrant colour schemes. Simple typography and ghost buttons will allow for functionality without distracting from the UX. Minimalism will reduce the number of elements and create a raw, tidy UI.
- HD Visual Assets
HD background images and videos on websites could well grow even stronger in 2016 due to increased bandwidth, wide browser support of HTML5 video, and ways to serve high resolution graphical assets selectively to devices with retina screens.
- Striking Custom Iconography and Illustrations
.jpg and .png files can result in a pixelated look on retina displays, which spoils the aesthetics of a website. Now though, there is wider browser support for Scalable Vector Graphics (SVG) and easily implemented icon fonts. The outcome? more web designs showcasing colourful custom illustrations SVG icons that remain crisp and engaging at any screen resolution.
Thinking of it now, my 'work of art' has gradually been demoted from hallway masterpiece to bathroom backdrop. Perhaps even a mother's love isn't strong enough to ignore the fact that design moves on quickly and unless you don't mind your hard work being tucked away, it's best to keep up!
Created on Tuesday January 12 2016 11:02 AM
Guesswork can only get you so far before it becomes a problem. My 'genius' theory of 'If in doubt choose B' served me well in my multiple choice French exam. It proved less useful in my oral exam when I told my teacher I keep a large duck in my kitchen every other day.
Yet it's come to light that many people with disabilities are navigating websites with the help of good guesswork, such as assuming the 'Contact' button will be the last link in the navigation bar.
A website should be intuitive to anybody who chooses to use it. Nobody should have to guess their way around and risk missing much of it's content. Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
Alastair Campbell oversees both usability and development aspects at Nomense, a company that believes, just as we at focus do, that everybody has the right to access inclusive design, regardless of ability. He spoke with us about the importance of considering accessibility right from the start of the design process. We want to share a few of those things with you.
The main content is often not the first thing on a web page. Keyboard and screen reader users tend to have to navigate a long list of links, sub-lists, corporate icons and more before ever arriving at the main content. So these users will thank you for enabling them to bypass or 'skip' over repetitive web page content. You can press the tab key on the Nomensa site for an example of a skip link http://www.nomensa.com/
You should be able to achieve everything with keyboard controls alone.
• tab key to progress through links and controls
• shift-tab to reverse
• enter to follow links
• space to select form controls (e.g. tick boxes)
• cntl-f / cmd-f to find a link or text
On many sites, the closer you zoom in, the more of the site's content is lost off-screen. Not with the Microsoft website: https://www.microsoft.com/en-gb/ this responsive site behaves as if you are viewing it on a smaller device each time you zoom, so eventually you are looking at a mobile view with all content still easily accessible.
Make sure the results of user input happens close to where they perform the action. To experience the difficulties that incur if you don't, zoom in on this website https://www.overclockers.co.uk/index.php and add something to the basket. When you do, you're left wondering as nothing appears to change, unless of course you navigate all the way to the top right of the screen and view your basket. Do the same on amazon and an 'Added to Basket' notice immediately appears within view. Yes, that ab-cruncher I'll never use is mine all mine!
Alistair, photographed above, says there are 4 questions to ask yourself:
• Can you use it with a keyboard?
• Can you see it when zoomed?
• Does it provide appropriate information to
• Is it easy to understand?
Yes, it's a lot to take in and on the surface it may seem that this will limit your creativity. If anything, these guidelines will push these limits as you discover visually pleasing designs that improve the online experience for a wider set of users. And that's a fact. Even in French.
Created on Friday October 16 2015 11:42 AM
I watch as person after person pulls furiously on a door handle before giving it a shove, flying through the doorway much to their surprise and quickly patting down their disheveled attire.
(I'm allowed to laugh as it makes me feel better about doing it myself shortly before, only much less gracefully).
The problem here? The door handle was giving the wrong message. What looked like a handle was indeed a hinge.
My point is, the need for accessibility is everywhere and it is as important in web design as it is in architecture.
When designing for web we must consider various factors such as colour contrast and text size but many forget to consider screenreader users (Screen readers are audio interfaces that convert text into synthesised speech so that users can listen to the content). Luckily there are a few simple things that can be done in order to improve usability for screenreader users, and ultimately all web users...
Unlike sighted web users who can scan a web page and pull out at random what they consider to be the important information. Screen reader users tend to listen to a page from start to finish, top to bottom, left to right. So it is best to have the important parts towards the top of the page.
Descriptive page title
The first thing a screen reader user hears is the page title. It is imperative that this gives users a clear idea of what to expect from that page. Obviously this benefits everyone as anyone can use the page title to orientate themselves and confirm they are where they want to be on the website.
One of the most important usability features for screen reader users is on-page headings. The page structure can then be more easily understood. Although text on the page may appear to be a heading for sighted users, screen readers read through the HTML code so it must be labelled as a heading within that. The screen reader will then announce it as such.
Descriptive link text
Screen reader users can call up a list of on-page links and browse a web page that way. They simply activate links of interest to them. Therefore non-descriptive link text like ‘click here’ is meaningless out of context so avoid it like the plague!
Using lists within the HTML code is super useful as screen readers announce the number of items in each list before reading them out. This way screenreader users have a better idea of what to expect when hearing a list of items, for example site navigation.
A bit like the way an answer machine tells you how many messages you have received rather than just reeling them off one after the other. You feel more prepared for what you're about to listen to. The use of lists (using the <li> tag) is a behind-the-scenes change to the code that shouldn't really affect what the website looks like.
The great thing about these screenreader friendly tips is that each and every one of them will improve overall user experience.
We as humans like to know what to expect and are comfortable with what feels familiar. It's always good to bear this in mind when designing for web and there is no reason this should jeopardise your creativity. Maybe give the web equivalent of dodgy door handles a miss though, just a thought!
Created on Wednesday August 26 2015 03:06 PM
2015 marks 25 years of photoshop.
Some of you reading this will no doubt be younger than this incredible software (!) and wondering how on earth people ever coped without it. For those of you who remember just how you managed, consider this a walk down memory lane…
This Lynda.com video is fascinating and walks you through the process designers used to go through before they could "photoshop".
Watch it, and you will be in awe. You'll understand why things are the way they are in Photoshop and just how difficult things once were that are so simple today. 30 years ago, to get a piece of type, designers would have to jot down the required copy and request for example 'Helvetica, 24pt, on 24pt leading', send it to a typographer, wait 24 hours, and only then would they receive it printed on paper for them to glue to their mock-up. And if it didn't look right? same again, including another 24 hour wait. Deadlines must have been tough to meet!
Never again will I moan about anything to do with photoshop. It's only Wednesday but I have managed to roll my eyes at something every day this week:
Monday: "How dare auto select, auto select when I don't want it to be activated anymore but hadn't actually deselected the option?"
Tuesday: "Why doesn't Photoshop simply know which layer I clearly had in mind for that effect?"
Wednesday: "My computer is soooo slow, I just had to wait like 0.5 seconds before what I was typing would appear" - at least it wasn't 24 hours!
Is anybody else with me on these or have you got even 'better' ones? We'd love to read your comments!
As an 80's baby, I have reached an age where I'm socially permitted to bleat on about "When I was at school" so here it is:
When I was at school… I studied Graphic Design and it wasn't all fancy software and special effects at the click of a button, oh no, it was of course tasks like build a buggy that can protect an egg. Useful.
It wasn't until I began university as a 'mature student' (seriously? - I was only 23!) that I discovered the joys of Photoshop. I must admit though, it terrified me and initially I avoided it when and where I could. My classmates were only 5 years younger than me but they had used it throughout school and it came so naturally to them.
Now, millions of people use Photoshop everyday and do wonderful things with it, bringing our imagination to life. It has totally transformed our visual culture and changed how we see the world we live in. Adobe have created an intriguing timeline that may just surprise you. Take a look back at the years.
Happy 25th Year Photoshop (and thank you for making life sweet!).
Created on Wednesday July 29 2015 02:20 PM
"We are drowning in information but starved for knowledge" - know who said that? You have two guesses... if neither of them were author John Naisbitt, you don't win a prize (well you don't win one either way but it feels good to be right doesn't it?)
Accessible Communications Consultant, Katie Grant, kicked off her engaging talk with that very quote. Katie quite rightly pointed out that information often comes at us faster than we can make sense of it, regardless of disability. So if you're the one dishing out all that know-how, you might want to consider whether it is meaning as much to your audience as it is to you. You should be thinking about:
Language - keep it clear and simple.
Tone of voice - is it appropriate to your audience and your organisation?
Message - should be clear and targeted.
Structure - have a clear intro and overview of the subject.
Content - keep complex data separate.
Readability - pitch at the correct reading level.
Web accessibility should focus on people with all types of disabilities - visual, auditory, physical, speech, cognitive, and neurological disabilities - including older people with age-related impairments.
Potential audience groups who may benefit from an accessible website also include:
- people with long term health conditions.
- those for whom English is not their first language.
- people with low literacy levels / poor social access.
- people with neurodiversity conditions such as autism.
Some say what has caused a lack of awareness is a lack of empathy. Hearing from those who require accessible websites is so valuable and there was a lady present who kindly shared her needs and preferences with us. She has a few conditions including dyslexia and favours websites with accessibility bars that have the option to change the background colour (you can see this on many sites designed by Focus i.e. www.afclocaloffer.org.uk)
Focus work with many charities and enjoy enriching the lives of others through our technology but there are benefits to be had by all when accessibility is considered seriously. Legal & General spent a lot of time and money making their website accessible. In doing so they experienced many side benefits: visitor numbers almost doubled, maintenance costs halved and there was a huge increase in traffic to the site. Even though it's a few years old their case study is an inspiring read and you can view their case study online.
The message is simple. It's a pretty good idea to make accessibility the aim behind communicating any information. Whatever your reasons are for doing so, the benefits are countless.
Created on Monday June 01 2015 12:18 PM
Last week Jenny and I went along to the Bristol Health Tech meet up - an event exploring how health and technology are working together to share information and improve communication between different kinds of services.
Hosted at the Engine Shed, there was a big turnout with lot of networking and scoffing of bahjees, samosas and yummy fruit juices.
Kicking off the talks was Bristol Health Partners Director David Relph. He gave a really engaging presentation (seriously, one of the best I've ever seen) explaining how the NHS partners work together, and the different areas they cover in terms of service provision and location. We learnt how the pioneering technology project that Relph and his team are working on is changing not only the way patients are being treated, but also making the whole system far more efficient.
By joining up patient notes from every touch point that a patient has within the NHS - doctors, social workers, GPs and many other professionals can access a wealth of information from within one system, despite all 17 NHS partners individually using different systems! Currently in trials, the project so far sounds like it's proving successful. We'll be really keen to hear how it progresses over the coming 12 months.
After a networking and chocolate break :-), next up was Paul Wilson, CEO of Bristol Is Open. Used for research and development work, Bristol Is Open is an innovative experiment that connects partners together across a network using different elements of connectivity:
- A fibre-optic network running through ducts between the University of Bristol, At-Bristol, Watershed and Engine Shed
- A mesh network, using 1500 lamp-posts as a self-healing canopy of connectivity across the city
- A next generation (5G) wireless test running along the Brunel Mile (Temple Meads to the SS Great Britain).
All of this is controlled by a system running at University of Bristol. Customers get a virtual 'slice' of this network, to run and collaborate on their projects. An example of this is at Watershed - one of their cinemas has been upgraded to a high definition 4k projection environment.
Sounds techy - you bet it is! But it's super clever and part of Bristol's plan to be a smart city. Find out more on the Bristol Is Open website.
The event was a really good learning curve - and made me feel proud to be working and living in such a forward-thinking city, doing exciting work that is really shaping our future. Plus, Engine Shed is a pretty cool venue, too.
Created on Thursday April 30 2015 02:38 PM
There are so many ways a website can be rendered on screen. Not only is there a huge variety of phone shapes and sizes but all of these can have multiple browsers (e.g. Chrome, Firefox, Safari, Opera and Internet Explorer). Then there's the fact that they can display in landscape or portrait mode. Users aren’t using a mouse but are instead using their fingers (some with 'digits' a little less delicate than others!).
It’s difficult for us developers and designers at web design agencies to predict just how our latest website might look online. There are of course websites that are meant to emulate how it will look but they're not always accurate.
This is where Open Device Lab steps in to make life that little bit easier. We headed over to their offices at Aardman to test one of the responsive website designs we're currently working on. We were able to test it on multiple popular devices from the iPad to a Blackberry. In doing this we could avoid the on-line emulators, we didn't have to pester friends with a different phone to ours to "borrow it for a second".
At ODL we could use a pretty handy piece of kit called 'Ghostlab'. Ghostlab synchronises browser testing. It scrolls, clicks, reloads and form inputs across all connected clients. So what you're testing is not the simple page load, but the full user experience. We also had the option to abandon that and fiddle with each device individually which is good for spotting usability issues that could possibly go unnoticed otherwise.
ODL Bristol are sponsored by the digital marketing agency 'Noisy Little Monkey', these guys made us feel super welcome and we were comfortable knowing we had coffee and support at hand (if required). More importantly, we left feeling we had done a thorough job of testing for our client.
So what did this cost us?... absolutely nothing. We're not sure if that's ever due to change but at the moment so long as you book ahead, you're welcome to pay them a visit. A the moment this gem feels like our little secret but you know what we're like at Focus, we promise to keep you guys updated with all things digital and this is definitely worth 'whispering' about.
Created on Monday December 01 2014 04:42 PM
As most of us know, local authorities throughout the UK face making decisions that will affect the way they provide services and interact with stakeholders and citizens. Whilst budgets may be changing, legislation and statutory requirements remain.
One of the areas we at Focus have been working closely with local authorities since 2004 is making information available online - from promoting positive activities and events for young people through to information about service providers for families. In fact 1 Big Database, which has been developed on behalf of Bristol City, Bath and North East Somerset and South Gloucestershire Councils, is now the leading online resource for parents, carers and families throughout the West of England.
1 Big Database is a successful example of three local authorities joining forces to provide a relevant, up to date - and crucially local - directory of family information, supplemented by an events diary that lists hundreds of one off or regular activites taking place in the region. The partnership project has helped the council's save money and resource (such as administration) whilst maintaining control of the directory and keeping data within it in their hands.
March saw us launch a new version of the framework behind 1 Big Database - which included a number of new features and enhancements to existing functionality. The main development is a new dedicated section for managing and publishing Childcare data - and we've already hooked it up for automatic integration with Capita's ECD management software.
And because we understand the pressures that local authorities face with capital expenditure, we're making the directory and it's family of additional modules available under a 'software as a service' model - that is it's paid for on an ongoing basis as it's used. There's no up front development costs, just a regular affordable monthly amount that is paid for as long as the software is used - with no limits on numbers of records in the database or users administering it.
The team at Focus are happy to talk you through it if you've got any questions.
Created on Monday April 11 2011 03:24 PM
If you follow us on Twitter you may have seen our tweet stream go a little crazy last week. I was at Future of Web Apps - a 2 day conference for web developers (that’s me) featuring talks from the people behind some of the biggest companies on the web (Google, Opera, Mozilla, Flickr & TweetMeMe to name a few).
As the title implies, it’s all about web apps - web sites that deliver a product or service online and where the technologies behind them are going.
Here are a few highlights of the day.
The Future of HTML5, SVG and CSS3 (Brad Neuberg)
This talk was all about of future technologies of the web. I’ll try not to go all techie on this one, but basically the core technologies used to build websites are evolving. These progressions are allowing developers to build sites than run faster, look better and are more accessible. More features can be handled be your web browser without having to relay on third-party plugins (like flash). These features can include watching online video, easier to understand web pages for people using assistive technologies and amazing interactive animations in your web pages.
The 37signals way: A look into the design process of 37signals (Ryan Singer)
My favourite talk of the day, Ryan Singer is a product manager at 37 signals (the people behind Basecamp). This talk challenged the traditional wireframe, photoshop, code approach to the design process by almost turning whole thing on it’s head! The key points to take away were to focus on the business logic at the center first and get something running in the browser. Team members spend less time waiting on each other and your end design fits the content (rather than the other way round).
Location, Location, Location (Joe Stump)
There’s no doubt the future of web is mobile. The iPhone started the smart-phone revolution in 2007 and in the next couple of years mobile web browsing is expected to surpass browsing from the desktop. Whereas with the desktop web content was king, with the mobile web context is the new king. This is because the amount of data we’re producing is growing exponentially (side note: Joe claimed that every two days 2.6 million terabytes of data - which is the same amount we produced up until 2003). Without providing context to all the data we’re producing it’s useless.
The title is a little cryptic, but this talk introduced a very powerful tool for developing the latest generation of mobile web apps. The jQueryMobile project aims to provide a set of tools for creating great looking user interfaces across a plethora of mobile devices. The idea being developers can spend more time focused on implementing great features and less time debugging different devices. The ‘alpha’ release is due next week with the finished ‘1.0’ release in January.
Created on Monday October 18 2010 10:00 AM
So... it’s all over again for another year... no more turkey, mince pies or mulled wine for another 12 months. We’re all agreed here that this is not entirely a bad thing! With Christmas over and done with, it’s time to look forward to the New Year!
Things we’re looking forward to in 2010:
- Google’s Nexus One Phone. Launching today – likely to well and truly divide the camp here. So long iPhone? The jury’s out as yet.
- Celebrity Big Brother. Or the backlash anyway. At the very least, we can be pleased that it’s the last one. EVER.
- Real – time search taking off. Still not sure whether I need to know everybody on Twitter’s opinion on my desired search term, but could be a giggle to start with.
- Onwards and upwards for Focus. We’ve had a great 2009, with a bit of a team reshuffle, and we’re looking forward to a cracking 2010.
Created on Tuesday January 05 2010 01:00 PM
- May 2016 (1)
- April 2016 (2)
- March 2016 (1)
- February 2016 (1)
- January 2016 (1)
- December 2015 (4)
- November 2015 (2)
- October 2015 (4)
- September 2015 (1)
- August 2015 (2)
- July 2015 (1)
- June 2015 (1)
- April 2015 (3)
- March 2015 (3)
- February 2015 (3)
- January 2015 (1)
- December 2014 (4)
- October 2014 (3)
- September 2014 (3)
- August 2014 (1)
- June 2014 (1)
Bristol: 0117 949 8008