An API First Strategy

People say a lot of things about taking a mobile first approach to building their digital experiences, “We absolutely need to be mobile first”, “Consider the customer”, “Build for the devices customers are using day in and day out”.

This is short sighted.

There I said it.

Yes, I am an avid fan of mobile devices, of mobile apps and of the entire smart phone ecosystem that we’ve built up in recent years. Bilue was founded on the back of my passion and enthusiasm for building amazing mobile experiences. But it is patently untrue to state that our technological future hangs on this fleeting interest in everything mobile. Limiting yourself to a fixation on the mobile experience above anything else supposes that mobile devices are and always will be the main touch point for the customer.

Mobile apps are the present, they’re what your customers are using now. Today.

You can ask me what the technology of the future will be, but I will not have the answer. Anyone who says otherwise probably has deeper underlying interests of their own. Hear them out, shake their hand, and then make a break for it. Run for the hills.

People said HTML was the future, the Web was the future, Augmented Reality was the future, Virtual Reality was the future and this list of things that weren’t quite what we made them out to be only continues to grow, into the future. No one really knows what the future holds.

When investing in technology, think as long term as you can. Technologies like ‘The Web’ or ‘HTML/CSS’ are all content delivery technologies. They’re great at what they do and they will continue to be great at what they do, and you will need to continue to invest in them, but they’re client side technologies. By and large the popularity of that technology is not defined by, or decided by you. Your users will ultimately decide where they want to interact with you. If they don’t choose to use the Web, then they won’t. If they don’t want to use an iPhone, they won’t.

This is where APIs (Application Programming Interface) come in. APIs enable one piece of software to communicate with another piece of software. APIs are nothing new, they’ve been used to communicate between software systems since writing software began.

APIs come in many flavours, and as you can imagine, engineers have many opinions about what makes a good API. With everything from SOAP (Simple Object Access Protocol, BTW, if this is the simple version, I’d hate to think what the complex one looked like), to RESTful (Representational state transfer), then there’s the various opinions on RPC and Hypermedia, XML, JSON, and there’s always the cool new kid on the block GraphQL.

This is a complex landscape, but one that with the right direction, and a proper strategy driving it, really opens up the possibilities of what your business can achieve.

Invest in APIs and you’ll find yourself able to react to the needs of your customers faster than ever before. With a good API Strategy you can serve websites, mobile apps, interface with your partners, vendors & clients, create interfaces for things like Facebook Messenger, Amazon Echo, Google Home, Apple TV, Chromecast and even a SmartTV or a SmartFridge. When you provide an interface to connect your software to other software, you create a promising opportunity and potential for your business to exploit. If you want a competitive advantage, develop a solid API strategy today. The only known thing about the future of digital technology, is that software talking to other software will be the driving force behind it.

Respond 2016

In its third year and bigger than ever, Respond Australia’s Responsive Web Design Conference, was held for the first time in two cities, over two days. Kicking off on the 7th April at the National Maritime Museum in Darling Harbour.

Respond2016

Attending ‘Respond’ fuelled me with an overwhelming sense that you can never stop learning or being challenged. 

Attending a conference like Respond isn’t something I’d usually consider. As an Experience Designer, it probably comes down to an assumption that I would not understand a lot of the code rich talks and that these talks would scare me. Ironically, one of Karen McGrane’s leading themes throughout her presentation was advising us not to make assumptions about a user’s context based on any single factor. Thankfully through a stroke of luck I won tickets to Respond during Web Directions 2015, and was able to attend the conference despite my assumptions.

Greeted by new, friendly faces sharing a career and a love of coffee just like my own, I began my solo adventure into what I’d assumed would be a daunting two days that looked something like this:

confused-goat

Those assumptions I made were completely wrong. The topics that were spoken about were very timely and relevant, and I even found myself eager to attend code rich talks. Not so scary after all!

