Clicky shortlisted for prestigious Training award.
We are really pleased to announce that we have been shortlisted for the Cheshire High Sheriff’s Awards for Enterprise in the Training category!learn more
company / 20 hours ago
insight / 3 days ago
Sexy animations, full responsive design, beautiful loading effects, clever UI elements, 4K video, the list goes on. We don’t think the web should be a boring place. New browser technology is being developed all the time and we love to build websites that take full advantage of this, whilst making the web a prettier place to be.
Just 3 years ago most of the technology used in this website just wasn’t possible. Some of it had been developed but very few browsers supported it and taking advantage of it was just not a good idea. In the past 3 years so much has changed. Browsers have continued to be developed, Internet Explorer is dead (yay), and mobile & tablet devices are taking over the world with ready-made up-to-date browsers. Household internet speeds in the UK have also come a long way too with a residential average of 20Mbps + (Ofcom) and 4G mobile connections (via EE) are available to over 81% of the population (Ofcom). The net result of all this progress is that the web can finally fulfil its potential and become the most engaging media format of all, and there is literally no limit to what your website can do.
So what are the big things on the minds of our web designers and developers right now?
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop monitors to mobile phones).
In the past 5 years tablet and smartphone usage has rocketed to the point where some websites now receive more visitors from mobile users than those using a desktop device. In fact according to the recent Ofcom’s 2015 Communications Market Report “Smartphones have already overtaken laptops as the most popular device for getting online” and “two thirds of people now own a smartphone, using it for nearly two hours every day to browse the internet, access social media, bank and shop online”.
We are of the viewpoint that responsive web design is no longer an optional extra but an intrinsic part of web development and should almost always be included in any project we build.
Making websites with a responsive approach demands a more fluid approach to design, ensuring any element we design is carefully constructed to be equally usable on a narrow screen but also look great on larger wide screen devices. You will notice the site you are using now will reconstruct itself based on the width of the browser window, to ensure every element is not only usable but optimised for narrower screen sizes.
Often building a website to be fully responsive means creating your website may take a little longer than before as we need to carefully configure the design, and test the website on a huge range of devices to ensure it works perfectly on the most commonly used smartphones and tablets. We always indicate these additional costs in our proposals.
Google announced in early 2015 that they are “boosting the ranking of mobile-friendly pages on mobile search results” this means if your site is not built responsively you may notice lower rankings as a result. If you’re not sure if your current website is considered “mobile friendly” by Google then use their simple Mobile-Friendly Testing Tool here.
Animation is a fine art of making elements within a page load in an elegant way which makes the experience more enjoyable without frustrating the user.
When a website loads into a browser it take a few moments (depending on the internet speed) to complete the process as it fetches each line of code, images/video content and other resources. This process often means the user sees each element loading in stages as each resource is fetched – often resulting in a messy visual experience which only looks right when the final element is loaded.
Using animations & loading effects we can make this whole process more elegant by delaying the display of each visual element until the resources it requires have been fetched in full. We can then add some slick movement to make the whole site feel polished without annoying the user. Sounds like a small thing but it makes a real difference to UX.
You might notice we love video. The advent of HTML 5 meant video has become a native part of HTML and allows us to use it much like any other element within a web page. The result is we can now achieve some really beautiful effects to capture the imagination of your audience.
We have our own in-house videographer who is available to visit your business and capture the key elements of your business to help tell the story to your website visitors.
HTML5 videos don’t always have to be something you sit back and watch. They can just be similar to image elements to help better explain processes or just give the user a better insight into your business than an image can achieve.
We love to make every graphic element within a website as clear and crisp as possible. New “Retina” screens found on a huge number of devices including iPad, iPhone and most of the new PC & Mac laptops and desktop computers mean we can display double density images which have an incredibly high DPI to rival the highest quality print. The latest devices claim to have such high resolutions that it is not possible for the human eye to see the pixels. The net effect is a more engaging and vivid experience.
The only problem is that the majority of websites don’t have retina graphics and so when using these newer devices you usually see grainy images which in our opinion is not great!
When we build websites we make sure every image element (where possible) is configured to use the new image tag to ensure the best possible version of the image is displayed depending on the device they are using.
When using icons or other graphical elements like diagrams or other UI elements we try to use SVG graphics which are a vector-based format. These are infinitely scalable and have a very low file size which means they load very quickly. They also look really clear and crisp without any pixelation. Most new browsers support SVGs so we try our best to use them wherever possible.
When we build websites we take a modern progressive enhancement strategy to achieve the best possible results for those with new devices & quick connections, whilst ensuring an acceptable experience to those with older devices & slower connections. This enables us to push boundaries without alienating some users.
Progressive enhancement is a strategy for web design that emphasises accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.
We believe user interfaces (UI) should be simple, intuitive, easy to use and as minimal as possible to ensure the page content dominates each page within a website.
We often use clever “takeover navigations” which are visible after clicking a menu icon (like ours) and like to think of clever ways to ensure each page within your website is easy to use and as tidy as possible. We also consider how the UI should behave on smaller screens to ensure those with small phones and big thumbs can still easily navigate!
Web & Marketing