Issuu on Google+

Free! 37-page ebook The voice of web design

Issue 275 : January 2016 : net.creativebloq.com

MASTER INTERFACE DESIGN The pro’s guide to the best tools and techniques in UI design

Accessible user experience tips from A Web For Everyone project

Tackle the powerful CSS module to build better sites

Plus! top tutorials

Animate with After Effects, typography in email, the WordPress REST API & more!


PROJECTS CSS3

A b o u t t he a u t h o r

Wes Bos w: wesbos.com t: @wesbos job: Full-stack developer, author, speaker and instructor areas of expertise: HTML, CSS, JavaScript, workflow, tooling q: what was the first album you ever bought? a: Hanson! ‘MMMBop’!

CSS3

Flexbox Desktop 31

Mobile/tablet

46

8

8.4

32

8

12

4.4

38

84

january 2016

Solve your layout problems with flexbox Wes Bos walks through how to use the Flexible Box Layout module to easily centre, align, scale and reorder elements on your web page Have you started using the Flexible Box Layout module (netm.ag/flexiblebox-275) in your projects yet? Although the module has been around for some time, there have been two major barriers stopping frontend developers from using it in their projects. First, until recently the spec was in flux and there wasn’t great support for it. Today, all modern browsers support flexbox (see browser support widget for details). The second barrier is that it is pretty tough to grasp the concept of flexbox. While it is super-powerful, there are a lot of moving parts and it can be difficult to learn. In this article, I will get you up and running with the fundamental concepts behind flexbox.

Understanding these core concepts will open up a whole world of extremely flexible, easy to create layouts.

Next-generation design Flexbox is a next-generation tool to help you create layouts with CSS; whether you want to lay out a section of your website or display a grid of media elements. It enables you to easily align, centre, justify, scale and reorder elements on your page, without having to resort to nasty CSS hacks or fragile JavaScript dependencies. Flexbox can replace floats, positioning tricks, inline-block layouts and even – shudder – table display layouts. If you have ever pulled your hair


CSS3 out wondering why some seemingly simple layouts were difficult or even impossible in CSS, you are going to love flexbox.

Flex elements The magic of flexbox is in the relationship between the parent ‘flex container’ and the children ‘flex items’. In order to take full control of flexbox, you must put aside any previous ideas of floats, positioning and clearing. This is a totally new way of laying out your page. Setting display:flex; on a parent element turns it into a flex container, and all of its immediate children will be turned into flex items. Once you have your markup set up, you can use

Flexbox removes the need for nasty CSS hacks or fragile JS dependencies one of the many available flex properties to create a layout. Note: any of the HTML elements can be a flex container or flex item. Any :before and :after pseudo-elements you have on your flex container will be treated as children, and therefore firstclass flex items.

Rows and columns There are two axes in flexbox that control how the flex items on the page are laid out: the main axis and the cross axis. By default, flexbox is set up so the main axis goes from left-to-right (or the opposite, for languages that read right-to-left) and the cross axis flows top-to-bottom (fig 1). Before you go memorising that, note that this can – and will – all change with the flex-direction property.

FOCUS ON

Flexbox in the wild Bootstrap 4

Just a few months ago, the popular HTML/CSS/JavaScript framework Bootstrap announced its fourth version. Along with a whole load of new functionality, one of the things that had the community talking was the opt-in flexbox support. Bootstrap comes with a grid, which helps designers and developers quickly create layouts by either appending classes like .col-md-8 and .col-md-4 , or extending a selector with @extend .col-md-8 . In the first three versions this was done with floats, and Bootstrap handled everything to do with widths, margins and clearfixing parents. As flexbox is supported by IE10 and up, Bootstrap 4 will still use floats by default, but users will now have the option of turning on the flexbox-based grid instead, as part of the compile. While this feature is still under heavy development, currently there is a _variables.scss partial that contains all of the settings related to your build. One of these is $enable-flex . Set it to true and recompile your Sass build to start using flexbox. You will continue to use your grid the same way you did with floats, but now you have all the added benefits flexbox has to offer.

React Native

Have you heard of React Native? It’s a framework from Facebook that enables you to write iPhone and Android apps in JavaScript and React, and then have your app compile to native iOS and Android code. One of the most exciting parts is that the creators have chosen to use flexbox as the language that handles all the layouts in a React Native app. React Native differs from other JavaScript-to-app frameworks in that it doesn’t run any HTML/CSS on your phone. It simply uses the flexbox spec, which many developers are currently learning, to create the layout for your application. This is then converted into the equivalent styles on iOS and Android. You can draw your own opinions, but I think it’s never been a better time to know JavaScript and CSS!

Fig 1 The default flex-direction set to row

january 2016 85


PROJECTS CSS3

Fig 2 The main axis flipped with flex-direction:row-reverse;

By default, flexbox is set up with flex-direction: row; which means the items flow on the main axis from left-to-right, in a row. We can switch the main axis so it flows from right-to-left by using flexdirection:row-reverse (fig 2). To switch both the main axis and the cross axis, we change the layout to flex-direction:column; . This will alter the main axis and flex item flow from left-to-right to top-to-bottom, in a column (fig 3). We can also start from the bottom and move up by flipping the main axis with flex-direction: column-reverse .

centring items One of the best things about flexbox is that it allows you to align your content in any way

you please – even vertical centring is an absolute breeze! There is often confusion surrounding flexbox alignment, because there are three different properties that we use to modify the alignment of our flex items. One reason for this is that these properties align the items along the main and the cross axis. So instead of asking, ‘how do I centre something vertically or horizontally?’ you must first establish which direction your axes are pointed, and then figure out which CSS property to use to properly align and centre your flex items on them. In the next few examples, I’ll be attempting to perfectly centre my items. However, you should know that each of these properties has a number of alignment options. For a full list, I recommend keeping this CSS-Tricks flexbox reference handy: netm.ag/guide-275.

The cross axis By default, flex items stretch across the entire flex container along the cross axis. If we want to centre items along the cross axis, we can use 

There are three properties we use to modify the alignment of our flex items the align-items property on our flex container and set it to center (fig 4). In addition to stretch and center , we can also use flex-start and flex-end to anchor the items at the top and bottom respectively. Finally, we have baseline , which will align the items along the bottom (or baseline) of your text. This is extremely helpful when you are trying to align items with varying font sizes.

Justifying Along the Main Axis

Fig 3 The main axis switched from horizontal to vertical with flex-direction:column;

86

january 2016

Now we have the centring working along the cross axis – top to bottom in our case – we need to get centring working across the main axis. For this, we use justify-content:center (fig 5). Just like with align-items , we can also use flex-start or flex-end , as well as space-between and spacearound , which will evenly divvy up the remaining space between the elements. This is super-useful when working with grid layouts that don’t add up to 100 per cent of the margin and widths. Just remember, if we switch from the default flex-direction:row; to flex-direction:column; , the main


CSS3 axis can change from left-to-right to top-tobottom. When we switch to column, align-items becomes the horizontal alignment while justifycontent becomes the vertical alignment.

Aligning multiple lines

While align-items and justify-content work great when you have a single row or column of content, things get a little trickier when you’re dealing with multiple lines of content as a result of using flex-wrap:wrap; on the flex container. align-content works just like justify-content , but kicks in when we have multiple lines of content. By applying align-content:center; we can ensure that the lines will anchor in the middle of the cross axis and centre their elements from there. Just like with justify-content , we can also use flex-start , flex-end , space-between and spacearound . However, this time they refer to the space in-between the rows or columns of content, and not the flex items themselves. Now, with just four lines of CSS, we have a bulletproof way of vertically and horizontally centring all direct children of a flex container. .container { align-items: center; justify-content:center; align-content:center; flex-wrap:wrap; }

Filling the space So far, everything we have learned about alignment has to do with the flex container and how it aligns its children. With align-self it is possible to override the align-items property set on the flex container by individually setting align-self to flex-start , flex-end , center , baseline or stretch . Another often misunderstood part of flexbox is how to work with grow, shrink and basis values. It’s helpful to once again throw away any ideas of pixel-perfect grids and embrace that flexbox is, well, flexible. Each flex item can be assigned a flex-grow , flexshrink and a flex-basis value. With these values we can indicate our ideal sizes, and then specify how the items should act in situations where there is extra, or not enough, space. From there, the items will just figure it out for themselves. I like to think of these properties as: ● flex-grow : How do I act when there is extra space available? How will the flex items divvy up the remaining space?

Fig 4 align-items:center; will centre our items along the cross axis, which in our case is top-to-bottom

● flex-shrink : How do I act when there isn’t enough room for all the flex items? Rather than overflow the container, who will give up part of themselves to make everything fit? ● flex-basis : Instead of setting a definite width or a height on your element, ideally what width (as a row) or height (as a column) will it be? Note that while it is possible to specify these properties individually, you will almost always be using the flex shorthand to specify the grow , shrink and basis  values all at once. Check the videos at Flexbox.io for a more detailed description of the  flex  shorthand property.

Growing and shrinking The idea is that we can set our ideal width or height with the basis value, and then when there is extra space available for the flex items, the flexgrow property will decide how much extra to take up. Similarly, when there is not enough space

Fig 5 Justify-content:center; will centre our items along the main axis

january 2016 87


PROJECTS CSS3

resources

Must-have Resources

What the flexbox?!