Throughout the conference I picked up on some common underlying themes – opening our minds, challenging industry trends and a friendly reminder to update our passwords.

Adaptive design

What is it? How should we use it? And why is it any different from Responsive Design?

The term ‘Adaptive Design’ was mentioned quite a bit, most notably by Dina Gohil and Lucinda Burtt’s presentation from Fairfax Media on the latest SMH re-design, still under betaKaren McGrane defined Adaptive Design as serving something different. The concept is used to serve content to a user based on their specific device and context.

“Adaptive and responsive solutions work together – they’re not competitors.”

Karen summarised, “Adaptive and responsive solutions work together – they’re not competitors.” Yes it is important to deliver contextual variables to users, but the device type alone shouldn’t be what changes the experience a user might see. Many other factors come into play – analytics, location, velocity and time. Above all a seamless experience should be delivered across all devices. Don’t compromise on this experience by making assumptions.

Accessibility

Never forget accessibility, including catering for assistive technologies. At Bilue we believe accessibility is so, so important, we’ve written about it a few times before. People are using devices to access content more than ever. It is our job to make a product accessible, and we’re not just talking bigger fonts and AAA colour passes. We’re talking, making sure screen readers will be able to clearly communicate tasks and flows to their users.

Russ Weakley really brought it home that it’s our duty to ensure our sites and our digital products are truly accessible. Reminding us that small, simple steps can have huge rippling benefits for users that need them the most.

respond-audience

Security

Digital security stakes have never been higher than they are now. Rachel Simpson from the Google Chrome team reminded us all that we are only as a safe as our weakest link when it comes to tech. Ensuring our users are secure and their experience is still pleasant can be a complicated balance to reach. It goes against human capabilities to expect users to remember different login credentials for each and every online account they’ve ever created. Often users end up falling short and expose themselves to security breaches. An important point made by Simpson was to understand that as your users are stepping through a flow they are also being expected to make a number of quick decisions. It’s important to be timely and meaningful when it comes to the safety of their accounts.

Performance

Performance of your site is directly affecting your revenue. Peter Wilson considered this hard truth, stating that performance is a hot topic in the industry and so it should be. Currently it takes 15.2 seconds on average to fully load a webpage, using a fast desktop network connection. Factor in poor mobile connections, and EFS interference, you will be losing revenue fast! Get rid of the baggage and set performance as a high priority when creating your product.

Be different

A number of speakers challenged why everything is looking a bit the same online these days and motivated us all to question exactly why that is. Navigation systems, layouts and modern frameworks together are creating websites that have become clones of each other. Be inspired by things outside of the digital world, it’s up to us to change that.

Respond has left me filled with motivation to learn, be involved and stay connected. Web Directions are holding a number of great conferences over the year, check them out here: Transform, Code and Direction.

SVG Animations – Seriously Very Good

Imagine the entire web was just static. Filled in by nothing but words, information and meaningless black and white text. We would all spend a lot less time using the internet.

Thankfully we don’t. Instead the internet is a vibrant and expressive place where we immerse ourselves each day in an endless variety of unique experiences. Animation and movement are the visual language through which we catch our audience’s attention. We apply the finesse to our words and breathe life and meaning into our work.

Scalable Vector Graphics (SVGs) are a fantastic tool for every seasoned animator. Unlike traditional image formats they are built using vector paths that save into workable, writeable code. Their output is a complex XML-based structure consisting of tags like <path>, <circle>, <rect> and so forth. To these you can assign properties and masterfully take control of your SVG graphics.

SVGs are vector paths so they scale consistently without any nasty pixelation. They can be assigned fill colours, stroke colours and even border styles. Animating them is easy using CSS3 or SMIL (Synchronised Multimedia Integration Language) and brings movement and life to an otherwise static and lifeless shape.

Here’s one I prepared earlier to highlight the possibilities that can be achieved simply through the use of SVGs and animation. It is built entirely in HTML5/CSS3 using vector shapes from Vecteezy, which I then edited and exported using Sketch.

