Screen Shot    at
March 24, 2015

Top 5 responsive web developments in 2015 so far

Written By Martin Sandhu
Scroll

We’re not event quite at the end of the first quarter of 2015 yet and we have already seen many rapid developments in responsive web design. The continuous battle between beautiful UX/UI and responsive web design has led to some emerging trends becoming fundamental tools for web designers. In this blog I will attempt summarise these trends into the top 5 for attracting, engaging and retaining users.

1. Minimalistic design

Einstein said “Everything should be made as simple as possible, but not simpler.” This statement is greatly applicable to modern day digital design, although I’m not sure Einstein was talking about online strategy when he made the statement.

Minimalism is currently at the forefront of UX/UI. As many developers base their designs on a flat user interface, drawing from shades of a brand’s colours and de-cluttering elements in order to hold the users attention. The simplicity is also a springboard for sleek navigation and as such, a great user experience. Spotify demonstrated this nicely in their 2015 Valentine’s Day promotion:

Spotify valentines

The trend may appear to be solely visual, however it is also mirrored in the website’s code. As developers we try to focus on cleaner code and as a result a multitude of scripting frameworks have appeared such as Facebook’s react and Google’s Angular.

2. Photographic and dynamic backgrounds

 

Whilst simplicity is important in modern digital design, it is important that it is not at the expense of personality. People want to do business with people. And this need has driven the rise in photographic displays in web design. Our new website is testament to this, with the mixture of 8 bit characters and photographs from team days out and office events we have tried to show the people behind the company. This has a multiple functions; providing potential clients with insights into the team and helping them to ‘put a face to a name’ which is so vital when a lot of our communication is done electronically, but also giving potential employees an understanding of what it’s like to work at Roller Agency, helping us to recruit the best local talent.

Screen Shot 2015-03-24 at 10.58.22

Dynamic backgrounds extend this further through the use of motion clips. The option gives further personalisation and when well executed, can provide fully responsive HD quality backgrounds to websites. The emphasis is on good execution though, as badly implemented images or videos can lead to penalisation from Google and detract from the user experience due to increased load times or other bad practises.

3. Motion design

Motion design can include transitions, animations, scrolls and fading items. Evidence of this trend is clear as the use of the parallax scrolling theme is still on the rise. Alongside this, animations are growing in popularity too, adding a new level of interactivity to any site.The general consensus is that they enhance the users experience when executed well. Booking.com have definitely used motion effects and a combination of the two previous techniques to their advantage with the ability to explore the holiday destination with the hover of a mouse. Check it out for yourself here.

Screen Shot 2015-03-24 at 09.02.27

4. Scalable Vector Graphics

Scalable vector graphics, otherwise known as SVG, are an xml based vector image. Yes those creative geeks have even gone as far as making images in the form of code with the use of the Document Object Model. Although it is still limited to lines and shapes developers can produce a great designs like an etch-a-sketch. In the world of responsive web design, trying to deliver high definition images on a smaller device with limited network connection can be a bit of an issue when so these SVGs are a great solution. The search of maintaining clarity and reduced webpage loading time has resulted in the more widespread adoption of SVG’s. SVG car

5. Rapid light development

Time is always a huge constraint when it comes to developers abilities to perfect designs, after-all there’s only so much coffee one man can consume in a day.

GulpThe large-scale use of frameworks and the ever-increasing need for simplicity seems to have folded in on top of itself. As such UI kits now seem to have several features which conflict with other plugins. To address the problem of speed and effective maintenance, Gulp.js was devised. The impressive node framework, closely watches the development environment (files and folders), to process changes being made. Upon continuous processing, it creates distribution files with well-maintained folder structure and source code.The result of using Gulp, it promises to increase efficiency, whilst providing clarity through strict practices in code quality. With experience of using Gulp myself it really reduces development time, using it with specific plugins and be a high advantage when building responsive websites in a fast paced environment.

Future Insight..

To conclude, these top 5 trends have already provided interesting web outputs in 2015 especially when used in synchronisation. We as developers are always challenging the capabilities of modern browsers in order to archive great UX/UI design to better portray an organisations identity. The year is still young and I look forward to seeing what else it has in store for evolving web design!