flexbox.io ‘What the flexbox?!’ is a free 20-video training course I’ve created. In the first half of the course, each video introduces a new aspect of flexbox. I’ve kept these nice and short, so you can reference them later when you need to brush up on a particular part. The second half of the course dives into a real-world example, detailing how we can use flexbox to quickly and easily solve many of the common layout problems we face.

A complete guide to flexbox

netm.ag/guide-275 Once you get the hang of flexbox, you can put the training materials aside. However, it’s helpful to keep a visual reference handy. This fantastic resource from Chris Coyier breaks down each of the 13 different flexbox properties, showing which apply to the flex container and which apply directly to the flex items.

Flexbugs

netm.ag/bugs-275 Flexbox is not without fault, and like anything, there are a handful of cross-browser bugs and workarounds you should know about. Flexbugs outlines a range of known flexbox bugs as well as offering possible fixes and workarounds.

available, the shrink property will decide how much each element will give up (or ‘shrink’). The flex-grow and flex-shrink properties are unitless, proportional values. They describe how much – in relation to all the other flex items – the item will grow or shrink. Let’s say we have two flex items: video and credits. We will set the video to flex:1 1 700px; and the credits to flex:3 3 300px; . Now the parent of both of these items is the flex container, and when it is 1000px wide things work out perfectly: the video takes up its 700px and the credits take up the other 300px. What happens when the flex container is 1500px wide? We have an extra 500px to work with, so where does that go? That is where flex-grow kicks in. The video is set to 1 while credits is set to 3 . That means of all the extra room, credits will

It has been a while since anything this large has come to CSS, and it’s a tough thing to learn take three times (375px) the amount of space the video will get (125px). Similarity, what happens when our flex container is smaller than 1000px? Let’s say it’s 900px: how do the video and the credits act then? Unlike with floats, we don’t just break onto a new line, or scale them down with percentages. Instead, we use the flex-shrink property. Since the credits have a flex-shrink of 3 and the video has a flex-shrink of 1 , this means the credits will give up three times as much space as the video. So since we need to shave off 100px from somewhere, the credits will give up 75px, while the video container will only give up 25px.

Flexbox in 5 minutes

flexboxin5.com For a quick’n’easy introduction to the fundamentals of flexbox, check out ‘Flexbox in 5 minutes’. It’s a step-by-step wizard that will guide you through how to create, style and change your first flexbox-based layout.

Fig 6 align-items:center; will centre our items along the cross axis, which in our case is top-to-bottom

88

january 2016


CSS3 Unknown navigation size Let’s look at some common use cases of flexbox. If you have ever worked with a navigation in a CMS like WordPress, you’ll know that it can be hard to predict how many elements will be included in your navigation. Evenly distributing the space between all the elements requires JavaScript. For example if you have three elements, each one should be take up 33.33 per cent of the width, while with five elements each one should take up 20 per cent. Let’s take a look at this commonly seen code as an example: <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> With flexbox, we can easily create this navigation, and even make it responsive, all with just a few lines of CSS. All we need to do is to set our navigation container (usually an unordered list of items) to display:flex , and then each of the flex items to flex:1 or flex-grow:1; . This will stretch the list items horizontally and fit them perfectly into the available width. The reason this works so nicely is that we set the flex items to grow 1 , which means that when there is extra space left over, it will be divvied up evenly between all the items. For more on this, and to learn how to size your navigation elements differently, make sure to watch the responsive navigation tutorial available on Flexbox.io: wes.io/dWnh.

Equal-height columns

Have you ever wished that CSS had a height:ashigh-as-the-highest-sibling property? We have all been there – we have three columns of content, all of which are different sizes (fig 6). The content is dynamic and the site is responsive, so setting a fixed height on each one is out of the question, and a JavaScript fix isn’t ideal. Earlier we learned that the default of align-items is stretch. This means the flex items will stretch to fit the parent flex container. And how is the height of the flex container defined? Almost always by the height of the tallest content box. Let’s take the following markup, for example. If we render this out with floats and percentage widths, we will see the container is sized by the middle element and the other two are only as high as they need to be.

Fig 7 With flexbox, boxes stretch to fit the flex container and all become equal height

<div class="container"> <div class="box"> <p>I’m short</p> </div> <div class="box"> <p>I’m a pretty tall box that is the biggest</p> </div> <div class="box"> <p>I’m a medium sized box</p> </div> </div> Now, if we simply use display:flex; on the flex container, and set each element to be 33.33 per cent with the flex-basis property, immediately the flex items stretch across the entire cross axis, regardless of how much content is in them (fig 7). .container { display:flex; } .box { flex: 1 1 33.33%; }

Conclusion I hope by now you see the value in learning how to use the Flexible Box module. While it won’t solve every issue you have with CSS, it’s an important tool every designer and developer should know, and have in their arsenal. It has been a while since we have had anything this large come to CSS, and I’d argue it’s one of the tougher parts of CSS to learn. Just remember that you pushed though learning floats, so flexbox is totally something you can master!

january 2016 89


PROJECTS After Effects

A b o u t t he a u t h o r

Andy Orsow w: Startupvideocourse.com t: @andyorsow job: Communications designer, InVision areas of expertise: Product design and videos, illustration, GIFs q: what’s the first album you ever bought? a: Cassette single: ‘Tubthumping’ by Chumbawamba

after effects

Design a branded loading animation

InVision’s Andy Orsow explains how to make a custom loading animation in After Effects, and turn it into a lightweight GIF

Video Andy Orsow has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ gifvid-274

90

january 2016

Good visual design is becoming easier and easier to come by. It’s getting harder to tell who’s got real design chops, and who just has access to really nice templates or UI kits. This means that in order to stand out, you need to go above and beyond what people are expecting. Some of the most memorable touches are the small ones. Think of MailChimp’s famous ‘monkey hand high five’ that shows up when you hit Send on your campaign. Instead of a general success message, as you might expect, they dug a little deeper, and worked their brand into the experience. We won’t be animating any monkey paws here, but we will make a colourful loading animation

that’s easy to customise with your own brand colours and logo. You can see the example here: netm.ag/ gifdemo-275. We’ll use After Effects to create the loading animation sequence, and then bring our exported video file into Photoshop and turn it into a lightweight GIF that can be launched anywhere you need an animated loading element. Before you dive in, you’ll need to pick out four brand colours and have a small, single-colour, transparent version of your logo handy. If you’ve been meaning to learn After Effects, this is a perfect opportunity for you to jump in, create something uniquely yours, and learn some great basic techniques in the process.


After Effects

Step 1 Create a new sequence, setting the width and height to 120 pixels

Step 4 Adjust the fill colour of your shape

Open up After Effects and press cmd+N to create a new sequence. Since our video is going to be a square, instead of the standard 16:9 aspect ratio, we’ll change the width and height to 120px in the composition settings and click OK. The recommended final output of our GIF will be 60px, but we want to be able to account for Retina screens, too.

While your shape is still selected, click the ‘Fill colour’ option at the top of your screen and enter one of your primary brand colours as a hex or RGB value. You can also use the eyedropper tool to sample colours from anywhere else on screen, including colours outside of the After Effects window, which is helpful.

01

Before we continue, let’s make sure our After Effects workspaces are the same. In your top menu, go to Window > Workspace > Standard . This way, when I say “Click that thing at the

02

bottom right of your screen” it will actually be at the bottom right of your screen. Now let’s create a handful of square shapes that will become our animated blocks of colour. Click on your sequence (the black square in the middle of the screen), press Q , then Shift+click and drag a square on screen so the edges extend just outside the edges of the composition. It’s good practice to centre the shape perfectly on screen. In the Align panel at the bottom-right, click ‘Horizontal Center Alignment’ and ‘Vertical Center Alignment’.

03

04

Along the bottom of your screen you’ll see a timeline with a single layer named ‘Shape Layer 1’. Select it by clicking on the name or the blue bar in the timeline, and press cmd+D four times to duplicate it. You should end up with five identical layers in your timeline. These will be entitled Shape Layer 1, 2, 3, 4 and 5.

05

Each shape is going to animate in from a different side of the screen. To make that easy, we’ll change the location of our anchor points ahead of time. Select Shape Layer 2 and press Y to bring up the Anchor Point tool. Then click on your anchor point (it looks like crosshairs somewhere inside your shape) and drag it to the bottom edge of your square. Repeat on layers 3-5, placing each anchor point on a different edge than the last. You don’t need to do anything to Shape Layer 1.

06

Step 6 Change the location of the anchor points on each of your shapes

Expert tip

Tidy your timeline When working in After Effects, your animation timeline can get really complex and disorienting fast. To regain your sanity, tidy up your project by deselecting any active layers and pressing U on your keyboard – this will immediately collapse all your layers. Pressing U again, with no layers selected, will expand all layers to just show any properties you’ve added keyframes to, which also saves space and reduces clutter. Pressing U with layers selected will let you expand and collapse just the selected items, which is also quite handy.

january 2016 91


PROJECTS After Effects Now it’s time to stagger the timing of our shapes in the timeline. Press V to switch to your selection tool, and in your timeline shift+click the blue bars for layers 3-5 and drag them to the right, spacing each out by one second. They should begin at the 1, 2, and 3 second marks in your timeline. If your timeline is too zoomed out, hold down alt and scroll down – this action will zoom you in and out of your timeline.

07

Individually select shapes 2-4 and change their fill colour like you did back in step 4. You can drag your playhead (the vertical red progress line) over the shape you’re editing to see your changes take place. We’ll leave Shape Layers 1 and 5 the same colour, because we’ll be creating a loop that starts and ends on the same colour. If that doesn’t make sense right now, don’t worry – it will.

