Net 258

Speed up your Wordpress site Optimise performance by lazy loading media

Mock up a site with Sketch 3

Master the design app’s powerful new features

Teach yourself how to code We review the top 10 online learning sites

advanced Sass programming

Make use of variables, functions, maps & more Project

The voice of web design

Issue 258 : September 2014: : net.creativebloq.com

CLIMB TO THE TOP OF GOOGLE EXCLUSIVE!

We share the SEO power tips that will boost your sites’ search rankings

Issue 258 september 2014

£5.99

How to build mobile-first websites faster than ever before

Send your questions to netmag@futurenet.com this month featuring...

Jina Bolton Jina works at Salesforce UX, helping create design systems. She also leads Team Sass Design w: jina.me

Practical advice from industry experts

QUESTION OF THE MONTH

What is your favourite tool for prototyping, and why?

EmeraldZone, London, UK

Stephen Greig Stephen is a web designer, frontend developer, and the author of CSS3 Pushing the Limits w:tangledindesign.com

Richard Rutter Richard is a founding partner at Clearleft, and a web typography evangelist at Fontdeck w: clagnut.com

Steve Faulkner Steve is an accessibility engineer at The Paciello Group and is active in web standards development w: paciellogroup.com

Testing demos CodePen provides a variety of additional resources including CSS resets, JavaScript libraries and preprocessors, making it easy to replicate your local setup and knock together prototypes

Stephen Greig: For establishing a look and feel, I’m still very much a Photoshop guy.

Once I have a firm grasp of my UI style I then move over to the browser and replicate it using CSS. In terms of prototyping functionality, I love CodePen (codepen.io) as it allows me to build and test demos with minimal time and effort. It also provides common frontend resources like Sass, Autoprefixer and jQuery, so it’s perfect for testing out quick prototypes before moving them into my local site setup.

Typography

Sizing for mobile I’d like some guidance on type sizing for mobile devices.

Adrian Roselli, Buffalo, NY

Richard Rutter: Make your starting point for paragraphs the default text size for the device. Depending on your choice of font you may find you want to bump it up or down a notch, but not by much. Thereafter, don’t get sucked into

10

september 2014

the common mistake of making headings too big. Testing your designs in actual devices will remind you that a landscape smartphone might only have 320px of height to play with.

HTML Accessibility

JavaScript issues Should we still be responsible (in this day and age) for making sure our sites work, to some degree, when JavaScript isn’t

Q&As

3 simple steps When designing for people with dyslexia, what’s your take on typography? I’ve read there are specially designed typefaces with different weightings and stroke widths.

Lennie Evans, Cardiff, UK

Steve Faulkner: These are three important tips. See netm.ag/ dyslexia-258 for more.

Trends for this year The Salesforce1 style guide was automatically generated from Sass files

available? I don’t think support is needed unless the JavaScript modifies or appends content to the page.

Ollie Barker, North East England

Steve Faulkner: I consider web accessibility to be about issues that disproportionately affect disabled users – which isn’t the case for unavailable JavaScript. What does effect disabled users much more is when JavaScript custom controls are developed with poor coding practices that do not take non-visual user interface semantics and device-independent interaction into account. From an accessibility angle, it’s much more important to ensure your JS UI is operable, understandable and navigable for disabled users.

CSS

Animated effects I need to create a banner for a client’s site.

The client wants a grid of squares, each of which rotates as you hover over it. I am trying to use @keyframes and -transform: opacity rotate scale , but I can’t make it work. Any ideas?

animated. Now, on the li:hover state, you can use a CSS transform to rotate the squares. I’ve put together a few demos to further illustrate this example, two of which use 3D transforms for enhanced effect: netm.ag/effects-258.

CSS

Trends for this year What are some new CSS design trends emerging in 2014?

Vladimir

Jina Bolton: What I have been noticing is a vibrant energy around workflow and tooling. I’m interested in creating better workflows and processes, so this is a ‘trend’ I’m super happy about.

I’m seeing style guide generators, CSS preprocessing libraries, rapid web prototyping frameworks and so on – not new to 2014, but it seems like this year they’re more prominent.

Keep it clear

Good typography is good for everyone, including those with dyslexia and other reading difficulties. In particular pay attention to line length and ensure your line spacing doesn’t result in clashing ascenders and descenders.

Go Sans-serif

