In this 3 part series, we’re exploring the mobile, design, and development trends that matter – and in this post, we’ll take a look at some key trends in modern web development.
‘Web development’ has long ceased to be a collective term that applies to a single discipline or job role. Designers, developers, front end specialist, database managers, usability experts, information architects - All will consider themselves to varying degrees to be involved in web development.
To accommodate this variety we have divided our analysis of current web trends into three distinct areas:
- The mobile web and apps
- Graphic and UX design
- Development languages, frameworks, and tools
Whilst there is a significant overlap to each of these areas (for example mobile applications are often driven by specific development frameworks, and UX design is of course a big part of mobile apps) the division allows us to look in more detail at some of the most significant trends that are effecting web development today.
2.1 The Mobile web and apps
Apple didn’t invent mobile apps, but with the release of the original iPhone in 2007 (or rather version 2.0 of iOS, the first to support third party applications1, in 2008) it changed the direction of the Web forever. Before the iPhone, Web access on mobile devices had been patchy at best (Opera Mobile was the exception2, offering a surprisingly efficient browser for what are now called feature phones). The iPhone offered a desktop class browser, with an interface that just worked. Yet, ground breaking as this browser was, the Apple App store offered another direction altogether - dedicated mobile phone apps bypassed the browser. They offered a narrow scope of functionality, could be Internet connected, and could adopt any look and feel they wished. From games, to business productivity tools, to social networks - the app gave the mobile phone a whole new way of working with web and Internet content. Suddenly innovation on mobile devices was no longer about the web, it was all about apps.
TREND: A move back to native apps
Once established as a genuine proposition, app development very quickly split into two camps - Native apps and HTML5 apps. Native apps, those designed and compiled for specific platforms, offered the best interaction with specific device hardware, and advocates championed the superior performance they offered. HTML5 apps aren't really apps at all, they are web pages designed for use only on a mobile device, packaged in app like containers. Their big advantage is cross platform support and the use of established web standards like HTML, CSS and JavaScript.
A recent Forrester3 report declared that HTML5 apps still lag behind native apps, and that for many developers the lack of speed and good performance are killer issues. This is a view shared by Infragistics. HTML5 apps certainly have a role to play, but for many a native app will offer a better route to market. After an upsurge in interest in 2011/2012, we have seen a steady move back towards native apps. Some high profile names that have reached the same conclusions include Facebook (who moved back toward native apps in 20124) and LinkedIn5.
TREND: The rise of single function apps
Single function apps are those that strip away all but one key feature or idea, offering users a very narrow and focused experience. Facebook have done as much as any other mobile application developer to champion this concept.
The desktop Facebook website offers a wide range of features - the main newsfeed, messenger functions, the ability to ‘poke’ people, picture and video tools. Facebook have, over the years, offered some or all of these features as part of their main mobile Facebook application. Over the last few years they have changed tack and begun a process of unbundling their app strategy.
As a result Facebook released separate ‘Camera’, ‘Poke’, Paper’, and ‘Messenger’ apps. Not all of these have been adopted in great numbers by users (Poke has since been closed down). Others have been superseded by acquisitions (‘Camera’ has now been replaced wholesale with the Instagram service). Yet the strategy is the same, Facebook is now all about single function apps.
Foursquare is another Internet titan moving towards single function apps. They have just released Swarm6 whose sole function is the core ‘check in’ feature of their geolocation service. This feature has now been removed from the main Foursquare app, which is morphing into a slightly different proposition (again with a reduced feature set).
Why is this trend important for developers? Fundamentally it changes the app development process. No longer are apps required to be complex feature filled efforts that take months to plan and build. Instead users expect smaller, more focused tools. They expect a single feature with a clear purpose. Developers need to reduce complexity and shorten release schedules.
2.2 Graphic and UX design
Graphic and user interface design is arguably the single biggest driving force behind the web development industry. The constant desire to break free from the limitations of standard HTML markup has often been a rocky road. Elements like tables and inline styles pushed browser rendering almost to breaking point, and for a long time it looked like HTML itself had given up the fight (as Adobe Flash dominated the web). Yet over time good development practice won out, and today design on the web is in a much healthier state. CSS is a prime example, finally separating content and presentation in a safe maintainable way. We think future trends will both consolidate the use of best practice techniques (see CSS Preprocessors) and push to the forefront really bold visual elements (such as clever use of animation and video).
TREND: Flat Design
It was almost impossible to miss the launch of Apple's iOS redesign late in 2013. Undoing years of dedication to skeuomorphic design, the Jonny Ive inspired refresh was all about geometric shapes, minimal text and blocks of color. This approach became known as ‘flat design’ and has since inspired apps, websites, and logos right across the Internet. Even Google7 has got in on the act.
Mobile development has been hit the hardest, for obvious reasons. Apps on the iPhone that still have elements of skeuomorphic design have dated very quickly. As a result most have undergone a redesign (or two), and this has perpetuated the trend across to the Android platform. Windows Phone development has been less affected, as the iOS drew on the principles of flat design heavily when it first launched.
Flat design is unique when compared to other trends in this paper, in that it arguably has no direct impact on pure development practice. Yet such is the interrelation of disciplines in the web development community, that flat design is something that will touch almost everyone at some stage.
TREND: Video backgrounds
Video has always played a big part in the development and history of the web. Even in its earliest days users were intent on making images move, initially using basic animated gifs (still going strong8 thanks to sites like Reddit and Tumblr) and later third party tools such as Flash. Sites like YouTube and Vimeo brought video into the mainstream, while elements included in the latest HTML5 specification have finally given developers standards to work with.
These factors, and constantly improving connection speeds, have allowed video to take a firm foothold in website content. This year has seen a new trend develop, a shift to using video purely for design in the form of looping video backgrounds.
PayPal is the latest site to implement this trend in its design. Its April 2014 site reworking, launched alongside a brand new logo9 10, features a prominent short video image on loop in the background. The new branding is designed to position PayPal as a partner for customers in coffee shops and high street stores, and the videos build on this idea.
The video trend has implications for both visual designers and pure play developers. Designers obviously have a big role to play in how video is embedded into the look and feel of a site. Such an imposing element needs careful consideration in order to properly integrate with the rest of the site elements. Developers need to ensure that the video plays across all platforms, is served in the correct formats, and that an alternative is offered for mobile or more basic browsing experiences.
TREND: Parallax scrolling
Parallax scrolling is one of those innovations that could quite easy be consigned to the web mistakes of ‘under construction signs’ and embedded midi music. Yet in the right hands it works extremely well, adding a modern touch to otherwise visually simple pages. First seen in 2013, but becoming something of a must have effect in 2014, parallax scrolling is achieved by moving background images at a different speed to foreground images. This creates an illusion of depth for the user. Several notable websites have adopted parallax scrolling, including Spotify11 and even Apple12.
Like video parallax scrolling requires both design and development expertise to implement. On the development side a number of techniques exist, varying in complexity (though all use standard tools like CSS and JavaScript).
2.3 Development languages, frameworks, and tools
This section deals with the core activities behind building a better web - the development languages and toolsets used to put websites inside browsers. HTML still underpins 99% of web content, with the standard now in its 5th formal iteration13. CSS is also embedded firmly in the developers toolkit, as is JavaScript. This section looks not at new core technologies, but improved implementations of these standard tools.
TREND: GPU not CPU
Mainstream computing (such as operating systems and computer games) have long used both a systems CPU and GPU to deliver maximum performance to the screen. The world of the web has been slower to adopt this approach, and for a long time browsers only used a devices CPU to deal with its workload. This placed a real limit on what browsers and web content was capable of. Thankfully this situation is changing.
The mainstream browsers have supported hardware optimization for a few years now. Google Chrome has lead the way for much of this, and the latest version of Chromium (the open source browser on which Chrome is based) features a number of innovations14.
A much more recent extension of this trend is demonstrated by a JavaScript framework called famo.us15 which uses its own rendering engine, bypassing that of the browser it is running in entirely. Using the clients GPU famo.us can deliver 3D visual effects and physics simulations that where previously impossible to achieve in a language like JavaScript. famo.us offers a glimpse of a future where the web is at the forefront of computational power, not merely playing catch-up to the traditional desktop.
TREND: JavaScript continues to rule
It is hard to believe but not so many years ago JavaScript wasn’t enabled by default on the standard browser. Indeed some websites would developer JavaScript and non-JavaScript versions of their sites (a bit like the old “Using IE or Firefox?” question that greeted many users of the early web) and deal with visitors accordingly. Yet the modern web is now very much powered by JavaScript. Not only are frameworks like famo.us pushing the boundaries of what JavaScript can do in the client, but tools like node.js16 are defining what is possible on the server.
Node.js can be used to build powerful scalable server-side applications, written in JavaScript. Based on Google’s own JavaScript V8 engine, Node.js is designed to apply the humble scripting language to much bigger more complex applications than previously anyone thought possible. As a result Node.js is today rightly considered one of the hottest and most useful JavaScript stacks available.
TREND: CSS preprocessors
CSS changed the way the web was designed, presented and could be maintained. Yet for many the CSS language is limited. Those with a traditional development background find CSS overly simple, lacking as it does support for variables, expressions, and function like constructs.
CSS Preprocessors, like LESS16 and SASS17, set out to address these issues. They save time by allowing CSS to be created in a modular and scalable way, allowing sensible reuse of styles, and outputting pure compatible CSS.
CSS4 is coming, though the now modular nature of the language means different parts will arrive at different times - a ‘Selector’ specification18 is well on the way for example as its own component. Until then, and we suspect probably after CSS4 is upon us, we feel preprocessors will have an important role to play in any developers toolkit.
REFERENCES
- http://www.theverge.com/2011/12/13/2612736/ios-history-iphone-ipad
- http://www.opera.com/mobile/mini
- https://www.moovweb.com/wp/forrester/
- https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920
- http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
- http://blog.foursquare.com/post/85826325458/swarm-is-ready-for-you-download-it-now
- http://techcrunch.com/2013/09/19/google-makes-its-new-flat-logo-and-app-launcher-style-nav-menu-official-will-roll-out-over-the-next-few-weeks/
- http://www.wired.com/2013/01/best-animated-gifs/
- http://www.wired.com/2014/04/paypals-new-logo-hints-at-a-more-mobile-future/
- https://www.paypal-community.com/t5/PayPal-Forward/Introducing-Our-New-Global-Brand-Campaign-and-New-Brand-Identity/ba-p/801348
- https://www.spotify.com/
- http://www.apple.com/uk/mac-pro/
- http://www.w3.org/TR/html5/
- http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
- https://famo.us/
- http://nodejs.org/
- http://lesscss.org/
- http://sass-lang.com
- http://www.w3.org/TR/selectors4/