08

It’s time to preview your handiwork so far. Press the spacebar and watch the colours change on screen. Hit spacebar again to stop it (or esc if this doesn’t work).

09

Click and drag your playhead back to the beginning of your timeline. Select Shape Layer 2, then press S on your keyboard to bring up the scale options for that shape. Now click the stopwatch icon next to Scale, turn off the link icon next

10

Step 14 Tweak your framerate velocity to make your animation slow down at the end

to the scale percentages, and drag the second value down to 0 per cent. A small diamond will show up on your timeline at your playhead’s current location. Congratulations, you just created a keyframe! Drag the playhead up to 1 second and set your shape’s value back to 100 per cent. Another keyframe should show up in your timeline at the playhead. Drag the playhead back to the beginning of your timeline and press spacebar to preview your animation. You should see the shape scale up and cover Shape Layer 1.

11

Repeat those steps again on Shape Layers 3-5, each time starting your animation at the beginning of the layer’s blue bar,

12

which we staggered by 1 second earlier on. When you’re done, the first keyframe of each layer should line up with the last keyframe of the layer below it. When you’ve finished adding your keyframes, preview your work. You should see different shapes sliding in on top of each other from different angles. If that’s the case, move your playhead to 4 seconds and hit N . This will mark the end of your animation, and loop your preview when you hit spacebar again. If Shape Layer 1 and Shape Layer 5 are the same colour, it should form a seamless loop.

13

It’s almost time to add your logo, but not quite. The animation right now is probably

14

looking a little linear (read: boring) – let’s liven it up by changing the easing. While holding the shift key, select the final keyframe of each layer, and right-click on one. Choose ‘Keyframe velocity’, then set the incoming velocity to 100 per cent and leave Dimension X and Y alone. Click OK and preview again. You’ll notice the animations slow down at the very end, creating a more dynamic feel. Now we’re ready to add your logo on top of the animation. In the project panel at the left of your screen, double-click the empty area below Comp 1 and import your image file (it’s best if it’s a transparent image format, like a PNG or EPS.) Then drag it into the beginning of your timeline, making

15

expert tip

Spacebar effects

In Adobe After Effects CC 2015, hitting the spacebar will begin previewing your composition, but hitting it again doesn’t guarantee the preview will stop (you’ll often need to press it twice). Adobe has its own reasons for this, but – call me old school – I want my spacebar to just stop and start, no funky double-taps. To make your spacebar work like it did in older versions of After Effects, expand your Preview panel and change the Preview Favours setting to Length as opposed to Framerate. Step 9 Hit the spacebar to preview

92

january 2016


After Effects

Step 19 Save your animation, selecting ‘forever’ as your loop setting

Step 15 Add your logo on top of the animation

it the topmost layer. You can hit S  again to scale your logo up or down, and use the Align panel again to place it dead centre in the composition. When you’re happy with the size and placement of your logo, click play again and make sure everything still looks good. If it does, it’s time to export your video. Go to File > Export > Add To Render Queue , then set your render settings to Best, output module to Lossless, and choose where to put your video file by clicking the file name in the ‘Output To’ area.

16

and click the play button in the bottom left-hand corner. Playback may not be at 100 per cent speed, so don’t worry too much if it seems slow. You just want to make sure everything has come through OK and that it all seems smooth and seamless when looping. To save your GIF, press cmd+alt+shift+S to bring up the Save for Web window. At the very top, select GIF as the file type and in the preset drop-down above that, choose GIF 128 No Dither.

19

Near the bottom of the window you can adjust the image size down to 60px for final output. Make sure the animation looping settings are set to ‘Forever’, because much like diamonds, a GIF is forever (or at least it should be, anyway). Congratulations! You now have a handmade, branded GIF that you can implement on your website or app, use to add realistic ‘loading’ states to your prototypes, or toss up on Dribbble or Behance for all the world to see.

20

Now it’s time to boot up Photoshop and convert our video to an animated GIF. In Photoshop, go to File > Import > Video Frames to Layers and select your video file. On the following prompt you have the option of adjusting a number of import settings for you video. However, since this animation is so short, we’ll just click OK.

17

To make sure nothing looks funky with your GIF in Photoshop, go to Window > Timeline to bring up the timeline,

Expert tip

Boost your screen space Working with After Effects on a small screen isn’t the most fun thing in the world, but this tip will help you reclaim some much needed screen real estate. Hover your mouse over a panel in After Effects and tap the tilde key ( ~ ) on your keyboard. This will take whatever panel you’re hovered on currently and expand it to fill your screen. To return to your previous view, just tap the key again and resume your work.

18

Step 20 The animation is complete and ready for use

january 2016 93


‹‹


FREe! 30-day trial

Unlimited access to on-demand video courses from leading experts

Visualise data with Angular

Build a data dashboard with this JS framework

The voice of web design

Issue 274 : December 2015 : net.creativebloq.com

Create an icon set in sketch

Design consistent icons with the app of the year

free wordpress theme options

Choose the right free theme for your project Feature

the 15 APIs developers need to know

Super responsive layouts without media queries

Essential APIs to solve most common dev problems


FeatureS Cover feature

68

december 2015


Cover feature

There are a number of ways to create responsive layouts without media queries. Vasilis van Gemert shares some useful techniques, ranging from primitive to highly powerful

Authors Vasilis van Gemert Vasilis (@vasilis) is a lecturer at the Amsterdam University of Applied Sciences. When he’s not teaching web design, he’s probably in his hammock, creating art for the web Illustration Bobby Evans Bobby is an illustrator based in north London, who has worked with clients as varied as Penguin, Habitat and Vodafone. He also runs the award-winning Telegramme Paper Co with Kate Brighouse telegramme.co.uk

T

hanks to media queries, we can create websites that work on any device. Without them the current web simply couldn’t work. But there are other options as well. In certain situations, a different technique can solve our responsive design problems in a more systematic, algorithmic way. If you are, like me, a lazy person, you might be interested in designing these kinds of layout systems whenever possible. Systems like these are self-governing – they have to be able to make decisions for themselves and for us, based on the constraints we give them. We’ve always been able to create flexible layout systems on the web. Even with ancient CSS properties like  float you could create layouts that adapted to different screen sizes. Recent implementations of new CSS features, like flexbox and viewportrelative units, have enabled us to take CSS layout to a level of flexibility we could only dream of before.

december 2015 69


FeatureS Cover feature

Lists CSS columns are perfectly suited to lists, both short and very long

Inline-block By using float or inline-block, the layout will change by itself if the screen is big enough

Float and display: inline-block Let’s start this exploration of layout systems with a simple example. Many blogs show a list of introductions on their homepage. On a small screen you probably want to display these articles one on top of the other, but on wider screens a layout with more than one column makes sense. If you give each article max-width: 20em and tell it to float: left , the browser will simply show as many columns as possible, depending on the width of your screen. This has worked since we invented floats. Floated items do not automatically clear; they bump against higher items. This means a blog that has been laid out this way will sometimes show gaps. Depending on how you look at it, the chaos of floating things can either be a cause for concern or a wonderful, serendipitous design feature. You can think of these gaps as being chaotic, or you can call them ‘active white space’ and be very happy with them. If you don’t like white space you can use display: inline-block; . Float is a very simple technique that results in primitive yet flexible

70

december 2015

responsive layout systems. It works just fine without media queries, although you might want to add a few to tweak the design if needed. Bare-bones floating might not be perfect for all use cases, but it’s definitely an option worth considering.

Multi-column I’m not sure why – perhaps because of buggy and incomplete implementations

Viewport boundaries CSS columns only work for articles if the content fits within the boundaries of the viewport

Horizontal scroll CSS columns might work for articles if we can convince the user to scroll horizontally

the viewport. People simply don’t want to scroll down and up again while reading. There is a very nice and simple way to use columns in articles, but only if you can somehow convince your users to scroll horizontally. You can create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 per cent of the viewport, and by telling it to use columns of no less than

Float is a very simple technique that results in primitive yet flexible responsive layout systems. Bare-bones floating might not be perfect for all use cases, but it’s definitely worth considering – but you don’t see many websites that use CSS columns. This is a pity, since it’s a highly flexible technique. It’s perfect for lists of links, like navigations, footers, search results or photo blogs. CSS columns are almost never used for articles. They become horrible to use when the article is higher than

20em. The problem you now need to solve is how to explain to your visitors that they should scroll horizontally. You could add new UI elements to clear this up. Or if you’re lazy, you could choose to always make sure the columns never fit completely in the viewport. It’s remarkably simple to achieve this. These few lines of CSS are all you need:


Cover feature Grids and shapes

Em units Text set with em as a unit will be too big on small screens for this particular design

article { columns: 20em; /* never be smaller than 20em */ height: 100vh; /* be as high as the viewport */ width: 75vw; /* be 75% of the width of the viewport */ } There are many reasons why CSS is awesome, but the fact that the initial value for overflow is visible is definitely one of them. Without that weird but fantastic CSS property this multicolumn layout wouldn’t work.

Flexbox and the viewport Tab Atkins gave a very clear description of what flexbox is: “Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together)” That sounds a bit like float , but of course it’s much more powerful. With flexbox you can create simple looking layouts that would have been impossible a few