The preference for dyslexics is sans-serif, as serifs can interfere with the shapes of the letters. Having letters properly distinguished (not mirror images) helps too.

HTML Accessibility

Setting tabindex

Rebecca L Daniels, Las Vegas, US

Someone at a conference said that best practice is to not set a tabindex and let the browser figure it out. Thoughts?

SG: Because you’re just looking to rotate the squares on hover, you can use a simple CSS transition rather than keyframe-based animation. Let’s say your banner is a <ul> containing several <li> s that act as the squares in the grid.

Once you apply the transition property to the <li> s, any changes will be

SF: Using tabindex=”0” to include nonfocusable elements in the focus order (e.g. for custom controls) or -1 to allow elements to be focusable using JavaScript .focus() is absolutely fine.

Setting a tabindex (with a value greater than 0 ) on an element usually ends up

Andrew McGivery, Ontario, Canada

Consider visual shape

Many dyslexic readers rely on recalling the visual shape of a word, so slightly longer ascenders and descenders are preferable.

september 2014 11

Opinions, thoughts & advice

this month featuring...

The Internet of Things

Importance of notdesigners 28

Jonty Sharples urges designers to break out of their cliques and learn to speak the language of the mysterious Notdesigners

Interview 32

Rachel Andrew chats about how a desire to share baby photos led her into the world of code, and what the future holds for Perch

The Physical Web arrives Scott Jenson explains how it is now possible for smart devices to wirelessly broadcast URLs to nearby devices, bringing the web into the real world With the cost of microprocessors plummeting, we’re in a situation where nearly any consumer device can become ‘smart’. This could mean: l Bus stops that display details of when the

next bus is coming l Vending machines that accept payment

via a cashless tap (and send you a receipt) l Movie posters that provide extras such as

previews or trivia quizzes l Museum displays that offer multiple lan-

guages or more detailed information

How to hire the best

42

Bright Umbrella’s Lea Alcantara and Emily Lewis give their take on tackling new employee logistics, from both sides of the table

All of these examples demonstrate how smarter devices can make life a little bit easier. But let’s go further – what if you could walk up to any of these devices, pull out your phone and interact with one of them instantly? When you were done, you’d just walk away with nothing left behind on your phone. It’s a ‘use it and lose it’ approach to

Opinion

interaction that would encourage entirely new product categories and usage models.

But while it’s a deceptively simple idea, at the moment we don’t even allow ourselves to consider it. Most of us are looking at the world through entirely app-coloured glasses.

The problem We already have a universal system of information and interaction: the web. While it’s clearly not as fancy as native applications, for the majority of these simple service examples, the web is perfectly adequate.

Its undeniable superpower is to provide interaction on demand. Just like you can visit any website with a tap, the same could be true for any nearby smart device.

Of course, the problem is that the web is locked behind the virtual network of the internet. There needs to be a bridge between the physical and virtual in order to enable this new interaction-on-demand ability.

The solution

The goal is simple: create an open system for all devices to broadcast a URL. We need this simple physical extension into the real world to begin this journey would allow all of the world’s devices to be controlled by a single company.

A summ ary The Physical Web has two goals: l Make interacting with smart devices as

simple and fast as possible lP rovide a universal and open means for all

devices to be found It’s possible to achieve both of these aims using just URLs and web pages. It’s that simple. A URL is particularly useful to build upon as it’s so flexible. In its most straightforward form, a URL would link to a web page, but it could just as easily deep-link into a native application or even provide access to RESTful functionality.

Like so many simple ideas, there are many additional issues yet to discuss, but the goal of the Physical Web is simple: create an open system for all devices to broadcast a URL. On top of this base we can then layer security, sorting, ranking and many more services.

We need this simple physical extension into the real world to begin this journey.

Let’s bring one of the most transformative technologies of our lives – the web – into our physical world so we can build a new generation of products. Products that can work together and not be tied into any one company’s ecosystem.

PROFILE

The proposed solution is called the ‘Physical Web’ and it’s a very simple idea: each smart device broadcasts a URL wirelessly to nearby devices. We are currently using Bluetooth Low Energy (BLE) as a ‘broadcaster’ because this system is ubiquitous and cheap. Nearby phones can then act as ‘agents’. They find these devices, show them in a list, and with a tap the user can open up the relevant web page in a browser.