Note: Can’t be viewed in Firefox because the browser doesn’t provide support for some of this cool stuff and the playground just ends up looking weird 🙁

  1. Outlines
    An SVG’s stroke is the border of its shape. The stroke can have multiple properties such as weight and colour. Create a tracing effect using the dashed feature of a stroke and the dash-array, dash-offset properties. These indicate length of dash and dash starting point along the edge.The trick is instead of having many short dashes, we make the stroke-dasharray value longer than the border of the shape. Then we animate the stroke-dashoffset from the stroke-dasharray value down to 0. The longer the border of the path, the higher the initial values of stroke-dasharray and stroke-dashoffset needed.ferriswheel

    <span class="s4"><span class="s4">path {
     <span class="Apple-converted-space">    </span>stroke-dasharray: 3000;
     <span class="Apple-converted-space">    </span>stroke-dashoffset: 3000;
     <span class="Apple-converted-space">    </span>animation-name: draw;
     }
    
    </span></span>@keyframes draw {
     <span class="Apple-converted-space">    </span>to {
     <span class="Apple-converted-space">        </span>stroke-dashoffset: 0;
     <span class="Apple-converted-space">    </span>}
     }
  2. Fill
    Each path can be filled with colour – this feature being a major attractor to using the SVG format. Fill can be given an opacity between 0 (transparent) and 1 (opaque). This allows us to animate from no-fill to fill.swingsNote: Elements which overlap one another (eg. the axis on the carousel above) don’t want the lines of any paths behind. To avoid this all elements first get filled in with the document’s background colour and only after with a solid colour. This is achieved by chaining three animations together.

    <span class="s4">animation-name: draw, fillBackground, fill;
    </span>

    As for the colour randomness on the page: this is a little Sass mixing I built myself. It takes an input colour and returns a set of random colours within a certain range. You can check out Sass Colour Range on Github.

  3. Timing
    Originally when I built the playground, each section was dealt with individually – building it and then filling it in. Different sections were shown using Javascript’s timeout, changing the display property of each element from none, triggering the animation to start. The end result was messy so I instead used CSS’s animation-delay property to trigger specific start times for each animation. I then created an ‘end’ variable used to trigger the fill for every part of the playground simultaneously.

    <span class="s4"><span class="s4">$end-fill: 10s;
    
    </span></span>.carousel
     {
     <span class="Apple-converted-space">    </span>animation-name: draw, fill;
     <span class="Apple-converted-space">    </span>animation-delay: 0s, $end-fill;
     }
    
    .swings
     {
     <span class="Apple-converted-space">    </span>animation-name: draw, fill;
     <span class="Apple-converted-space">    </span>animation-delay: 4s, $end-fill;
     }

    Each animation can also have a timing function applied to it, changing the rate of change throughout its duration. Most elements are animating with a linear timing in order to create a more uniform and monotonous look. However certain elements have subtle changes.

    One such is the swing, which uses an ease-in-out function to make the swing seem like it’s hovering at the peak of each swing before gradually speeding towards the trough.

    <span class="s4">animation-timing-function: ease-in-out;</span>
    
  4. Rotation
    There is lots of rotation going on in the playground, each to varying degrees. The carousel and each carriage rotates a full 360°. The seesaw and swings move slightly less. Rotation of the swings is limited to the X-Axis so that it appears to swing back and forth rather than in a circle. Because the swings are drawn hanging down whereas their rotation moves from -33° to 33°, an animation has been included to first pull the swing back. This animation is called only once using animation-iteration-count, while the swinging motion is on an infinite loop.

    <span class="s4">animation-name: swingback, swing;</span>
    <span class="s4">animation-iteration-count: 1, infinite;
    animation-delay: 0s, 1.1s; </span>
    
  5. Bouncing
    There are two parts to the bouncing ducks – the spring and the duck itself. While it looks like a simple up and down motion, these two parts are distinctly different. The spring has to collapse into itself while the duck stays the same shape and doesn’t scale. Therefore the spring has its own animation using scale-Y, but the duck itself uses translate-Y to move up and down. A minor annoyance – scale and translate use different methods of determining distance (translate calculates by pixels, scale by a part of 1).ducks

    <span class="s4"><span class="s4">@keyframes spring {
     <span class="Apple-converted-space">    </span>from
     <span class="Apple-converted-space">    </span>{
     <span class="Apple-converted-space">        </span>transform: scaleY(1);
     <span class="Apple-converted-space">    </span>}
     <span class="Apple-converted-space">    </span>to
     <span class="Apple-converted-space">    </span>{
     <span class="Apple-converted-space">        </span>transform: scaleY(0.8);
     <span class="Apple-converted-space">    </span>}
     }
    
    </span></span>@keyframes duck {
     <span class="Apple-converted-space">    </span>from
     <span class="Apple-converted-space">    </span>{
     <span class="Apple-converted-space">        </span>transform: translateY(0);
     <span class="Apple-converted-space">    </span>}
     <span class="Apple-converted-space">    </span>to
     <span class="Apple-converted-space">    </span>{
     <span class="Apple-converted-space">        </span>transform: translateY(10px);
     <span class="Apple-converted-space">    </span>}
     }
  6. Sliding
    CSS doesn’t have a great deal of support for motion paths – this is still an experimental property in Chrome only. Instead of using CSS to achieve the motion of the ball sliding down the slide, I’ve used SMIL’s animationMotion property as a child node of the circle path. Path of motion is determined using the path attribute on animateMotion.

    <span class="s4">&lt;animateMotion
        path="M197.125,297.636719 C197.125,297.636719 319.5625,276.726563 385.351562,333.406251 C451.140625,390.08594 452.066406,558.484368 502.964844,571.152331 C553.863281,583.820293 634.578125,567.597656 677.324219,479.175775"
        dur="2s" begin="16s" repeatCount="indefinite"
        calcMode="spline" keyTimes="0;1"
        keySplines="0.755, 0.05, 0.855, 0.8"/&gt;
    </span>

    Much like CSS animations, SMIL’s animateMotion takes specifications for animation-duration(dur), animation-delay (begin), and animation-iteration-count (repeatCount).

    In order to create an animation-timing-function three properties are needed – calcMode, keyTimes and keySplines. ‘Spline’ is the SMIL keyword to indicate a custom bezier which is then defined in keySplines. The keyTimes attribute is also required to determine the duration of the function. This timing function creates the slow-to-fast sliding motion as the ball slips down the slide.

    slide

    Both CSS and SMIL animations don’t allow for a delay between repeats of an animation. Therefore preventing the ball sliding continuously down the slide without a break requires an additional CSS animation. This animation runs for 5x the length of the ball rolling animation, and then shows the ball for 20% of that time. With a 2-second animation on the ball there is then an 8 second gap before the ball is shown rolling again. The ball is actually continually rolling the entire time, just not visibly to the viewer.

    <span class="s2">.ball {
     <span class="Apple-converted-space">    </span>animation: slideHide 10s linear infinite;
     }
    
     @keyframes slideHide {
     <span class="Apple-converted-space">    </span>1%, 20% {
     <span class="Apple-converted-space">        </span>opacity: 1;
     <span class="Apple-converted-space">    </span>}
     <span class="Apple-converted-space">    </span>21%, 100% {
     <span class="Apple-converted-space">        </span>opacity: 0;
     <span class="Apple-converted-space">    </span>}
     }</span>