years ago. For instance, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. I used this last option to lay out the list of links to my online activities on my homepage. I didn’t want this list to be an orderly multi-column layout, I wanted the browser to simply fit as many items on each row as possible. For the first version of this design I used this code:

Not all content needs a design system. There are many things – like longer, one of a kind articles, books and magazines – that need to be carefully crafted by hand. To design this kind of content you need fine control over how things are laid out. Many magazine designers have been laughing at the web for ages, since we couldn’t use shapes to lay out text around images. Quite a few browsers have implemented CSS Shapes, which lets you create fantastic, magazine-like layouts. Layouts that use these shapes a lot will probably need media queries to make sure everything works on all screen sizes. But the things we will be able to do with them will be amazing. More and more browsers are also starting to ship experimental implementations of CSS Grid Layout. This specification lets you define table-like structures you can place your content in. Its true power lies in the fact you can visually rearrange the content in any way you want, while the source order stays the same. This in combination with media queries will allow you to create websites that present the content in a truly optimised way for any viewport. Content choreography, as Trent Walton calls it, will finally be easy to do. I’m especially looking forward to seeing the fantastic things we will start to make once we start combining CSS Shapes and CSS Grids with viewportrelative units. My mind is blown already.

ul { display: flex; flex-wrap: wrap; font-size: 2.5em; } This looks OK on large screens, but is problematic on smaller screens (see image above). I wanted all items to always be visible inside the viewport, no matter the size. To fix this, I could have used media queries, of course. But wouldn’t it be great if the browser could somehow adapt the font size

Example Here, Emil Björklund uses CSS Grid Layout, CSS Shapes, the clip-path property and more

december 2015 71


FeatureS Cover feature CSS Columns for article layout On the web we are used to scrolling from the top of the page to the bottom. This is why we never use multi-column layout for long articles. Scrolling to the top of the page is not what you want when you’re halfway through reading an article. This is unfortunate, since multi-column layouts are fantastic for long texts. There is a reason why they are so successful in paper magazines and newspapers. There are two ways to use multicolumn layout on the web. A few years ago Håkon Wium Lie of Opera Software proposed a new way of reading long articles (netm.ag/lie-274): no scrolling, but ‘paging’ – you would flip from page to page like you do in books. With this you could create the same kind of layouts that we see in newspapers, only much more flexible. Unfortunately, no browsers were interested. The other way to use multi-column layout for long articles is by making the article as high as the viewport, and scrolling sideways. The problem here is how to convince your users this is a good idea. There is a very interesting startup, Blendle (blendle.com), that succeeded in convincing its readers. With a Blendle account you can buy and read complete articles from Dutch newspapers and magazines. It uses a multi-column layout to give its site a magazinelike look and feel, and by scrolling sideways it remains usable. The result is remarkably nice to look at and to use.

Blendle This Dutch startup convinced users to scroll horizontally

72

december 2015

to the size of the viewport? It turns out that, indeed, you can use viewportrelative units to do exactly that.

Viewport-relative units Instead of using em and media queries to make sure our layout works in different viewports, you can use the vw unit, which is a percentage of the width of the viewport. If you set the font size

is an even bigger problem since there is no way for the user to increase the font size. Browser zoom does not work with viewport-relative units! You can make sure that the font size never becomes too small by using a calc function: font-size: calc(1em + 1vw) . This works like a minimum font size. But while this is a clever trick to make sure our text is always accessible, it

The beauty of these techniques is that you order the browser to behave in a certain manner. Instead of designing every possible layout, you let the browser and the content figure it out to 2.9vw (for example) the layout will always fit in the viewport, as you can see in the example pictured below. There is a serious usability problem with using the viewport width as a unit for text though: it can easily become too small to read on very small screens. This

doesn’t solve the problem of how I can make all the links on my homepage fill up any viewport.

Viewport calculations It’s not really possible to always perfectly fit any text into any viewport

Resizing content By using vw as a unit, we can resize the content as if it were an image

Calc plus vw If we combine calc with vw and vh units for font size, we can create text that always fills the viewport


Cover feature

Calc function If we use a calc function we can make sure the content will fill up the viewport

with just CSS, but we can come close. There’s a brilliant CodePen (netm.ag/ voor-274) where Dillon de Voor explains this line of code:

screen sizes you need to define exceptions. For these cases media queries are usually the tool we need. And they’re fantastic.

font-size: calc(4vw + 4vh + 2vmin);

Container queries

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport. For my own site I changed the numbers in this calc function a little bit, and now the layout on my homepage does what I want. The content will always try to fill up the viewport as much as possible.

Quantity selectors The beauty of these techniques – float, CSS columns, and flexbox in combination with viewport calculations – is that you order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together. Of course, this doesn’t always work. Often you need finer control over the different layouts, and for extreme

Soon after we started creating responsive designs with media queries, we found out that, while they are extremely useful, they can’t always help us achieve what we want. I bet you’ve often wished something like ‘element queries’ existed: changing the way elements look depending on their own size, instead of on the size of the screen. It makes so much sense. The reason these don’t exist yet is because they could cause endless loops. What should the browser do if you tell it that elements wider than 30em should be 20em wide? The Responsive Issues Community Group has come up with a possible future solution: we can’t use element queries, but we might be able to use container queries. With a container query you wouldn’t be able to style the element itself, you could only style its children. They might look something like this:

article:media( min-width: 30em ) screen { … } The proposed syntax will probably change in the future, but the basic idea makes sense.

Quantity selectors Aside from screen size, there are other conditions you can use to style things with. There have been a few brilliant articles recently about styling things based on quantity. It turns out you can apply different styles to an element based on the number of siblings it has. This technique doesn’t use media queries or container queries, of course; it makes very clever use of type selectors. There are some wonderful and very useful things you can do with this technique. Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. You can now change the way they look based on the number of results. It’s handy for filtering as well, as you can see in the example

december 2015 73


FeatureS Cover feature

Resources

Container Queries

Examples in this article

netm.ag/pickering-274 An article written by Heydon Pickering

netm.ag/marquis-274 In this, Mat Marquis explains the current state of container queries

The best way to learn new techniques is by playing with them. Here’s a list of all the examples I used in this article.

A Dao Of Web Design

Grid by Example

netm.ag/allsopp-274 John Allsopp’s all-time classic about the flexibility of the web

gridbyexample.com A fantastic site with lots of practical examples about Grid Layout, by Rachel Andrew

Viewport calculations CodePen

CSS Shapes 101

netm.ag/voor-274 A brilliant mathematical explanation of viewport calculations by Dillon de Voor

netm.ag/soueidan-274 In this, Sara Soueidan explains in depth what you can do with CSS Shapes

● Floating blogs (netm.ag/floating-274) ● A multi-column photo blog (vasilis.nl/voto) ● Multi-column article (netm.ag/multi-274) ● A list of links (vasilis.nl) ● Mixing vw, vh and vmin (netm.ag/vw-274) ● Filtering with quantity selectors (netm.ag/ quantity-274) ● Playing with Grid Layout and CSS Shapes (netm.ag/layout-274)

Quantity Queries

74

december 2015


Cover feature

Small sizes The size of the images is small, in order to fit all the pictures of the speakers inside the viewport

Clever design By using a combination of flexbox, quantity selectors, and a few viewportrelative units, clever design systems emerge

above, in which it has been used to enable users to filter all speakers of the Frontend Conference in Zürich. Initially, the user can see all the speakers and hosts. All images are small so they fit within the viewport. But when they filter the results to only show the hosts, and not the speakers, there’s much more room. This brilliant technique gives us the possibility of filling up the viewport with just the two images. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. Luckily for us, Heydon Pickering has done a fantastic job in explaining quantity selectors in this article: netm. ag/quantity-274. article { flex-basis: 100vmax; } article:nth-last-of-type(n + 2), article:nth-last-of-type(n + 2) ~ article { flex-basis: 50vmax; } article:nth-last-of-type(n + 6), article:nth-last-of-type(n + 6) ~ article { flex-basis: 33.33vmax; }

Make some space When a filter returns fewer results, the individual images take up much more space, of course

This block of code tells the browser each article should preferably be as wide as the longest side of the viewport. But if there are two or more articles, they should be 50 per cent of the longest side of the viewport. And if there are six or more, they must be 33.33 per cent. Vmax doesn’t just fill up the viewport in an efficient way, it also changes the

New CSS features like flexbox and viewport-relative units have made this way of designing much more powerful. We’ve only scratched the surface of these super-flexible, clever layout systems. And the results are already fantastic. I’m looking forward to seeing the brilliant stuff you come up with once you start exploring the possibilities.

We have always been able to let the browser decide the layout based on a few orders. CSS features like flexbox and viewport-relative units make this approach much more powerful composition depending on the ratio of the viewport. With just a few lines of code you can now create this layout system that responds to the content and the viewport.

Is this ideal? We have always been able to let the browser decide what the layout should look like based on a few clear orders: use as many columns as needed, as long as they are not smaller than 20em. Ideal for lazy designers and developers.

Sure, these kinds of design systems can’t be used in every single use case. There are other CSS modules – like CSS Grid Layout and CSS Shapes – that give us fine control over our compositions. But whenever possible, we could let go of this control and let the browser and the content figure things out. Or, like John Allsop says in ‘A dao of web design’: let’s “accept the ebb and flow of things”. For more on responsive layouts, see p84

december 2015 75


‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹ ‹‹

‹‹

@

‹���

‹‹

@ $$$

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

@

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹ ‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

@

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

API Request

‹‹