Broadcasters and agents create a two-part ecosystem. Any device can broadcast any URL for any web page. This process is massively open and, to be honest, a bit chaotic.

However, the agent running on the phone would provide the order, sorting and ranking those URLs based on signal strength, preferences and history.

Most importantly, it would filter out spam and malicious sites. In reality, this proposal is pretty much exactly like the web today: a loose collection of websites with varying levels of trustworthiness, and a collection of search engines to sort and organise it.

Much like the web, there is no centralised server: any device can broadcast any URL. Too many Internet of Things solutions today assume everything must go through a single centralised server. Not only does this not scale, it is politically impossible – no one

Scott is a UX designer who has worked at Apple, Symbian, frog design and Google on projects such as Mac System 7 and Apple’s User Interface Guidelines (jenson.org)

september 2014 27

Gallery Inspirational sites Geri Coady

Sensational design and superb development

Geri is a colour-obsessed freelance illustrator and web designer, author of A Pocket Guide to Colour Accessibility and net's Designer of the Year 2014 w: hellogeri.com t: @hellogeri

Sass, intuitcss, ITCSS, Grunt

Fasetto.com

Naomi Atkinson naomiatkinsondesign.com (designer), Harry Roberts csswizardry.com (developer) Fasetto is a centralised service that allows users to share any type of file between any device on any platform – no internet access required. The supporting website was designed by Naomi Atkinson and developed by Harry Roberts, who have differing approaches to web projects.

“It was interesting balancing Naomi’s very visual, brand-led approach to design with my almost brutal, performance-led approach to development,” says Roberts. “We managed to strike a balance between a well-branded,

44

september 2014

well-designed site, but with any superfluous design treatments trimmed off.”

The site’s CSS is written on top of the Sass-based OOCSS framework Inuit (github. com/inuitcss), and on top of a proprietary CSS architecture, ITCSS, developed by Roberts himself. “Both of these are based on principles of performance and scalability, and work really hard to minimise the amount of CSS needed to build UIs,” he explains.

“These keep apps and sites very small, but enable them to grow as necessary.”

“They’ve put some serious effort into performance.

It’s fast, it’s scalable, and it’s less than a third of the size of the average site”

Mat Marquis (@wilto)

Inspirational sites

jQuery, Laravel, Mercurial

cottonbureau.com Full Stop fullstopinteractive.com

The hugely popular T-shirt company United Pixelworkers is wellknown to designers, developers and creative folk looking to geekup their wardrobes with T-shirts designed by the industry's finest. It became so popular that it has spawned a sister site, Cotton Bureau, where hopefuls can submit a design, promote it and see it go to print after it has reached 12 pre-order sales.

Jay Fanelli and Nathan Peretic – the minds behind both Full Stop and Cotton Bureau – are constantly introducing new features to the website.

While they claim the site is fairly standard, built on the toolkit they've been using for years (jQuery, Laravel, Mercurial, Linode, Stripe), they can't help but brag a little about their shopping cart.

"We’re not afraid to try things that sound a little crazy, and this is one of those things. Rather than kick you off to another page, the entire cart and checkout experience slides in from the right, one panel at a time," Peretic says. "You’ve got to try it to see how great it is."

The control panel for folks who've submitted a design also shines, with responsive sub-navigation menus and a simple, effective UI that makes keeping an eye on your shirt's success a breeze.

september 2014 45

Sublime design & creative advice

Design Challenge

This month Featuring...

Focus on

This month...

56

Coworking space sites C hris t in a W ink l e s s

Profiles

Gene Crawford takes a closer look at the rise in popularity of app bars; the pattern designers are using to align mobile and desktop sites

Christina is a designer at Erskine Design, and has worked with Endsleigh and M&S w: erskinedesign.com t: @lord_winkleton

C hris C omp s t on

Profile

Chris is the lead UX and UI designer at MadeByPi, and deals with user research and design w: madebypi.com t: @ndxcc

58

Creatives at Emmy award-winning production company B-Reel share their mutual love of craft, innovation and great storytelling

Ol i v i a Ricci Coding fan Olivia has worked as a junior design intern at Kooba since finishing college w: oliviaricci.com t: @OliviaRicci

Brief

How we built

FreeAssociation and the in-house designers behind Cornell’s new site explain how they created a window into university culture

52

september december 2014 2013

64

We’d like you to design a website for a coworking space. It could be an achingly cool affair, or you might fancy creating something with a real community feel.

