Web tech for the new year
At Pretty, we like to keep up to date and use the best technologies available to us. The state of the internet is always progressing, and languages, libraries, and frameworks come and go - hopefully for the better for everyone. It finally feels like we are really moving forward, and with better browser support, device performance and connection speeds, progress is happening fast.
As a front end developer there have been lots of new things popping up over recent years, such as designing in browser, CSS precompilers like Sass and Less, and automated task runners such as Grunt and Gulp, tools that save many developers heaps of time.
The selection below are things I enjoy seeing used on sites and that also help me as a front end developer.
Pretty has long been fans of SVG and try to use it in productions as much as possible, such as in our Christmas card.
If you have knowledge of Adobe Illustrator or Sketch, you can get going with SVG straight away. The beauty of SVG is that it is fully scalable, will fit to any size at the same quality and usually at a smaller file size than raster images (jpg, png, bmp etc).
CSS Tricks has a great article if you are just getting started, and explains the methods for transforming and animating SVG.
Pretty has used SVG heavily on the sites we have built for ETX Capital. We have a lot of icons and UI elements which are perfect for SVG, and as the sites also have a large number of mobile visitors, SVG images are invaluable as they are lightweight and look sharp on mobile and tablets.
SVG is well supported on most browsers and devices, they also work great on higher pixel density screens and look crystal clear. No more slicing images in Photoshop! We are no longer in a 72dpi world, SVG's time is here!
With connection speeds and server infrastructure improving so much recently, video is now easily and widely available online almost instantly. Using video can really add an extra element in a website's design to communicate a brand, story or a walkthrough.
More and more I find websites with a full background video, or a large header video sometimes overlaid with logos or graphics. Video definitely stands out above static graphics and when made correctly can look amazing and much more interesting.
On a site we are currently building, we have shot time-lapse footage of the client's office which will be used as a large full width background video on the homepage. To ensure visitors can view the video without skipping or buffering, we have hosted it on Vimeo pro and serve 720p HD video using the direct MP4 link available to us. Testing from various computers and connections, the playback has been smooth and reliable.
In the wild
The Google calender app website, has great use of video to emphasise and help describe the parts of the app they are showcasing.
longstoryshortdesign uses a darkened video showing the team working and gives a great feel to how the company operates.
Demosthemes have written a great article explaining how to achieve the same effect as BigVideo.js but using HTML5 to play video and pure CSS to make the video cover fullscreen.
With Flash truly dead and buried, animation on the web is now widely supported. Any modern site you visit will no doubt have some sort of animation on it. This may be a big bold fading and scaling headline, or a more subtle transformation of a hover state on a social media button. Animations are here to stay, well adopted, easier than ever to write, and most importantly make sites a lot more fun to use!
Possibly the easiest way to introduce animation to your site is using the wonderful Animate.css by Daniel Eden, harnessing the power of CSS animations.
Here are some examples of some cool animations I have spotted:
The framework by Google, with a massive amount of users, huge support and tutorial community, Angular is definitely one of the big boys that won't be going away any time soon. There are many arguments for and against some of its architecture and features. With the recent announcement of a complete rewrite, a non-backwards compatible version 2 there is a lot of online chatter about Angular which makes for interesting reading.
React was made by Facebook to help the creation of interactive, stateful and reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. React can perform on the client side but it can also be rendered server side, and they can also work together inter-operably. I am looking forward to experimenting with React, read more about it here.
Obviously this selection just skims the surface of new and useful things to look out for in 2015 and I have focused on things that I have, will and hope to be using in production soon.