‹‹

‹‹

‹‹

‹‹

❤❤

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹ ‹‹

❤❤

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

server/ data source

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹


‹‹

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

‹‹

‹‹

‹‹ ‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

App client ‹‹

‹‹ ‹‹ ‹‹

‹‹

‹‹

‹‹

‹‹

‹‹ ‹‹ ‹‹ ‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

There may be no API more responsible for the growth in publicly available APIs than Google Maps. The search giant’s geographic service is now on millions of websites and has become the de facto standard for embedding location maps. Pair its ubiquity with the rise in mobile and it becomes a necessary part of any developer’s toolbox. A basic use case is plotting places, such as local search results, as markers on a map. You might also add paths for multiple points. More advanced usage creates interactions between frontend code and the map – for example, click a search result and highlight the place on the map.

‹‹

‹‹ ‹‹

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

Maps 01 Google netm.ag/maps-274

Adam Duvander

‹‹

API Response

‹‹

N

ew developer tools are being released daily, and at times you’ll probably find yourself choosing between doing your real work and exploring new technologies. Among these developer tools are at least 14,000 public APIs, provided by companies to save time, directly solve developer problems or augment their popular services. While disappearing for a day or two diving into something new can be great fun, not everything immediately leads to useful results. I’ve put together a list of great APIs, based upon years of research (and a few opinions). So instead of spending the rest of your life exploring every API, you can first focus on the 15 in this article.

Adam helps developers become more productive and creative, with a special focus on APIs. He has written for Wired and served as editor of ProgrammableWeb, the journal of the API economy adamd.org

‹‹

‹‹

Adam DuVander counts down the 15 APIs you need to solve the most common developer problems, so you can focus on building something new

Author

‹‹

‹‹

the 15 APIs developers need to know @

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹


@

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

Features Second feature

Google Maps Google Maps visualisations now go beyond basic markers, as with this demo

‹‹

‹‹

‹‹

‹‹

animating flights in and out of London

structured commands, so anyone can create voice applications

02

Google Maps Geocoding API netm.ag/geocoding-274

Google Maps has become a suite of APIs, but this one deserves to be called out on its own. The Google Geocoding API accepts a location name – such as an address, city, or postal code – and returns the geographic coordinates needed to plot the place on a map. There are plenty of other options, but none rival the quality of Google results at a global scale. For one, the company starts with a parcellevel lookup, then hones the data using its Street View technology. Note that if you use the Google Geocoder, you must combine it with a Google Map.

03

IBM Watson

developer.ibm.com/watson

Best known for beating Jeopardy champions at their own game, IBM’s artificial intelligence service is also available via API. The technology employed by Watson is broadly called natural language processing (NLP), and with it Big Blue provides developers access to years of research via simple

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

‹‹

Facebook Among Facebook’s developer tools is wit.ai, which converts natural language into

‹‹

78

december 2015

FullContact FullContact works by turning email addresses into full profiles, such as this one for the company’s CEO

RESTful calls. The company’s recent acquisition of AlchemyAPI extends the suite of intelligent calculations to include visual identification. Among Watson and AlchemyAPI’s toolset are features that allow developers to determine keywords in a block of text, extract relations and other data from any text, and even recognise faces or objects in photos. If you need some intelligence in your app, you’d be silly to build the NLP and other technology on your own. Instead, focus on what your app will do with that intelligence.

04

FullContact

fullcontact.com/developer

From one kind of intelligence to another, FullContact provides information about the person behind an email address. From that one piece of data you can determine full name, age, location, gender and social network accounts. The service also accepts as input Twitter username, Facebook ID, or phone number in place of email address. You won’t find a trove of data for every single email

address, but in many cases you’ll find enough to determine the user’s company and their social influence. The service is especially useful for sales, which is why you’ll also find a FullContact service for company data, a business card reader, and even a disposable email identifier. Newcomer Clearbit is making progress, but FullContact is well-funded and has a four-year head start.

05 Twitter dev.twitter.com It’s hard to argue with the immediacy of Twitter, which is why every developer should consider how to incorporate the service. Depending on your audience, Twitter may be a great form of identity, speeding up or eliminating a registration process (see Stormpath). For almost everyone, the Twitter API can help expand your reach by enabling your users to share your application with their followers. Of course, your app can only tweet with their permission, but having their credentials can speed


Second feature

06

Facebook

developers.facebook.com

Speaking of services with a lot of users, you’d be crazy not to give Facebook integration a shot. Again, you need to know that your audience frequents Facebook, but with over one billion active users, there’s a good chance. You can use Facebook for social login (see Stormpath), sharing and app monetisation. The company has recently restricted what data is available to applications, but still left plenty of room for a rich developer ecosystem. Further to this, Facebook has its own natural language platform, Wit.ai, and mobile backend, Parse. There’s plenty to check out in the Facebook API.

Stormpath

stormpath.com

If you’re looking to perform any kind of registration on your site, don’t reinvent the wheel. Stormpath is a secure user management API with built-in support for Facebook login (and a few others). If you’re using a social network for identity only, it makes sense to build on top of Stormpath rather than keeping up with the quickly changing social API landscape. It maintains user profiles, allows for authorisation roles, and handles forgotten password flow. Stormpath supports Facebook, Google, LinkedIn and GitHub. For Twitter support (and about 100 others), consider OAuth. io, which partners with Stormpath for its non-login features.

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

07

‹‹ ‹‹ ‹‹

up the process when a user is ready to share. Some may remember a series of Twitter guidelines that were widely interpreted as unfriendly to developers. The company has grabbed control of its user experience, but its reach cannot be denied. Its user base makes it an API to know.

‹‹

Twitter The One Million Tweet Map uses the real-time Twitter Stream API to display new geolocated tweets

‹‹

objects within photos, and calculates a confidence score

Stormpath Add social login functionality to your application without integrating directly with multiple social networks

‹‹

Alchemy AlchemyAPI’s Vision – part of IBM’s Watson suite – recognises

Twilio believes its API is so easy that anyone can use it. That’s why every new employee, as part of their welcome to the team, prepares an app to demonstrate to the entire company. When Michael Selvidge joined Twilio in 2011, he saw his app as a chance to share his love for the American musical duo Daryl Hall and John Oates. Selvidge used Twilio’s excellent documentation to walk himself through creating a text-to-speech menuing system that would allow callers to select a song by the band to play. With that, Callin’ Oates was born. It was a huge success: thousands of people called in the first few days, with dozens of media outlets covering what Selvidge called ‘Your emergency Hall and Oates helpline’. On the first anniversary of Callin’ Oates, Twilio announced it had been called over one million times. Selvidge has also celebrated the first anniversary with a few more hotlines: Bob Dialin’ (Bob Dylan), Diamond Rings (Neil Diamond), Phil Call-ins (Phil Collins), and If You Ring Me Now (Chicago). See the original at callinoates.com or by calling 01 719-26-OATES. Alternatively, find all the Twilio fun at netm.ag/oates-274.

‹‹ ‹‹ ‹‹

Fun with Twilio

S3 08 Amazon aws.amazon.com/s3 When your app grows past the prototype stage, you’ll need storage options beyond your local machine. You may surpass the capacity of shared hosting or even dedicated drives. In certain

december 2015 79


Features Second feature cloud hosting scenarios, you won’t even have permanent storage. For a reliable, scalable file system, you need an object storage service like Amazon S3, (‘simple storage solution’). This offers handy features, including letting users upload directly to your storage bucket, and options for replication and versioning of files. Amazon is the leader, but some of its competitors have S3-compatible services. If you aren’t using Amazon for cloud computing, check with your provider, because your app may run more efficiently if it’s using object storage within the same data centre.

09

Dropbox

dropbox.com/developers

Where you store your files is different from where your users’ files may reside. Over 400 million users sync files across Dropbox’s servers, making it an excellent API for file access. With users changing devices, it may be more likely that a file exists in Dropbox than on the computer or other device on which they’re using your app – bypass file

upload by connecting to their Dropbox account. Developers have built image gallery services, static site hosting and simple alternatives to file upload using Dropbox. For apps with an enterprise focus, consider Dropbox for Business or the company’s rival Box.

Apps 10 Google developers.google.com/google-apps With millions of organisations using Google Apps, you may find yourself helping out non-technical co-workers who use them in their workflow. For example, when new items are added to a spreadsheet, perhaps you send an email or add someone to your beta version. Many of these processes can be automated using tools like Zapier or IFTTT. For others, you can integrate Google Apps into your company’s systems using this API.

11

Stripe

stripe.com

If the past few years have shown us anything, it’s that if you want to collect

payments, you need to use Stripe. The startup has proven that clear, friendly and interactive documentation leads to incredible levels of adoption. PayPal’s Braintree has made excellent progress, but if you’ve already selected Stripe, you might as well take a half day (or less) to learn its API. At its heart, Stripe has a simple use case: accept payments from customers. The API opens up many more possibilities. Using its webhooks, you’ll be able to automate communications and customer onboarding (and off-boarding). Goodbye manual tasks!

12

Twilio

twilio.com

Often uttered in the same breath as Stripe, Twilio is another developer favourite. The telecommunications company provides a simple, welldocumented API for voice and text. Send or receive phone calls, SMS text messages, MMS images and more. You can build with Twilio as the basis for your app or as a valuable addition (such as two-factor authentication).

‹‹ ‹‹ ‹‹

‹‹

‹‹

‹‹ ‹‹ ‹‹