CSS and SVGs are amazingly cool and incredibly powerful. With an underwhelmingly few lines of code you can break away from the cold, lifeless and even Orwellian nightmare of a motionless information super highway.

Despite these techniques being capable of producing drastically complex animations they’re also a fantastic way to apply polish to the tiniest of details throughout your work. You can sweat the details, without sweating the details and build an experience that your users will absolutely love to use. Look out for more of these neat little animations throughout our blog posts and across our website!

Directions of the web

WebFuture

Don’t settle for what exists, care enough to push the envelope and design the best solution possible.

Technology and the web are incredibly exciting and yet still so new. Compared to other industries such as banking, mining or automotive it is still in its infancy, and people are doing amazing work to shape it and explore how far it can be stretched. Being so young allows us to try new approaches, make mistakes and discover new design processes and development practices that will help improve what we build.

Events such as Web Directions 2015 help the industry grow by bringing its leaders together to impart their wisdom. After two days, I felt like my head was ready to explode from excitement, learning and ridiculously excessive amounts of coffee. Web Directions challenged my existing development processes, reinforced my inner values and exposed me to a few excitingly new perspectives of thinking.

Integrate

Cap Watkins, VP of Design at Buzzfeed delivered the conference opening keynote, emphasising a need for developers and designers to work closer than ever before. He introduced us to processes at Buzzfeed whereby designers and developers sit down monthly to work through minor styling bug fixes that would otherwise be de-prioritised. Designers were encouraged to be involved, learn CSS and make contributions to a codebase instead of relying on developers to make these less important changes.