Possibly you’ll make a local space, built with reclaimed materials and offered to workers for free. It’s up to you.

Design challenge

3

1

2

4

5

Christina Winkless

Make Space

My month

Recycled spaces for the community to share skills and collaborate. See the full-size image at netm.ag/winkless-258

Make Space is an initiative based around the concept of recycling unused skills and buildings in order to benefit society. The aim is to give retired people an opportunity to share their skills and wisdom with younger members of the community. Each room has been renovated to suit the skillsets on offer, such as woodwork, tailoring and gardening. When classes aren’t being held, the space is open to the public to use for personal projects.

Using the Google Street View API I’d create walkthroughs of the different spaces, adding markers which link to video content. Videos will be made both responsive and accessible by using the matchMedia API to request lower resolution videos for smaller devices, and including closed captions for users with visual impairments. The immersive site experience helps to bridge the gap between the physical and digital space, and inspire the primary users to learn something new.

Close up (1) Interactive tours of each room act as taster content, with videos introducing the people, skills and tools.

(2) The tone of voice and photography used throughout the site is warm to reflect the mature and friendly personalities of the older people holding the classes.

The aim is to create a welcoming website that encourages young adults to feel comfortable getting involved. (3) A simple navigation system has been used with a clear call to action for users looking to book a class. (4) The responsive calendar provides an overview of when classes are being held and when the space is open to the public. In mobile view, the calendar would lazy-load its content to reduce rendering on page load and lessen the likelihood of a ‘clunky’ user experience. (5) Users also have the ability to explore classes and courses to see what’s on offer before making the decision to book.

What have I been doing this month?

Some mobile-first transactional user journeys for Endsleigh and a responsive ecommerce site for a homeware brand.

Which websites have I visited for inspiration?

I’ve been watching inspirational talks at Ted (ted.com) and using feedly (feedly.com) for my daily design news.

What have I been watching?

Mostly football – as it’s World Cup season – and Game of Thrones.

What have I been listening to?

Sister Sledge and Will Smith (when I don’t have control of the office music).

september 2014 53

Features Second feature

The top 10 online learning websites The internet is brimming with learning tools. Katie Kovalcin takes a look at the coolest code schools on the block

N

Author Katie Kovalcin is a web designer currently working at Happy Cog in Austin, Texas.

She has a passion for typography, branding and team collaboration katekovalcin.com

76

ow is an amazing time to be getting started in the web industry. Not only are an increasing number of jobs becoming available, but we have many accessible educational tools popping up that make learning new skills more straightforward. The daunting task is finding the one that is right for you and your learning style. I have tested and reviewed some of the most popular schools being talked on the web today, to give you a better understanding of the pros and cons of each.

I’ve looked at five key elements for each tool, and scored each out of five. The things I’ve covered are: how well the information is presented; how easy it was to complete the tasks well; how engaging the tool was (as in, would I actually stick to it?); how much opportunity it offers for me to progress past the basics; and finally the support and help that was provided when I got stuck.

Full disclosure: I am a web designer with some prior coding knowledge, but I tried to fairly judge these as a ‘beginner’. This list is not ranked in any particular order, as the services vary in range of content.

september 2014

Second feature

Code School

codeschool.com

Of all the tools I dug into, Code School was one of my favourites. Not only does the site look great, but it offers quality content and a great student experience.

You can follow a ‘path’, which will guide you through a succession of different courses, or you can opt for a single course on its own. There are also ‘electives’ on offer – additional courses you can take to supplement your path.

The videos are quirky and fun in an ‘after-school special’ kind of way – which is a refreshing break from typically dry video tutorials. It’s like watching Bill Nye explain it – which is to say, comforting.

After watching a video, you work on your own tasks – relating back to the video if required. If you get really stuck (like I did) you can ‘buy’ answers with points you’ve earned from other classes.

Code School offers some courses for free, so you can try it out for size, or you can buy a monthly subscription for $29/month. If you’re looking to splash a few bucks on a learning tool, I would recommend spending your money here.

Presentation .

I loved the clever little jingles in each intro.

Tasks .

They were an appropriate level of challenging.

Engagement .

I suspect I could get through a hefty amount of work seeing how far I could go down a ‘path’.

Scope for growth .

Between paths and courses, you could spend quite some time furthering your skills.

Support .