What is a Webhook? Many of these APIs provide real-time updates via webhooks. Rather than calling the API periodically to check for new data, you supply the API provider with a URI on your server to receive updates. Often the accompanying changes are sent as part of the webhook, but at a minimum you’ll know when you need to connect to the API for the latest changes. The alternative is called ‘polling’, and can be time-consuming and expensive for both your applications and the provider’s servers. Webhooks are at the core of services like Twilio, which need to alert your applications when new phone calls or texts arrive. Choosing APIs with webhooks can make your application more reactive, reduce API calls, and give you plenty of opportunity to create automation to save hours of manual work. Amazon S3 SmugMug is a photo sharing product that uses Amazon S3 for storage so that it can focus on building visualisation and sharing tools

80

december 2015


‹‹

A dev’s best friend

‹‹ ‹‹ ‹‹ ‹‹ ‹‹

These and other APIs will help you supercharge your abilities. With repetitive problems taken care of, you’ll be free to focus on the part of your job that only you can perform. You may not find yourself using all 15 of these right away, but take the time to have at least some familiarity with the APIs in this article and you’ll be ready when your next project requires one of the 15, or a similar service. Read some documentation, try out some code, and see what’s possible. For a printable cheat sheet and more resources to get started, visit everydeveloper.com/15apis.

‹‹

sendgrid.com/docs

Transactional email is different from marketing email in that it is typically one email sent at a time to a single recipient. The message is highly targeted, with common examples being receipts,

‹‹

SendGrid

Collaboration has always been important within organisations, but increasingly distributed workforces are pushing the toolsets virtual. Slack, net’s Game Changer of the Year 2015, has become the popular choice for company chat (as well as knowledge and file-sharing). Whatever tool is at the centre of your collaboration, you want to be able to write code against it. Slack has a handful of built-in integrations, such as GitHub

‹‹

14

15 Slack api.slack.com

and Travis, but also provides an API for your own applications. You can listen for real-time events, access channel history and files, and post messages with bots. You can even incorporate build and deploy workflow into Slack so everyone is on the same page. HipChat is a competitor with similar features, but current momentum is in Slack’s favour.

‹‹

If your team is larger than just a handful of people, those sending marketing email are unlikely to be technical. It’s a controversial thing to say to developers, but you really should let marketers choose their own tools. Millions have chosen MailChimp, which is why it’s an API you should know, too. No matter what marketing email API you support, look in the docs for list management features and webhooks (see boxout opposite) to provide realtime alerts for as much functionality as possible. At a minimum expect notifications for unsubscribes, so you can build clean list management into your applications.

password resets, account confirmations and social notifications. SendGrid was the first to bring transactional email to developers. Its offering has since expanded beyond email delivery to include real-time email data (via webhook), triggered responses, and even some marketing features. At the very least, any app with user accounts or ecommerce will need to send transactional email. SendGrid has plenty of competitors, but the most well-known is likely MailChimp’s Mandrill.

Second feature

‹‹

13 MailChimp kb.mailchimp.com/api

‹‹

@

‹‹ ‹‹ ‹‹

Dropbox For the most common use cases, Dropbox uses

MailChimp Before you code something against MailChimp, make sure it isn’t one of the over 750 integrations that

SendGrid SendGrid’s Code Workshop generates code in your favourite language from a fillable form

likely to make you smile (ledhack.org/imma-let-you-finish)

‹‹

Slack There are plenty of productive Slack integration examples, but random interruptions from Kanye West might be the most

‘drop-ins’ that let you integrate with minimal code

‹‹ ‹‹ ‹‹ ‹‹ ‹‹

has already been built

‹‹ december 2015 81

‹‹


‹‹


FREe! 37-page ebook

Complete prototyping chapter from The Mobile Frontier

The beginnersâ&#x20AC;&#x2122; guide to Git Track a project with Git version control

The voice of web design

Issue 270 : Summer 2015 : net.creativebloq.com

Better hybrid apps in 10 steps

Build native experiences with web technologies Project

6 top methods to detect and manage screen rotation


Opinions, thoughts & advice

Business

The UX of things

28

With the rise of smart objects, UX designers are required to dip into products. Dan Goodwin looks at the difference in user expectations

INTERVIEW32

T-shirt guru and Cotton Bureau co-founder Jay Fanelli gives the final word on why he shut up shop on United Pixelworkers

Q&A41

Agieszka Gasparska, founder of Kiss Me I’m Polish, shares her thoughts on keeping the magic in our websites

Remote culture

No Divide’s Ryan Taylor explains how remote agencies combine the perks of being an employee with the freedom of freelancing Let’s for a moment divide everyone who works in the web industry into two groups. People who work for someone else (such as an agency), and people who work for themselves (freelancers). Each group has its pros and cons, and what’s interesting is that often a pro for one group is a con for the other. For example, as a freelancer you can pick and choose the projects you want to work on (pro) but as an agency employee you often just have to work on what is given to you (con). As an agency employee you don’t have to be on the constant lookout for new clients and worry about where your next pay cheque is coming from (pro), whereas as a freelancer you do (con). Wouldn’t it be great if there was a third group that was able to take many of the aforementioned benefits but as few of the disadvantages as possible? Like Blade the


Opinion

Daywalker – all of a vampire’s strengths, none of its weaknesses! I think the answer is a combination of evolved company culture and remote working.

The remote agency

● We can hire the best talent, regardless of where they are based

● We don’t have the overheads of renting office space

● Nobody has to commute (not having to commute to Leeds saves me seven and a half hours a week!) ● We’re not tied to the traditional 9am-5pm office hours

change of culture Culture is a difficult thing to define. What works for us may not work for you, because culture grows from the ideas and behaviour of the people in a group, and every group has different people in it, right? All you can do is set the stage for the type of culture you’d like to nurture, place people on that stage and see how things unfold. There are a number of things that work well for us. Firstly, we don’t care when you work or where you work as long as the work gets done. We’re not tapping you on the shoulder every 10 minutes to see how you’re getting on. A lot of traditional employers freak out about this for some reason, but

The fact of the matter is that a number of our clients are based overseas. We’ve never met them in person. So why do we need to work in the same space? the beauty of tools like GitHub, Dropbox and Slack is they’re constantly and  passively updating everyone on what’s going on. We all know that on Tuesday, Matt fixed four bugs and built three templates on project A – without any of us having to speak to him. Crack on, lad. Which leads to my second point: everyone has access to everything. Every project, every document, every file, every GitHub repository, every client. There’s a hum, a rhythm, to the company that everyone’s tuned into. We all roughly know what’s going on with any given project, even if we’re not working on it. The interesting by-product of this is spontaneous contributions. One of us can chip in with an idea or a viewpoint that hasn’t previously been considered, and it strengthens the project as a whole.

Thirdly, everyone’s opinion is valid. Technically Dan and I are the directors of the company and Matt and Sam are our minions (joke). But we don’t act like there’s a hierarchy – we encourage people to speak up. Finally, when we Skype we always turn on video. Because we are all remote it’s good to have that human connection, even if it can lead to Dan joining a conversation halfway through brushing his teeth. Sometimes we even leave the video on while we work. Our aim is to give everyone at No Divide the pros of being freelance and the pros of being an agency employee. Is it time to think differently about the way you work?

PROFILE

Last year Dan Edwards and I founded No Divide (nodivide.us). We were two freelancers who’d been collaborating pretty much exclusively for a couple of years. When we decided to officially join forces, we knew from the very start that we would be a remote agency. This was both through choice and necessity. I’m based near Leeds and Dan is in Chichester, placing us roughly 250 miles apart. The fact that geographically we are so divided is one of the things that contributed to our company name. We also recently hired two developers, Matt West in Northampton and Sam Beckham in Newcastle. The fact of the matter is that a number of our clients are based overseas. We’ve never met them in person. So why do we need to work in the same space? Being a remote agency has a huge number of benefits. For example:

Ryan is the technical director and co-founder of No Divide (nodivide.us), the author of Version Control with Git and co-creator of oozled

summer 2015 27


VOICES Essay

28

summer 2015


Essay

user experience

The UX of Things Illustration by Ben Mounsey

The UX of a website is very different to that of a smart object. Dan Goodwin explores how designers need to adapt to survive

A little while ago, a smoke detector was released onto the market that promised to revolutionise smoke detection and provide a beautiful user experience. I personally have never had any particular problems with the UX of my smoke detectors: they beep when there’s some smoke or when their battery needs changing, and that’s pretty much all I need them to do. But some people obviously thought that some folks would like a smoke detector that talks to them in a calm voice and lets them wave their hands (rather than a tea towel) at them to shut them up. I don’t have a problem with that either. Things didn’t go super-smoothly for the smoke detector with the beautiful user experience when it first launched. There were some problems with the whole waving at it to silence it thing (it turns out that might be the sort of thing people fleeing a fire might do). Some people complained about the fact that the thing was square. This meant that they had to line it up with the walls so it looked right, which made it that bit harder to install than most traditional smoke detectors, which were round. But the real biggie was that it woke quite a lot of people up in the night with false alarms. And because the smoke detectors were all networked together (that aspect worked just fine), they typically woke up the whole family. Rather than the beautiful user experience these folks had presumably hoped for, it was probably a scary and traumatic experience.

