In this episode we’ll complete the CSS for our Tumblr Post Types. We’ll also be talking a little about escaped entities within CSS, such as arrows and bullets. Grab a brew, it’s a long one.
This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let’s have a look at some of what we can expect for the future of web design as an industry.
Anyone who has been doing web design for longer than a few years has undoubtedly faced the problem of the gap between design and front-end development. Designers live in tools similar to Photoshop or Sketch, and developers live in their text editors.
This common workflow has seen many attempts at a solution, including things like SiteGrinder, Dreamweaver, and more recently Adobe Muse. All of these solutions come with their problems, and haven’t been widely adopted. For the most part, front end developers have either stuck to their old ways, or designers are moving more into the browser to work, closing the gap. However, tools are emerging to close this gap even further. With tools like Macaw on the verge of being released, the path to an end of the painstaking gap between design and front end development is being shortened.
These tools will greatly benefit from the fact that web design trends have adopted flat colors with very little texture and predictably repeated elements. These elements are far less complex than the heavily image-reliant ui elements of a few years ago, so it is a prime stage to introduce tools to automatically generate well-organized, semantic code.
As browsers adopt the newest standards, phones get faster, screens get more unpredictable, and designs continue to flatten out, we will see a significant reduction in the number of graphic images used in a given site. Complex UI elements will continue to rely more and more on CSS, and for things that can’t be accomplished purely with CSS, SVG will be adopted. The primary exception is photography. Large photos will continue to claim more design space as designers rely more on content-oriented transparent imagery to define experience and narrative.
With beautiful examples popping up everywhere, SVG is hitting its prime. We can expect to see more accessible tools for creating basic infovis without much of a hassle (think ChartJS), as well as more educational tools exposing the potential and power of SVG to people who haven’t had incentive to explore SVG previously.
Although the flexbox spec is still sitting in a non-standardised no-man’s land, there’s relatively good support across browsers. There hasn’t been a wide adoption of flexbox (for unknown reasons), but we believe this year there will be a push towards adoption.
We’re excited enough about flexbox here at Tuts+ that we’ll be posting a guide explaining how to create layouts with flexbox soon, so watch out for that!
You won’t see full adoption of a retina image solution yet. Although Webkit has implemented srcset, developers are already solving this problem in slightly less efficient or robust way. While
srcset will eventually be necessary, for most developers will continue to solve the problems by saving larger images at lower qualities.
Remember when parallax became the next hot thing? Everyone started using it in new and exciting (as well as worn out and frightening) ways to tell stories and enhance user experience. You can expect that people are going to widely adopt video as a design element (for instance, as a background) rather than just as a focal “theatre” experience as we’ve seen with YouTube.
This has been around for a long time (there were even incarnations built in Flash), but hasn’t gained popularity with commercial ventures until recently. With this will come interesting challenges, particularly related to video size and compression.
While animations certainly aren’t a new thing, animated logo and icon elements are rising in popularity. SVG animation can be done with CSS, and projects like Iconic, which raised over 6 times their target on Kickstarter, as well as open source efforts like Climacons, show promise of a new trend in user experience design based on vector path animations.
In the 2014, as adoption of mobile continues to reach lower end markets and connectivity increases in ubiquity, the adoption of second screen will extend to more shows and more formats. This could even include things such as syncing your phone to your computer while watching a show on Hulu, or connecting your tablet with your gaming console to offer secondary information about what you’re seeing or doing on screen.
This is a very different design area than basic content design. Designers will need to consider even further the concept of secondary attention, fulfilling the role of “accompaniment” instead of “main stage.”
“Responsive” is clearly the dominating methodology in web design. Despite how you are handling the rising need for technology-agnostic designs and code, users are continuing to move to more devices in more environments. Up until now, mobile optimization has been a non-trivial undertaking; making your code deliverables as small as possible, building media queries, achieving high framerates, utilizing caching, and many other considerations take significant investment.
In 2014, many frameworks will fully adopt the mobile-first methodology entirely, and the barrier to creating highly performant sites for any technology will lower. Code libraries like Hammer.js, Zepto.js, Animate.css, and many others have led the charge. As we previously experienced with the industry adoption of HTML5, we hope to also see an industry-wide adoption of best practices for mobile optimization that goes beyond simply writing CSS queries.
Medium, Svbtle, Editorially, exposure.so, Ghost, and plenty of other tools and platforms have ushered in a new era of web content that focus purely on presenting writing in a highly accessible format, without any design crutches. This shift will continue, influencing theme development, new web services, and the “collective design aesthetic”.
You might also want to check out Collis’ recent thoughts on web design trends for the coming year: 2014 Predictions for Web Design.
Think cross-browser testing is on its way out? Have an idea about a new rising trend? Share it in the comments!