If predicting the future were so easy, I’d have won my fantasy football league this year (not that I’m still bitter about this). And, with the ever-changing nature of technology, it makes forecasting on potential trends that much more difficult.
However, and with all that is digital these days, anything that promises to deliver a better user experience is a pretty safe bet. That being said, keep an eye out for these development trends that promise to deliver better performance, accessibility, flexibility, and user experiences in 2018.
The Rise of Progressive Web Apps
Progressive web apps (PWAs) are an increasingly popular way to deliver amazing user experiences on the web.
Now, PWAs are not applications, but are very app-like. The promise behind PWAs is to build powerful and engaging relationships with users over time. This is accomplished through:
- Progressive enhancements: PWAs work for all users on all browsers
- Responsiveness: PWAs fit any screen size, including desktop, mobile, and tablet devices
- Connectivity independence: PWAs work offline by pre-caching the app shell and also working with slower networks
- App-like feel: PWAs are separate application functionality from content to provide an app-like experience
- Regular updates: PWAs stay current through a service worker, which is a script run in the background by browsers to allow for features that don’t require a web page
- More secure: PWAs are served by HTTPS, making them more secure against malicious attacks
- Searchable: PWAs can be registered and found by search engines
- Installable: Users can add PWAs to a home screen without the hassle of using or needing an app store
- Sharable: PWAs are easily shared through a link
- Cost-effective: Developing PWAs is considerably cheaper than developing a native application
It’s principles of being fast, reliable, and engaging is what makes PWAs something to keep an eye out for in 2018 as a great alternative to traditional native applications.
More Inclusive Digital Experiences
Web accessibility is far from a new trend or topic. For government agencies and those in higher education, digital accessibility to information and services has been a priority for years.
Now, other industries are beginning to feel the need.
Rightfully so. After all, one in five adults in the U.S. has some kind of disability that may impede their ability to consume content online. That’s a pretty significant segment of the population.
Visual appearance is still very relevant, but customers and users are now expecting a readable, navigable, keyboard accessible, and compatible web products.
You don’t have to sacrifice visual appearance to have an accessible web experience. There is a popular misconception that accessible websites are not as visually appealing or otherwise restrict web designers. While this may have been the case years ago, it isn’t so anymore. There are fewer limitations for designers and programmers, and websites loaded with images, videos, and other rich media can still be made to be accessible — so long as you include alt text, captions, and mind your accessibility Ps and Qs.
My colleague Genevieve is our champion for web accessibility. She explores how to provide accessible digital experiences in this webinar.
Less jQuery! More JavaScript!
jQuery has been a reliable JavaScript library that has been the backbone of many custom projects over the years. Recently, though, we’ve seen more and more browser compatibility with pure JavaScript, eliminating the need for jQuery.
So, should you even use jQuery at all?
Yes, but it should be used less and less. You may not even need it at all. Many jQuery functions can be written using Vanilla JS.
If you’re writing a library, and because of the high demand for faster page load times, it’s a better idea to avoid calling jQuery’s massive library into your project if you don’t need it.
Getting Down to the Nitty Griddy of CSS
CSS Grid has gotten a lot of buzz over the past few years and continues to grow. Its support from major browsers Chrome, Firefox, Safari, and Edge has made it a good option for developers.
Grid layouts make dividing pages into major regions easier, and allow developers to define the relationship (size, position, layer) between parts of the HTML.
Similar to Flexbox, Grid lets authors place elements into columns and rows. But with Grid, more layout options are made possible, and others made easier. Child elements can position themselves, overlapping and layering similar to CSS-placed elements.