It offers a forum, and questions (mostly just brief FAQ). You can email the team, too.

september 2014 77

PROJECTS RWD

Download the files here!

Download the source code at netm.ag/tut1-258 or netm.ag/tut1Git-258

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

S t e ven W u w: designtodevelop.com t: @designtodevelop areas of expertise: Magento development, WordPress theme development, frontend development q: what’s the most heroic thing you’ve ever done? a: I saved Azeroth from the evil clutches of Lich King in World of Warcraft. Next stop, Deathwing!

RWD

Build responsive sites with Foundation Steven Wu on how to take advantage of the latest feature-rich

version of Foundation 5.0 to develop fast-loading, responsive sites

Video See the tutorial in action in Steven Wu’s exclusive accompanying video at netm.ag/ foundationvideo-258

84

As its name suggests, Foundation is primarily used as a foundation for any responsive website project. It is a lightweight framework packed with rich features designed to quickly develop fastloading, responsive websites. When designing responsive sites, the mobile-first approach springs to mind as the smartest way to build – and this is something Foundation has taken into account in its latest iteration.

When ZURB was building the new Foundation 5.0, the main priority it had in mind was to redevelop the framework for optimum speed. Interchange – the responsive image solution – is now built directly into the framework. You can also now use any kind of content type, including images, CSS and video, and it will be downloaded directly in the appropriate format for the device type. On top of this, it is now

september 2014

possible to create different HTML partials, and Interchange will swap out the correct content type for the appropriate device. jQuery 2.0 has replaced the Zepto.js library for better performance. The new off-canvas navigation is now part of the core 5.0, with CSS animations.

There are also a ton of hardware accelerations, making a Foundation 5.0 lightning-fast compared to its predecessors.

Other noticeable updates to this new release include a medium grid size, the inclusion of fastclick.js to provide mobile users with a snappier experience, Bower upgrade manager, Sublime Text package to automatically scaffold your new components in your project, and much more. Using the new Foundation 5.0, we can learn to quickly build a responsive website.

RWD

Focus on

Getting started with Foundation Navigation bar Foundation’s versatile top bar contains complex code and provides many presentational classes to define the look of your site

Download and setup First, head over to ZURB’s website and download the latest version of Foundation (netm.ag/ FoundationDownload-258). At the time of writing, the newest release was version 5.3, which is the version we’ll be using in this tutorial. Foundation gives you the option of writing your CSS in pure CSS or Sass.

To allow beginners to follow this tutorial we’ll be using traditional CSS. Once you have downloaded Foundation, extract it and open up the index.html. This HTML document

With Foundation 5.0, the main priority was to develop the framework for optimum speed already has most of the structure set up, including the Foundation stylesheets and other necessary libraries. Let's go ahead and delete everything after the opening <body> tag all the way down to just above the jQuery library at the footer of the document. We’ll add in our own custom style sheet in the <head> :

There are many methods for downloading and running Foundation for your latest project. Some have certain advantages compared to others.

The simplest method is to head straight to ZURB’s Foundation website (netm.ag/ZurbDownload-258) and download the complete source. Here, you will be given a range of different options. You can download the complete version, just the bare-bones essentials in a much lighter-weight version, or customise the download by selecting which components and features you require for your particular project.

For Git lovers and those who would like the full revisions and updates on the framework, you can clone the full repository over on GitHub: github.com/zurb/foundation.

Alternatively, you can use Bower (bower.io) to manage this framework. Since the new release on version 5.0, ZURB has utilised Bower to handle the updating process of its framework.

Before proceeding, make sure you have the following installed on your system: lG it (git-scm.com) lR uby 1.9+ (rubyinstaller.org) lN odeJS (nodejs.org)

In the command line, run (you may need to use sudo): $ npm install -g bower Followed by installing Foundations CLI with: $ gem install foundation To set up a brand new project with Foundation simply run:

<link rel="stylesheet" href="css/style.css" />

$ foundation new PROJECT_LOCATION

Now we’re ready to get started.

When working with Sass, the simplest way to compile your Sass is to use Compass. Make sure you set up your config.rb with your workflow and set Compass to watch your project:

Responsive Carousel Let's start off with giving our website immediate impact by adding in a JavaScript-based carousel.