To the best of my knowledge these problems have all been ironed out, and if you go shopping for the smoke detector now, you’ll probably struggle to find any of the poor reviews that troubled the product range for a while. I guess if you want to make it hard to find the bad things people have said about your product, it helps to be bought out by an internet search corporation. I’m interested in this story because it’s a fairly highprofile example of things not going too well for a new physical product. A brief bit of research into the team behind the design suggests that they’re all very experienced designers of connected physical products. And yet even they were plagued with a bumpy launch. Specifically the bumpy launch of a product that people depend on to save their lives. I don’t believe there were any failed alarms – alarms that should have gone off but didn’t – but the problems folk did have would make you nervous. I’d bet that some people quickly opted to return their beautiful user experience smoke detector and go back to more familiar and trusted old-school devices.

The physical web The arrival of connected devices, the physical web, (whisper it) the Internet of Things, means we will all get to apply our skills to the design and build of physical products and the services around them. It’s a truly exciting time, and I can see past the hype of a toothbrush that reports brushing velocity, pressure and direction

summer 2015 29


VOICES Essay history to me and my friend, my dentist, and my dental plan provider. I know that in the right hands, connected things can and will help solve serious problems for us as individuals and for society as a whole. I’m a UX designer, it’s my responsibility to help the team I’m working with to create the best user experience they can for the things we work on. I do that by spending time learning about and talking to users, and making sure what we learn drives everything the team does in the design and build of our products.

Changing roles Even before the Internet of Things started showing up, I’ve been aware that the scope of the job I do has increased and shifted over time. A couple of years ago if you’d asked me what contributes to user experience, I might have said something like user flows, user interfaces, structure and labelling, interaction design, and copy and microcopy. But now I’m conscious of how much more contributes to a user experience. How users first learn about our

everything we use. But I also understand it’s probably an unrealistic one. Going up against this, as developers of apps and websites (let’s go crazy and say software), we’ve settled ourselves into a comfortable world of agile/lean/MVP/ iterative/keep changing stuff quickly all the time. We’re used to being able to launch things that we know aren’t perfect, aren’t feature complete. Things that may have passed a quality control threshold that allows the release of something with known problems and bugs. We can improve our products, add (and take away) features and fix things that go wrong quickly with a change to a script, with continuous deployment, with the release of an update. And whilst we can still do some of that with connected physical devices, we should expect our users’ tolerance for problems with things they’re used to relying on day-in, day-out, to be lower. And their tolerance for problems with things that affect their family’s safety (or things that might have cause to wake them up in the middle of the night with a loud alarm) non-existent.

With apps and websites, we can fix things that go wrong quickly with a change to a script. We should expect our users’ tolerance for problems with physical devices, things they’re used to relying on day-in, day-out, to be lower

Reliability and availability And now we’re starting to work on physical products, where I think our users’ expectations of function and availability are different to those for websites and apps. Perhaps this will change, but right now we’re used to a washing machine that just works, not one that becomes unresponsive when the router flips out or that might need an urgent security patch when a vulnerability is discovered in Bash. This expectation of reliability and availability is one that I believe many users will carry across into connected products. It’s actually an expectation that I believe, in an ideal world, we could all carry across into

30

summer 2015

So what I think we need to do as we inevitably get sucked into designing physical products and the services that surround them, is to basically just slow down a bit. Strike a balance between MVP and whatever the opposite of MVP is. Conduct proper extended beta trials, prior to release, with users who thoroughly try out our things in their own environment for an extended period of time. We need to acknowledge that we will have to take responsibility for some things that we’re not used to working on that contribute to a user experience today. Don’t be afraid of them, and don’t ignore them or dodge them. Take the time to help the team to uncover them, acknowledge them, understand them, learn about them, and deal with them. Dan Goodwin will be talking about The UX of Things at Generate London in September: generateconf.com

PROFILE

things; where they go to learn more; the description, screenshots and ratings on an app store; the emails they get as they register, forget passwords, cancel, resubscribe. The myriad channels they have for getting advice and support or learning things about our products (some of which are within our control, many of which aren’t). The performance and reliability of our things and how they learn about problems and how to fix them. All of these things and many, many more contribute to the user experience of our products.

Dan (bouncingdan.co.uk) is the user experience director at fffunction. He has 15 years’ experience in software and web development, and loves user research


‹‹


FeatureS Cover feature

Hats, schedules and accountants … designer Yaron Schoen walks you through the pros and cons you should consider before becoming a freelancer

Authors Yaron Schoen Yaron is a product designer based in Brooklyn, New York. He has over 15 years of experience, and recently started his own design studio that was acquired by Compass yaronschoen.com Illustrat ion Steve Simpson Award-winning illustrator Steve works for a diverse range of clients across the globe. His creative approach combines traditional skills with a healthy dose of fun stevesimpson.prosite.com

68

summer 2015

L

et me start by saying that I am currently not a freelance designer. At the moment, I am the product design lead at Compass (compass. com). ‘Wait, what?’ is probably the phrase going through your mind right now. Well, much of my 15-year career has been spent freelancing. Sometimes, for long periods of time, other times for only a few months. I’ve been through it all, and enjoyed much of it. The way I see it, freelancing is more of a lifestyle choice than it is a career choice. Success or failure as a freelancer very much depends on your lifestyle – more so than with a normal 9 to 5 job. So, throughout the years, whenever the opportunity to go freelance presented itself to me, I tried to consider whether or not my current lifestyle situation matched well with that of a freelancer. With all this in mind, I’ve assembled a selection of the pros and cons that I normally think about before taking the leap, in the hopes it would benefit those readers that are on the fence.


Cover feature

summer 2015 69


FeatureS Cover feature

Switch off It’s hard I know, but turn that thing off when you’re with your friends or family

Coffee time I find it extremely healthy to go out and grab a coffee in the morning, even if I’m working from home

Pro Dictate your schedule This one is a no-brainer – especially for people like me, who have a hard time keeping true to a strict 9 to 5 schedule. I’m not a morning person, so being a freelancer meant a daily sigh of relief just from knowing that I didn’t need to run into the shower, then quickly hop on a busy subway commute all the way to the office. As a freelancer, your only stopwatch is yourself, so there’s no real morning rush (unless, of course, you have kids, like me). This was always a huge benefit for me. Rushing in the morning seems to always disrupt my day (First World problems, am I right?).

Takeaway Be careful not to lose yourself in this. Because you own your time, it’s easy to  forget that certain times are meant for work. I always try to create a balanced rhythm throughout the day, and to avoid chaotic work schedules – because chaos is a hard environment for me to be creative in. In order to maintain a calmer environment, I put even the most obvious items on my schedule

70

summer 2015

(even if it just reads ‘do work’ from 9:30am-12:30pm).

Con Work/life balance can suffer This is a big one. I’ve got to a point where I know my work is not what defines me (it took me a while to realise this), so having that clear balance between work

Working together Find a coworking space with a vibe that suits your style of working – be it quiet or buzzing

Don’t check emails. Your client will get through the night without your response. The only thing that warrants your attention after work hours is if their site is down, everything else can wait until the morning. Now, get back to playing with your daughter, chatting with your friends, or eating with your family. It’s more important than work.

Who wants to commute into midtown? It’s the worst. Instead, why not bang out some emails at a local cafe, then crunch some designs at a coworking spot, then work on that document at the park and my actual life is super-important to my happiness. When working as a freelancer, it’s sometimes hard to know how to set that line – especially when working from home.

Top tip I try to set times where I stop all work, normally in the evening, and stick to them no matter what. Turn off your phone. That’s right – turn it off. Nope.

Pro Work anywhere This is another no-brainer. Let’s be honest here, who in their right mind wants to commute into midtown? It’s the worst. Instead, why not have the option of banging out some morning emails at a local cafe, then crunching some designs at a coworking spot, then working on that document at the park if the weather is nice. Sounds so much nicer, right?


Cover feature

How do you know which projects to take?

Projective Space This coworking option has a focus on community and inspiration (projective.co)

The second obvious option is to work from home. This is a double-edged sword. While it’s extremely tempting to just crawl out of bed and into your computer chair, barely stopping to wash your face, over time this can become toxic. Humans are mostly social beings that thrive on basic routines. If you don’t go out every once in a while, and your only routine is bed-desk-desk-bed, you can easily get a case of cabin fever.

Takeaway When working from home try to establish a routine, even if it is a pretend one. For example, I would try to get ready in the morning as if I were going to an office. I’d maybe grab a cup of tea at a spot close by, maybe even take a walk around the block just to shake things up a little. This always did my creative process some good. If working from home isn’t your thing, a coworking space is a good alternative. Just remember to look for one that fits your vibe of work. Do you like noisy environments or quiet ones? I personally prefer distraction-free offices, so when I looked for a shared space, I narrowed

the search to ones that provide a calm, quiet working environment.

Con Time is money (duh) This goes for both freelancers and employees – it’s just more painful for you when you’re a freelancer because it’s your dime. It’s easy to forget that you only have a limited amount of time during the day. Design wise, I find I have about four or five hours a day in which I’m productive (and that’s being generous, normally it’s way less). Try not to spend this time on nonsense! Things like meeting a friend, procrastinating on Dribbble or reading this article are time killers if they are done during your most productive hours. Figure out what these hours are and try to maintain a productive environment while they last.

