Skip to main content
CALL 07 3844 0001
12 June 2017

Web Directions- Respond Conference

May this year I was lucky enough to attend the Web Directions Respond conference in Melbourne. A gathering for developers and designers in the industry to hear talks from experts and experienced professionals, to discuss emerging techniques and ideologies that we in the web and application development industry should be using and/or considering when we develop our digital solutions.
 
This year; not dissimilar to previous years at this conference, the key topics covered during the talks weighed heavily around the accessibility and progressive enhancement of our websites, trying to focus on an equal web experience for all, regardless of the user’s physical and mental capabilities.


Speakers

Each speaker offered a new and fresh perspective on techniques that I use day-to-day in my own job, inspiring me to keep learning and developing my skills. Mike Riethermuller in particular, spoke about harnessing a technique that will assist developers like me to cater to the demanding and growing “mobile” market with responsive design. 
 
I have already used some of the techniques spoken about at the event. Specifically, SVG animations, which was covered by Brett Snaidero. The implementation of SVG animations has already proved to be successful in projects we are building now; allowing us to design for interaction and maximum impact to the user. 
 
Below, I have provided further detail about the speakers and points I found to be the most valuable. While there were many speakers over the 2-day event, there are a few that I would like to focus on.

 

 

Mike Riethmuller

Twitter: @MikeRiethmuller
 
Mike’s talk was heavily focused on some new techniques on responsive typography. The techniques Mike spoke about were unique and memorable, as they’re the first of their kind as they do not rely on any scripting (usually causing considerable performance issues), being handled entirely through CSS alone.

 

What is responsive typography?

Responsive typography in website context is text that scales proportionally to the browser’s width and/or height.

 

Why use responsive typography on my website?

Standard responsive websites, using set breakpoints for mobile, tablet and desktop to change the layout and set static font sizes agreeable to the specific screen sizes (which is more than adequate for a website), using a scaling font size depending on the screen size, can create a more fluid feeling, and covers a much larger spectrum of devices.

 

The technique:

The particular method covered by Mark made use of the CSS calc() function to produce the font size, rather than a set size, while still having the ability to set the lower and upper boundary of the calculation to make sure we don’t go below or above our desired min and maximum font size.
 
I have created a pen here for anyone interested in a basic example of responsive typography in practice. After viewing the pen, resize your browser window narrower and wider, noticing the discrete changes in the font size.

 

 

Brett Snaidero

Twitter: @brettsnaidero
 
Brett’s talk focused on the use of SVG animations, and how we can implement them into our websites. Animations on the web, in general, have been around for a few years now, most sites leverage physical DOM element manipulation to achieve them either through CSS animations or in less desirable cases, Javascript.
 
While SVGs also leverage CSS transitions to achieve animations, the benchmarks indicate that they are more performant than straight DOM element manipulation.
 
Animations, regardless of how subtle, are really what can bring your site above the rest, creating a seamless and comfortable feeling when interacting with different components.
 
SVG animations in this context rely on using CSS transitions to move along the defined path.
I am going to dissect one of Brett’s SVG animations to illustrate how the SVG animation works

craig.PNG

The first image shows the initial state of the burger menu icon, the second shows the state of the icon when in a completed state and the third is showing the paths defined in the SVG to get between the 2 states.

Brett’s example can be seen in action here.
 
A more extreme example of SVG animation can be seen here. While this may be a bit extreme, it shows that SVG animations can be both simple and complex.
 

Why should I care about SVG animations?

Implementing a range of these animations can make your site feel interactive, pleasing and functional to use while having very little impact on performance. The same thing could be said about all types of animations on a website, standard element animations can’t go close to matching and SVG animation’s performance, quality, and complexity.

 

What about browser support?

Browser support for SVG animations is quite decent. SVG animations are not supported in Internet Explorer 11 or below, the Latest Microsoft Edge browser and most other modern browsers like Chrome, Firefox and Safari all support at least some of the SVG animations. However as a part of the progressive development mindset, we need to consider that while some users may not get these features due to the use of an archaic browser, that we should take advantage of these features now.

 

 

Rachel Nabors

Twitter: @RachelNabors
 
Rachel (a W3 invited expert) was my favourite speaker by far. She covered the importance of web animations and their impact on accessibility.
 
You might have heard about accessibility on websites before, but if you were anything like myself, your conceptions around the types of users that we need to be catering to, are mostly people with physical disabilities like poor or no vision, colour blindness and people lacking motor functions required to use a computer mouse.
 
Rachel brought up the correlation between using web animations to illustrate the changing states on a component to reduce the user’s cognitive load. 
 

What does it mean to reduce the user’s cognitive load?

By using animations to go between states like open and close, creating a ripple animation on an element when clicked, transforming from a button to a modal in a smooth way can stop the human brain from having to make those determinations on its own, thus reducing the total amount of mental processing when browsing a website.
 

What type of user does this help?

it’s a good idea, in general, to make your website as functional and easy to use for everyone, the specific type of user that Rachel was referring to, were people with learning disabilities and people with Autism and Aspergers.
 
Reducing the cognitive load for all users can improve your website's accessibility to a whole new set of users and is not something that should be dismissed lightly.

 

What I took away from this conference?

The respond conference this year was heavily design focused, however, I think that it raised some important points around making websites accessible for all, regardless of physical or mental capabilities and that “website accessibility” covers a much larger spectrum of people than I once thought.
 
I mentioned progressive enhancement earlier, and it was a topic heavily discussed by most of the speakers. Progressive enhancement is a term coined for making our websites take advantage of the most cutting-edge technology and providing the most pleasant experience for our users possible, while knowing that a user that is using an older browser might not have the ability to utilise those newer features, but should remain able to receive a similar experience.

 

 

More info:

Web Directions conferences
 
You can read more about progressive enhancement here.
 
CSS Tricks article on SVG animation here.

 

 


Craig
AUTHOR

Craig

UI Developer
Craig's articles

Umbraco Certified

Fit-office Challenge


Like what you see?

GET IN TOUCH