Foundation has its own built-in responsive image slider called Orbit, which has been deprecated since the new version 5.3. Instead, there are a few thirdparty image sliders that work extremely well with Foundation, including Owl Carousel (netm.ag/owl258) and Slick (kenwheeler.github.io/slick). I’ll use Owl for

$ compass watch When ZURB releases a new version of Foundation, you can easily run an update by going to the root of your project and running: $ foundation update

september 2014 85

PROJECTS Sketch Exclusive offer! free tutorials

For a free one-month membership to SketchCasts, visit netm.ag/sketchOffer-258

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

Ra fael Conde w: rafaelconde.net t: @rafahari areas of expertise: Design, music and coffee q: what’s the most heroic thing you’ve ever done? a: Changed deodorant, saved the world

Sketch

Mock up a website with Sketch

Rafael Conde walks you through how to sidestep Photoshop

and use vector-based Sketch to quickly create a website mockup

Resource Rafael Conde has created an exclusive screencast to accompany this tutorial.

Find it at: netm.ag/ conde-258

90

You want to create a simple website mockup, but Photoshop sounds just a little daunting to you? You’re after something quick and easy, that will effectively show off your idea? Well, Bohemian Coding has heard your prayers and delivered a tool with web and UI designers at heart. It’s called Sketch, and version 3 has just been released.

Sketch is completely vector-based, meaning that everything that you do will be scalable and your processes will be non-destructive. This feature is absolute gold in this day and age, with all the different devices and all the different screen sizes and resolutions you need to consider. I’ve been using Sketch exclusively for all my design work for

september 2014

two years now, and I haven’t felt the need to switch to anything else for a long time.

In this tutorial I’ll be creating a website mockup for a digital studio called Think Orange. I’ll walk you through some of Sketch’s basic concepts and tools – including some exciting new features that have been introduced in version 3 – and take you from the first text block to exporting our final design and assets.

We will learn how to create headers and buttons, work with grids, use shapes to mask elements, export all of the assets in different resolutions – Retina and non-Retina – and a lot more. If you don’t have a copy of Sketch, grab a free trial at bohemiancoding.com/sketch and follow along.

Sketch Let’s start by creating a new file. In the menu bar go to File > New from Template > Web Design . Here we have some artboards already set up for us, like Web, Tablet and Smartphone (think of an artboard as a dedicated canvas), as well as some Text Styles and UI elements.

01

Step 2 You can quickly insert symbols

Jump to page two and you’ll find all of the symbols and text styles built in on this template.

From forms to buttons, headers to quotes, you can insert a symbol just by clicking on Insert > Symbol .

02

Every change that you make to a symbol will be carried across every instance of that symbol. So if, somewhere down the line, you want to change the colour of the Submit button across every page, you just have to do it once.

The same goes for text styles. Text Styles work just like HTML tags – you can create your headers, body and links Text Styles, and when you change one, it spreads across every element. Handy.

03

Step 7 Adding images to your site simply requires a simple drag-and-drop action

For the sake of this tutorial, we’ll head back to our first page and work on the Desktop artboard. Let’s start by creating a simple background for our header.

Insert a rectangle by clicking Insert > Shape > Rectangle (or hitting the keyboard shortcut R ). Let’s make it fill the whole width of the page, and make it something like 900px high.

On the right of the Inspector, you

04

have access to fills, borders, shadows – you name it.

Now to add the title. Let’s insert a text block ( T ), and then we can just type it in. In the Inspector we have control over the font, size, colour and everything else you would expect.

05

For the navigation bar at the top, I’ll create text blocks for the different links. Then, after selecting all of the links, I’ll use the Align tools at the top of the Inspector to align them horizontally and space them evenly. We can create a new text style and call it ‘Navigation Links’.

06

Maybe you have a logo, or a background photo that you want to use. To insert an image, it’s as simple as drag-and-drop. Just drag the image from the Finder to the Sketch window and there it is.

If you double-click on it, you can crop, fill or even vectorise it.

07

Step 3 When you change the styling on text element, this will carry over to all instances

Expert tip

Grids and Layouts Designers love grids.

We just do. To help you with the layout of your website in Sketch, you can activate a grid or a layout and see it on top of the canvas. Just hit View Dropdown on the toolbar and select Show Grid/Layout .

In the same dropdown you can also select Grid/Layout Setting . This will enable you you to set and control the number and width of the columns and rows in your grid, and the gutter width, to your taste.

september 2014 91