Top tip The best way to avoid situations where you are dedicating your productive hours to time-sucks is to try and box out time in the day for them. Normally I hit a low after lunch due to food comas, so I allocate that time (when

Let’s say you have a solid freelance portfolio and a reliable network of people who recommend you for projects. Chances are you’re challenged with choosing which new business opportunities to pursue. If you accept all incoming work, you’ll over-commit, compromising on quality or your sanity. This can damage your reputation and ultimately your business. But if you limit which projects you take on, you may risk missing out on exciting future opportunities. Mark Forscher (pictured), principal of Brooklyn-based design studio Under After (underafter.com), says there’s no easy answer. “Be honest with yourself about what motivates you to do your best work,” he suggests. “It may be the specifics of certain types of creative challenges, or the actual craft of doing the work. You may love working for a certain type of client. You may be motivated by peer recognition or awards. Or it may all be about the money.” Forscher suggests making the most of those aspects you can control. New clients and business leads are unpredictable, so you need to make the most of the information that you have available at the time. “I look at new opportunities based on three criteria,” he explains. “Do I like the people I’d be working with? Will I be challenged and learn something new? Can I add as much value as possible for the time I spend on the project? If the answer to all these questions is ‘yes’ then the project will likely be a good fit for me.”

summer 2015 71


FeatureS Cover feature What is coworking? This may sound surprising, but the concept of coworking hasn’t been around for that long. I certainly remember the time freelancing meant either renting an expensive office with a long lease, or working from home. But times have changed. According to the one study (netm.ag/ report-270), the number of coworking spaces in America shot from one to 781 between 2005 and 2013. I’m sure with the rise of We Work and the like, that number has risen even more. At a basic level, coworking is a privately owned space that gathers people who work independently, but who share the same values and who are interested in the added benefits of working with like-minded people in the same space. Today you can find a variety of different coworking environments, from chilled to corporate, lounge-y to private rooms. Until recently these types of environments were exclusive to large cities. But as the years have gone by, more and more coworking spots have popped up in smaller urban areas, like CoWork in Greenville SC (coworkgreenville.com), and Coalwork in Scranton PA (coalwork.com). Coworking spaces are ideal for early-stage businesses, startups and freelancers that don’t want to work from their homes, but are not yet able to fully commit to long-term leases, or able to manage the operations of running an office. So if you’re interested in taking the leap and becoming a freelancer, but aren’t really digging the concept of working from your bedroom, I’d seriously consider looking for a coworking spot in your city.

I’m dozing off anyway) to catching up on the latest internet gossip, Twitter, and so on.

Pro Choose your projects This may sound a bit privileged, but hey, if I managed to get to a point at which I could pick and choose my clients, then so can you. If you find that, after freelancing for an extended period of time, you still have to take on every client that comes along, you could be

more work you do that interests you, the more your portfolio will fill up with that type of work and the more you’ll get hired for that type of work. It’s that simple. Actually, it’s not simple at all, but it’s doable and worth the effort of trying to get there.

Top tip If you find that the type of work that interests you isn’t coming your way, it might be worth working on self-initiated

If you can afford to say no to clients, then what are you waiting for? Say no! It’s scary, but it’s the best way to get yourself to a point where you’re only working on the projects you really want to focus on doing something wrong (this topic alone may justify a whole separate article). However, if you do find that, financially, you can allow yourself to say no to clients, then what are you waiting for? Say no! It’s scary, but it’s the best way to get yourself to a point where you’re only working on the projects you really want to focus on. You see, the

projects in your spare time – you could even consider this marketing time for your business. Whatever you do, don’t go and create an unsolicited redesign of the ESPN or something. Try to create case studies of ideas you’d like to see in the world. Have an idea for an app? Design it. It shows your abilities and it signals what type of

Client contact Staying on top of your projects is vital – here’s a quick glimpse of how I structure my Trello board

72

summer 2015


Cover feature work interests you, both of which may bring your type of work to your doorstep.

Con A never-ending race to the next gig When you secure a large client, you’re on top of the world. But that feeling fades very quickly, and soon you’re back to searching for your next gig. The problem is at the core of being a freelancer – you are tied to a finite contract, and when that’s over you’re on to the next finite contract. For me, the feeling of instability this brings is the number one downer of being a freelancer. Especially when you get older and take on more responsibilities.

Takeaway Basically, you don’t want to find yourself without a next gig lined up when the one you are working on ends. The best thing you can do is start looking for that next project almost at the beginning of your current one. Keep in mind that closing a gig takes more than just a positive first email. You need to agree on the terms, dates, and sign a contract. Without a signed contract, you have nothing.

Portfolio rules Focusing on the work you want to do means you will attract more of the types of jobs you want to be known for

Con It can get a bit lonely I love to pass designs by people, and get feedback. I thrive on this, it’s core to my process. Without it I feel like I’m designing blindly. Sometimes, the client can be the first other person to see the work – not the best situation.

Top tip Try to establish a network of peers that will look over some of your designs. Even if they are not fully involved in solving the problems you are working on, they are normally a good gut check. A quick Skype call can clear up any issues you are working on, and they can provide their quick, unfiltered feedback.

Pro Wear a different hat every day Tired of doing the same old thing at work, over and over again? When you are employed at a company, you are normally slotted into a defined role.

Twitter time Social networks can be a time-suck. Dedicate certain periods to this, and avoid it the rest of the time

Dribbble Platforms like Dribbble can help keep you in touch with the design community

This is certainly helpful for the company, but you may experience boredom or lack of growth. These is often one of the main reasons people leave their jobs. I’d say a good 80 per cent of the people I’ve interviewed throughout the years have told me they are looking for new challenges, that they are interested in expanding their abilities or horizons. Being a freelancer means you won’t be doing the same thing over and over again. In fact, you will be doing so many edge-case things pertaining to the business, it might become a bit overwhelming as well. I’d say, as a freelance designer, you’ll be designing only 50 per cent of the week. The rest will be consumed by things that have

to do with managing your freelance business. Managing your inbox, documentation, legal contracts, client communications, sales, accounting (my worst enemy. Be sure to have a good accountant, like I do. Hi Ben!), marketing and more. All these things will need your attention, because without them, your business is doomed.

Takeaway This might sound completely overwhelming, and not a benefit at all. But it is. After a while you’ll come to understand what you are good and bad at. The things you are bad at you must delegate. Even if you see this as an unnecessary expense, consider the amount of money you will lose if you

summer 2015 73


FeatureS Cover feature

Invision This is a great way to present designs and interactions to your clients - they can add captions and play with prototypes

Wunderlist This awesome to-do list app has just the right amount of features, plus it’s well designed and has a solid cross-platform build

Resources

A big part of a healthy freelance routine is staying on top of your day-to-day tasks. Here are three tools I use religiously.

Wunderlist wunderlist.com I’m not a to-do fanatic, but at the end of the day I can’t remember it all in my head.

74

summer 2015

Wunderlist has just the right feature set without all the bloat, which keeps it nice and lean for a freelancer’s needs.

overview. Each list I create represents a stage in the project, with accompanying to-dos.

Trello trello.com

The best way to show a client a design, without coding it, is through a quick prototype. InVision is a great tool for that – plus it has a really easy to use annotation system for client feedback.

Trello has basically replaced Basecamp as my client communications tool. The layout is great for creating a quick, at-a-glance project

InVision invisionapp.com


Cover feature

Above For self-promo, and because it was a real issue, I created a quick tutorial page to learn how to pronounce my name (pronounce.yaronschoen.com). Potential clients loved it Value Pricing Do you price based on time or value? This article by Dan Mall could help you decide (netm.ag/mall-270)

do those things badly. As for the things you discover you are good at ... well, you just found a new thing you are good at! This is the best thing you can ask for out of a job. Discovering you are good at marketing is an amazing thing! Something that you probably would have never found out in a full-time job.

websites. It’s not like we’re saving lives in the ER or something …

Con Tackle self-promotion

I’ve found that pricing based on value gives you more bang for your buck, but as you grow your freelance business and have more contractors, this approach can become a logistical obstacle

This one is a personal one, but after a while self-promotion makes me a bit sick to the stomach. It makes me feel as if I’m a commodity. I know it may sound silly. It may not seem like it, because I’ve gotten to be good at it, but this is one of my least favourite parts of being a freelancer.

Takeaway The only thing I can do to avoid going crazy is to remind myself that I am my business. In most cases I’m not only selling my abilities, but also selling who I am as a person. People want to know how it is to work with you. A good client will normally decide if they want to work with you based on your writing, not only your portfolio. So I try to be myself, take it lightly and inject some humour into it all, because honestly, we’re just building

Pro Make more money (potentially) I am aware that this is definitely a big maybe, but hear me out. The logic is pretty simple: the number of times

you’ll be up for a raise at a full-time job is significantly smaller than the number of times you can raise your rates as a freelancer. Of course, this depends on the demands of your freelance business and on the market, but I’ve found it way easier to ask for a higher rate than it is to ask for a raise.

Takeaway There are basically two ways to price: based on time and based on value. I’ll be honest with you, I personally haven’t yet found the best way to price.

Sometimes I value-price, sometimes I charge by the hour. In general I’ve found that pricing based on value gives you more bang for your buck. But as you grow your freelance business and have more contractors to collaborate with, this approach can become a logistical

obstacle. There are some great discussions on the topic, from the likes of Dan Mall (netm.ag/mall-270).

Conclusion These are my personal pros and cons. Of course, other freelancers may agree with them or totally dismiss them. Regardless, I’m sure everyone would agree that freelancing can be a wonderful experience. Even if things turn sour, you learn so much about yourself that the takeaways are totally worth it.

summer 2015 75


Net Pro (Sampler)