I find Cap’s attitude inspiring. In my own experience I’ve found that collaboration among teams directly leads to an increase in quality.

Developers should also be expanding the breadth of their knowledge. Courtney Hemphill addressed these ideas in her talk on animation algorithms. She encouraged exploring the ways tweaking easing functions adds entirely new dimensions to a design – beyond what a designer would typically achieve.

Addressing these visual animation problems through code and logic we can further integrate design thinking into our process. By integrating knowledge from other disciplines, as developers we become more than just ‘code monkeys’. Instead, we can create fun, exhilarating web experiences. Who doesn’t want to do that?

Experiment

This year’s code track was a flurry of everything that is cooler than whatever it is you’re currently doing. Programming can sometimes feel like you’re just writing the same lines of CSS over and over again – but the engineering speakers inspired developers to experiment with new methods, libraries and properties – each wielding their own success stories from real world projects.

With the uptake of the Angular and React frameworks as well as modules with ES6, there’s been a shift towards component-based development. Functionally, components have a local scope so that they don’t interfere with one another. This isn’t true for CSS. Mark Dalgleish and Glen Maddern introduced their solution – CSS Modules. This framework uses Webpack to create locally-scoped CSS classes that only apply to the component where they’re referenced. The result is cleaner, modular CSS files and reusable base classes both of which I will be keen to embrace.

Under-used features of CSS were also discussed by several in relation to enhancing web experiences. Tools such as vw, vh, calc(), rems and ems allow us to create better responsive websites. Utilising these properties will allow us to simplify our code and bring processing from Javascript into CSS. The result is fast-running websites which are more accessible and provide a better experience for the user.

Care

An underlying theme of many talks was about how creatives need to think more about the impact of what they’re building. To deeply explore the needs of user groups that are not normally considered. An example – Government. Tom Loosemore talked through rebuilding gov.uk to create a less frustrating online experience. He presented solutions to combine data from multiple sources, removing the need for users to re-enter information already stored away somewhere in a database. Reconceptualising user behaviour addressed key issues in new ways, an approach which extends beyond government.

Developers, on the other hand, simply don’t care enough about the products we’re building. The internet is obese, and we’re all too lazy to fix the problem. Maciej Ceglowski’s challenge is to build websites smaller than Russian literature (which is usually fairly small). Remove the oversized videos, uncompressed images, unnecessarily heavy ads – they’re all just bloat. We’re all guilty of ignoring the implications of page load times and need to be thinking more consciously. Give the user critical content first – then stop. Does my user care? No? Then why include it?

Go back to the basics, simplify size, simplify quantity and create a more usable web.

Be Better

Web Directions was a call-to-arms. The web is fresh, it’s pliable and we can still shape it. I’ve been playing with plenty of ideas I’ve learned, I intend to keep learning and experimenting with new technologies, new theories and improving my code in the process. Yes, there will always be more to do, but adopting an integrated approach to thinking, improving code and caring about what we build and who we build for will create an enjoyable, exciting internet for people to enjoy. I’m excited to see what direction the industry will take as it continues to grow.

For some more information and thoughts about the conference, read Amy Balsdon’s Takeaways from Web Directions 2015.

Takeaways from Web Directions 2015

Slack for iOS Upload-1

Imagine spending 2 days at Luna Park. Imagine the best views in Sydney. Imagine drinking from an endless supply of Sample Coffee’s finest cold drip. Imagine fearing for your life on the oldest roller coaster in Sydney. Imagine waves and waves of inspiration from the brightest minds in the game.

This is Web Directions 2015!

What you take away from these two days is what makes it all worth it, so I’ve compiled five points of interest from my experiences at wd15.

Annoy the people you admire

Cap Watkins from Buzzfeed gave the keynote speech. The biggest takeaway for me was his idea of collaboration and cross skilling. Whether you are a PM, engineer or designer doesn’t mean you silo yourself to that one niche. Team culture is valuable, supportive and helps everyone improve. As an eager to learn product designer, having a team full of people willing to share their expertise is a sure fire way to grow not only as an individual but also as a valued member of the team.

Prototype like it’s a prototype

Dan Burka from Google Ventures spoke about how a prototype has to be something you’re willing to throw away immediately. His argument is use it to gauge the chance of product success before building the real thing. In other words, when partaking in a 5 day design sprint don’t sweat the small stuff just do enough to make the software feel like software. Another great speaker, Martin Charlier also made a similar point on this subject that resonated with me –

“build the right product before you build the product right.”

Revisit old problems

One of my favourite talks was by Brynn Evans who is currently working on Project Fi. Her talk centred around how ordinary things could benefit from design process. She highlighted the importance of long standing issues and experiences that haven’t changed in years. She gave a great example of designing a new experience specifically targeted for our ageing population;

Hogeweyk Village in the Netherlands is a ‘Truman Show’ like place for patients with Dementia who are led to believe they are living an ordinary life however their carers are disguised as gardeners and shop assistants. Brynn had a whole bunch of suggestions to make our designs more meaningful (e.g. throw out assumptions, simplify things to make experiences better, expect your users to change and do the research) that I do hear regularly but still great to be reminded!

Slack for iOS Upload

We are the luckiest people alive

Tom Loosemore from gov.uk had me legitimately excited about government service delivery! He spoke about how ‘we’, the people in the room, have the power to reinvent the future and to create something that matters. There is a very obvious gap growing between the expectations people have of web services and the quality of services they are receiving from government. Tom proposed that Australia could be the first government to get this right, after all we have a Prime Minister who wants his party using Slack!

ID your inner critic

Spending most of my time at the design track I became inspired by the widely discussed subject of creativity. Denise Jacobs gave a great talk on our inner critic (which certainly rings true for me and I’m sure everyone reading this). She suggested we ID these destructive patterns and train our brains to adjust with discipline. Using powerful body language to restore confidence was an interesting one!

On the other side of the spectrum the guys from Atlasssian, Alastair Simpson and Nat Jones, who spoke about the importance of a physical space to produce creativity. Not only did they mention creating flexible and engaging environments but also inclusive areas that people are drawn to and feel welcome.

A huge thanks to all for a jam packed 2 days of awesome and inspiring big picture talks.

logo-outline

Contact Info

Sydney
Level 1 6 Bridge Street, Sydney, NSW, 2000

Melbourne
Level 1 520 Bourke Street, Melbourne, VIC, 3000

Copyright 2018 Bilue Pty Ltd ©  All Rights Reserved