Exclusive: Fontspiration is a free app for typophiles everywhere

Go to Source

If you love typefaces as much as we do, then you’ll love this brand new typography app that has just been released; Fontspiration is a cool app for iOS boasting two features font lovers won’t want to miss.

The first feature is a feed of typographic inspiration; amazing type-based work that you’ll get lost in for hours and come out the other side feeling truly inspired.

The second feature actually allows you to quickly create typographic animations using hundreds of Google Fonts, and literally dozens of built-in animations, custom designed for this app.

Built by Extensis, the team that brought you Suitcase Fusion and Universal Type Server, Fontspiration is the fastest way to mockup awesome typographic animations. You can even share those typographic masterpieces via sms, email, or the cloud; making this the perfect way to send a custom message to loved ones this holiday season.

Inspiration can strike at any time. Whether you’re standing in line for coffee or at home on the couch, Fontspiration allows you to easily create and share animated typographic masterworks, discover new fonts, and browse creative typographic samples to stay creatively inspired — Jim Kidwell, SR. Product Marketing Manager at Extensis

The process is incredibly simple: Pick a theme; enter your text; customize the text’s font, color; adjust the layout; and finally pick an animation. Once you’ve done so you can share your creation with the world, as an image, an animated gif, or even a video.

Exclusive: Fontspiration is a free app for typophiles everywhere

Best of all Fontspiration is completely free. It’s a cool way to mock up some ideas, send a thoughtful message to someone, or just keep those creative ideas ticking over.

You can download Fontspiration free, direct from the App Store.

80 Hi-Res Logo Mockups from Zippy Pixels – only $27!
Exclusive: Fontspiration is a free app for typophiles everywhere

Source

“California, Here We Come…” Introducing SmashingConf Los Angeles 2015

Go to Source

Great conferences are the ones where you learn, connect and get inspired. We know that, and we put our hearts into crafting events that aren’t just great, but go way beyond expectations. Ready for the next one? With SmashingConf LA 20151, we’ve got a full package: our new US conference with two days packed with quality content, lots of networking and a few mysterious surprises. We thought you might want to join in, too.

SmashingConf LA 2015: First SmashingConf on the US West Coast. April 27–30th 2015.2

About The Conference

When preparing a conference, we care deeply about how practical and valuable it will be. We look into things that have or haven’t worked, and why, and what worked better. In fact, the SmashingConf LA 2015 is designed to make you smarter, more informed and more skilled with your day-to-day decisions. Be it your workflow, front-end, design, development, UX or nerdy performance tricks. The focus of the SmashingConf is tangible, actionable, hands-on learning that you can apply to your work right away.

A view on the shore in Santa Monica, LA.3
Santa Monica in L.A. — now that’s a sunset you won’t easily forget. Not a common host of web conferences. Until now. Only 450 seats.4 (Image credit5)

So what are you signing up for? Two full days packed with practical design and front-end talks6 and five hands-on workshops7 — you’ll leave with a treasure of useful tips and tricks applicable to your work right away. We don’t care for crowded multi-track experiences. So in LA, we’ll go with one single track, 16 well-respected, high-caliber speakers, only 450 attendees and lots of networking — just the right recipe for an intimate, personal event.

And the best bit? A spectacular conference experience in Santa Monica, right at the coast of the Pacific ocean, with an onshore ocean breeze and sunshine in the back. Ready? California, here we come! To the tickets.8

First Confirmed Speakers

What’s a good conference without great speakers? Of course, we don’t take on this task that easily. Every talk is thoroughly curated, and we’ve created enough space, time and opportunities for meaningful, in-depth conversations. The speakers line-up9 is filling up slowly, but of course we aren’t going to reveal everything just yet.

To spice up your appetite a bit, here are the first confirmed speakers:

First speakers at SmashingConf LA 2015: Steve Souders and Samantha Warren10
First speakers11 at SmashingConf LA: Steve Souders and Samantha Warren.

We’ve reserved 50 early-bird tickets for US$549, and if you book a workshop, too, you save US$ 100 off the conference + workshop price. To create an intimate atmosphere, we have only 450 tickets available, and tickets are now on sale. Now, seriously, get your ticket already.24

$549

Get your ticket.3225Grab your sunglasses, too. Only 50 early-birds available.

“Convince Your Boss” PDF

We do everything possible to keep our prices fair and affordable for everyone. However, if you need to convince your manager to send you to the event, we can help you as well. We also prepared a neat Convince Your Boss (PDF)26 (0.15 Mb) that you can use to convince your colleagues, friends, neighbors and total strangers to join you or send you to the event. We know that you will not be disappointed. Still not good enough? Well, tweet us @smashingconf — we can be quite convincing, too!

Need to convince your boss to send you to SmashingConf LA? We've got your back!27
8 reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf” (PDF28). Quite self-explanatory, really.

Of course we’d love you to be on board as a supporter or sponsor of the event as well. In fact, we’re looking for some very special sponsors; we’ve prepared a few nifty options in our SmashingConf LA Sponsorship Pack29 (PDF, 0.9MB). So if you’re interested, please email us at hello@smashingconf.com30 — we’ll make sure it’s worth it!

Why This Conference Is For You

The conference is for you because you’ll learn lots of valuable techniques and meet fantastic, like-minded people from the industry. You’ll learn:

  1. How to improve user experience and design workflow,
  2. Strategies for building fast responsive websites,
  3. Front-end techniques for scalable designs,
  4. How to make use of pattern libraries and style guides,
  5. Guidelines for designing flexible design systems,
  6. How to deal with responsive images and RWD email,
  7. Common problems and solutions in eCommerce,
  8. Advanced front-end tooling, setup and workflow,
  9. Mistakes and lessons learned from large projects,
  10. …now, seriously, you want even more than that?

See You In Los Angeles!

We are looking forward to seeing you in Los Angeles, and who knows, perhaps we’ll manage to match and beat your expectations after all! We love a good challenge, and this one is going to be quite a journey — and we’d love you to take part in this little endeavour of ours as well. So, grab your ticket31 and see you there!

$599

Get your ticket.3225Don’t forget your sunscreen, too. Only 450 seats.

Footnotes

  1. 1 http://la.smashingconf.com/
  2. 2 http://la.smashingconf.com
  3. 3 http://smashingconf.com/la-2015/registration
  4. 4 http://smashingconf.com/la-2015/registration
  5. 5 https://www.flickr.com/photos/isaiah-v/6458473107
  6. 6 http://smashingconf.com/la-2015/speakers
  7. 7 http://smashingconf.com/la-2015/workshops
  8. 8 http://smashingconf.com/la-2015/registration
  9. 9 http://smashingconf.com/la-2015/speakers
  10. 10 http://smashingconf.com/la-2015/speakers
  11. 11 http://smashingconf.com/la-2015/speakers
  12. 12 http://www.twitter.com/andybudd
  13. 13 http://smashingconf.com/la-2015/workshops/andy-budd
  14. 14 http://www.twitter.com/SaraSoueidan
  15. 15 http://smashingconf.com/la-2015/workshops/sara-soueidan
  16. 16 http://www.twitter.com/Malarkey
  17. 17 http://smashingconf.com/la-2015/workshops/andrew-clarke
  18. 18 http://www.twitter.com/petewsmart
  19. 19 http://smashingconf.com/la-2015/workshops/peter-smart
  20. 20 http://www.twitter.com/samanthatoy
  21. 21 http://www.twitter.com/Souders
  22. 22 http://www.twitter.com/pattytoland
  23. 23 https://twitter.com/CatchTheBirds
  24. 24 http://smashingconf.com/la-2015/registration
  25. 25 http://smashingconf.com/la-2015/registration
  26. 26 http://smashingconf.com/pdf/8-reasons-LA.pdf
  27. 27 http://smashingconf.com/pdf/8-reasons-LA.pdf
  28. 28 http://smashingconf.com/pdf/8-reasons-LA.pdf
  29. 29 http://smashingconf.com/pdf/Smashingconf-LA-2015-Sponsorship.pdf
  30. 30 mailto:hello@smashingconf.com
  31. 31 http://smashingconf.com/la-2015/registration
  32. 32 http://smashingconf.com/la-2015/registration

The post “California, Here We Come…” Introducing SmashingConf Los Angeles 2015 appeared first on Smashing Magazine.

Freebie: Christmas Icon Set (24, Icons, AI, PSD, EPS, PDF, SVG, PNG)

Go to Source

Christmas is only a month away, and it’s time to add a few festive icons to your projects, or just freshen up your good ‘ol Christmas cards which you may be planning to give out to your family, friends, colleagues, and perhaps even strangers. Today, we’re happy to release the Christmas Icon Set, a set of 24 icons that are all available in AI, PSD, EPS, PDF, SVG and PNG formats. This icon set was designed and created by Manuela Langella151 and is free to be used in private as well as commercial projects.

Freebie: Christmas Icon Set (24, Icons, AI, PSD, EPS, PDF, SVG, PNG)

You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms isn’t cool. Please note that this icon set is available under a Creative Commons Attribution 3.0 Unported2 license. We’d kindly like to ask you to provide credits to the creator and link to this article if you would like to spread the word about the freebie.

A quick preview of this year's Christmas Icon Set.3
A quick preview of this year’s Christmas Icon Set. (Large preview4)
The icons look brilliant on brochures, flyers and Christmas cards. Let your fantasy and creativity flow!5
The icons look brilliant on brochures, flyers and Christmas cards. Let your fantasy and creativity flow! (Large preview6)
The icons are full layered (both in Illustrator and Photoshop) so you can resize, change their colors and positions, and assemble them in any way you like.7
The icons are full layered (both in Illustrator and Photoshop) so you can resize, change their colors and positions, and assemble them in any way you like. (Large preview8)
A preview of how easy the icons are to customize.9
A preview of how easy the icons are to customize. (Large preview10)
Of course, these icons can also be used for your online projects.
Of course, these icons can also be used for your online projects.
A glimpse of how the icons look like on a website.11
A glimpse of how the icons look like on a website. (Large preview12)

Download The Icon Set For Free

Insights From The Designer:

“I love icons. Drawing with vectors makes me happy, gives me a lot of fun and lets me express my passion. Each one of these icons is an explosion of creativity — this is the reason why I draw and love every little detail in them. Another aspect I love when I draw is, “Don’t follow rigid lines”. I try not to use squares or circles, because I love imperfect lines. They make me think back to all the cartoons in my childhood, and as a lover of Mickey Mouse, I just have to follow my heart! ☺”

A big Thank You to Manuela Langella151 for designing this wonderful icon set — we sincerely appreciate your time and efforts! Keep up the brilliant work!

(il)

Footnotes

  1. 1 http://mlangella.com/
  2. 2 http://creativecommons.org/licenses/by/3.0/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icon-set-large-preview-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icon-set-large-preview-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-on-cards-large-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-on-cards-large-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-layered-large-opt.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-layered-large-opt.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-customizing-large-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-customizing-large-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-example-large-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/11/xmas-icons-example-large-opt.jpg
  13. 13 http://provide.smashingmagazine.com/smashing-freebie-christmas-icon-set-2014.zip
  14. 14 http://mokreo.com/
  15. 15 http://mlangella.com/

The post Freebie: Christmas Icon Set (24, Icons, AI, PSD, EPS, PDF, SVG, PNG) appeared first on Smashing Magazine.

25+ resources for succeeding with HTML5 canvas

Go to Source

25+ Resources for working with HTML5 canvasIn case you’ve been living under a rock for the past couple years, the canvas element in the HTML5 specification is fairly simple to understand. Basically, it’s a rectangular area in your page where you can use JavaScript for drawing anything you choose.

It is, quite literally, a digital “canvas” that you can use for rendering game graphics, graphs, animations, and other visual images on the fly. This basically eliminates the need for other types of online animation and graphics rendering (like Flash), and is much more compatible across platforms and devices.

Hopefully you already knew all of that. While the basic idea behind Canvas is simple, actually working with it can be a bit more complex. So here are some great resources to get you started!

Learning canvas

If you’re completely new to canvas, you might want to start out with one of these handy guides. There are hundreds of tutorials and guides out there, but these three provide virtually everything a beginner would want to know about canvas before getting started.

Dive Into HTML5

Dive Into HTML5 has a fantastic chapter on working with canvas that includes a basic definition, and information on building simple shapes, canvas coordinates, paths, text, and more.

Mozilla Developer Network

The Mozilla Developer Network has a very thorough guide to canvas that includes the basics, drawing shapes, using images, applying styles and colors, transformations, compositing, and more.

HTML5 Canvas Tutorials

HTML5 Canvas Tutorials has exactly what the title suggests: tons of tutorials for using canvas that cover everything from paths and curves to images, text, and more.

 

Tools, frameworks, and libraries

Canvas can be used for a whole host of different purposes, but apps and games are the most common. Games, in particular, are a hugely popular use of canvas, with tons of game engines available.

Regardless of what you want to do with canvas, the tools and other resources below will help get you started.

Animatron

Animatron is a premium tool for creating HTML5 animations with no coding required. It has a streamlined UI, supports self-hosted projects (so you can download the HTML5, JavaScript, and resource files for total control), has real-time collaboration tools, and supports both public and private projects.

The free plan supports up to 20 public projects, while paid plans give you more projects and other features, starting at just $6/month.

25+ resources for succeeding with HTML5 canvas

Mixeek

Mixeek is an animation tool that’s based purely on CSS3, HTML5, and JavaScript. It has an online design tool that’s easy to use and very intuitive. And the animations it creates are supported on IE, Firefox, Chrome, Opera, and Safari, as well as mobile browsers.

Mixeek is entirely free to use.

25+ resources for succeeding with HTML5 canvas

Radi

Radi lets you create video, animation, and realtime graphics without learning to code. It works with both the canvas and video tags, and supports many kinds of content layers including images, movies, shapes, text, and more. And of course it supports interactive elements. You can download the Radi beta for free.

25+ resources for succeeding with HTML5 canvas

PlayCanvas

PlayCanvas is an easy to use WebGL game engine that’s free and open source. It includes a physics engine (with support for rigid bodies, triggers, vehicles, and joints), graphics engine (with support for per-pixel lighting, shadows, and post effects), and more. PlayCanvas also includes collaborative development tools, and even includes free hosting for your games.

25+ resources for succeeding with HTML5 canvas

Construct 2

Construct 2 is a gaming engine designed specifically for 2d games. It’s great for everyone from the casual hobbyist to the professional developer who wants to create faster prototypes and mockups, or even save time on coding for production. It includes support for flexible behaviors, instant previews, a powerful event system, and easy extensibility. And of course, your games can be exported to a variety of platforms. You can download a free version with limited functionality (perfect for trying it out), or purchase a license starting at less than $130.

25+ resources for succeeding with HTML5 canvas

EaselJS

EaselJS is a JavaScript library that makes it easier to work with the canvas element. Its API is familiar to Flash developers, but with JavaScript sensibilities. It includes object nesting, a mouse interaction model, and more. There are demos to get you started on everything from drag and drop to sprite sheets to filters and vector masks.

25+ resources for succeeding with HTML5 canvas

Phaser

Phaser is a fast and free open source framework that supports JavaScript and TypeScript. It uses WebGL and canvas, and has support for animation, particles, cameras, device scaling, tilemaps, and more.

25+ resources for succeeding with HTML5 canvas

Three.js

Three.js is a JavaScript library that makes it easy to work with WebGL much easier. It simplifies your code significantly, and is very thoroughly documented. There are tons of great examples of how it’s used in practice, including on sites like that for The Hobbit films and more.

25+ resources for succeeding with HTML5 canvas

Turbulenz

Turbulenz is an HTML5 gaming engine that you can use to create, test, and even monetize games. Turbulenz consists of two parts: the engine and the SDK. The engine supports rendering effects and particles, a physics engine (including collision and animation support), scene and resource management, and more. The SDK includes samples, documentation, a viewer, asset processing tools, and packaging and deployment resources.

25+ resources for succeeding with HTML5 canvas

MelonJS

MelonJS integrates the Tiled map format to make designing levels faster and more streamlined. It was designed as a simple, free, standalone library for developing 2D games that are compatible with all the major browsers. It uses a polygon-based collision algorithm and broad-phase collision detection using spacial partitioning. It also includes tween and transition effects, and basic particle and animation systems.

25+ resources for succeeding with HTML5 canvas

Quintus

Quintus is an easy-to-use cross-platform game engine that lets you create games with a lot less code. The example game on their site uses right around 80 lines of code to create a platformer-style game that’s pretty amazing. Quintus is fully documented and has a community to help you out if you need support.

25+ resources for succeeding with HTML5 canvas

Crafty

Crafty lets you render with either canvas or DOM. It uses an entity component system for game development, avoiding long chains of inheritance. It also includes tons of native components for animation, effects, sound, inputs and more. It has advanced SAT collision detection, it’s cross-browser compatible, and it supports sprite maps for easier drawing of game entities.

25+ resources for succeeding with HTML5 canvas

LimeJS

LimeJS is an HTML5 game framework for building native-like games for modern devices. It’s well-documented, with a community for further support. It includes functions for layouts, nodes, shapes and fills, events, animations, and more.

25+ resources for succeeding with HTML5 canvas

KineticJS

KineticJS is a high performance framework for building animations, transitions, node nesting, layering, filtering, event handling, and more with HTML5 canvas and JavaScript for mobile and desktop apps. It’s well-documented and there are tons of examples already available.

25+ resources for succeeding with HTML5 canvas

bHive

bHive is a canvas framework that makes it easy to create rich animations, games, applications, and user experiences. It includes support for drawing, animation, and interaction, with demos and examples as well as documentation.

25+ resources for succeeding with HTML5 canvas

Paper.js

Paper.js is a vector graphics scripting framework that runs on top of canvas. It has powerful features for working with vector graphics and bezier curves, all wrapped up in a consistent, clean programming interface. It’s largely compatible with and based on Scriptographer (a scripting environment for Adobe Illustrator). It’s easy to learn if you’re a beginner while also having plenty of features for more advanced users.

25+ resources for succeeding with HTML5 canvas

Fabric.js

Fabric.js is a simple but powerful JavaScript HTML5 canvas library that provides an interactive object model on top of the canvas element. It even includes an SVG-to-canvas (and vice versa) parser. You can create and populate objects on canvas, including images, complex shapes, text, and more.

25+ resources for succeeding with HTML5 canvas

Voxel.js

Voxel.js is an open source 3D game building toolkit. It makes it easier to create voxel games like Minecraft in the browser. It’s split into multiple components, so you can use just what you need instead of a huge, bloated game framework.

25+ resources for succeeding with HTML5 canvas

Game{Closure} DevKit

The Game{Closure} DevKit makes it easier and faster to build games, with native speed. It’s 100% JavaScript, with battle-tested code that’s been deployed worldwide. It can be used with your current favorite text editor and browser, without the need for other specialized tools or downloads. And since it uses OpenGL for mobile games, they have native speed on Android and iOS.

25+ resources for succeeding with HTML5 canvas

Isogenic Game Engine

The Isogenic Game Engine is an advanced HTML5 multiplayer game engine that’s used by a number of big names, including the BBC. It includes 2D and isometric support, with particle emitters, tweening, and cell-based animation. And unlike other “multiplayer” game engines that just throw in a networking library, Isogenic has a more advanced and realtime multiplayer functionality than in any other HTML5 game engine out there.

25+ resources for succeeding with HTML5 canvas

Enchant.js

Enchant.js is a simple framework for building games and apps with HTML5 and JavaScript. It’s been used on over 1,000 games and apps already, and has extensive supporting documents. It’s object oriented, multi-platform, and event-driven, complete with an animation engine, WebGL support, a content library, and more.

25+ resources for succeeding with HTML5 canvas

Wade Game Engine

The Wade Game Engine makes it easy to create games for desktop and mobile devices, and is built to perform well on either. Wade has a modular architecture so you can quickly create whatever type of game you need. It has a base module for flexibility, a physics module for games that need them, an isometric model for RPG and strategy games, and more.

25+ resources for succeeding with HTML5 canvas

LycheeJS

LycheeJS is a HTML5 and native OpenGL game engine for embedded, console, mobile, server, and desktop games. It supports responsive layouts, and includes an effect and tween engine, Verlet physics engine, a particle engine, a sprite animation engine, a bitmap font engine, and much more. It also includes websockets technology for multiplayer games.

25+ resources for succeeding with HTML5 canvas

Heatmap.js

Heatmap.js is a simple library for creating JavaScript heatmaps using HTML5 canvas. It’s the most advanced heatmap visualization library on the web, with a very lightweight footprint (less than 3kB gzip), and has premium support available.

25+ resources for succeeding with HTML5 canvas

Chart.js

Chart.js lets you create simple, clean, engaging charts using canvas and JavaScript. There are six chart types available, it’s dependency free, responsive, modular, and interactive.

25+ resources for succeeding with HTML5 canvas

Conclusion

Regardless of what your plans with canvas are, the resources here should set you on your path. Building games, applications, and otherwise adding animation or interactivity to your sites is made a lot easier with canvas libraries, frameworks, and game engines.

80 Hi-Res Logo Mockups from Zippy Pixels – only $27!
25+ resources for succeeding with HTML5 canvas

Source

How To Create Your Own Front-End Website Testing Plan

Go to Source

So, your designers and developers have created a fantastic front-end design, which the client is delighted with, and your job now is to test it. Your heart begins to sink: Think of all the browsers, all the devices and all of these web pages you’ve got to test, not to mention the iterations and bug fixes. You need a front-end testing plan.

This article shows you what to consider when creating a front-end testing plan and how to test efficiently accross browsers, devices and web pages.

Benefits Of A Front-End Testing Plan

  • Clarity on project’s scope
    Knowing which browsers and devices are within the project’s specification will help you to focus and will reduce development time and costs.
  • Reduced client friction
    This is done by showing detailed reports of completed test plans.
  • Confidence in deploying the project
    This comes from knowing you’ve thoroughly tested the project.

In my experience, front-end website mockups are not extensively tested before they are handed over to the back-end development team, the reason being time and budget constraints. They’re usually tested in the front-end developer’s browser of choice and maybe on their smartphone. So, when we came up against a monster of a project, Dad Info1, which has a ton of responsive page types, we needed a plan to methodically and efficiently test functionality and performance across platforms and across devices.

Dad Info is a not-for-profit website, built on Joomla, that aims to help fathers in need, whatever their situation. Last year, it helped over 500,000 dads and delivered 220,000 pages of information every month. I will be using Dad Info as a case study throughout to demonstrate how to create and complete your own front-end testing plan.

Let’s Tool Up

Before getting started, you’re going to need to tool up. In this article, I’ll use the following toolkit to complete the testing process:

  • Asana2
    Used for bug-tracking and team management
  • Chrome Developer Tools3
    Used for inspecting, debugging and profiling
  • Windows’ Snipping Tool (or Shift + Command + 4 on a Mac)
  • BrowserStack4
    Used to test cross-browser functionality on multiple virtual machines and emulators
  • Devices
    Ideally, you’ll want real devices. We have iPhone 4, 5 and 6; HTC One M8; Samsung Galaxy S5; Nokia Lumia 1520; Google Nexus 5; BlackBerry Curve; iPad 2; and Asus VivoTab Smart. If you don’t have these, you can use BrowserStack’s emulators.
  • Google’s PageSpeed Insights5
  • Pingdom Website Speed Test6
  • Screenr7
    Web-based screen recording, with sharing capabilities

What Are We Testing?

Because we’re front-end testers, our job is to know exactly what we are testing. We might not always find bugs per se; rather, we might find that something isn’t working as expected or that the developer has misunderstood the functionality requirements. Having a detailed specification up front that all stakeholders have agreed too will help to avoid some of these problems entirely. Later on in the Dad Info case study, we will go through a front-end specification to test the home page.

Who Are We Testing For?

First of all, you will need to understand your audience and how they will be consuming the website. Here are a few quick questions you should always ask:

  • What are the most popular devices your audience uses?
  • What operating system and browser combinations are most popular among your audience?
  • What connection speeds do they have (3G, 4G, broadband/fibre)?
  • How tech-savvy are they? We can make a judgment call here based on the topic of the website, their devices and their demographics.

For our Dad Info case study, the answers would be as follows:

  • iPhone 5, iPad 2+, desktop (1024 pixels and up)
  • Windows 7 Chrome, Windows 8 Chrome, Windows 8 Internet Explorer 10, OS X Safari, iOS 6 Safari
  • Broadband and 4G (a lot of city workers)
  • Our audience is mainly men between 18 and 35 years of age, fairly tech-savvy, with a smartphone in their pocket and an understanding of social media applications such as Facebook and Twitter.

So, how does this help us carry out a front-end test plan?

Armed with this information, we can instantly break down our huge to-do list into segments that are relevant to our audience and that prioritize our testing methodology. For functionality, we know which devices and browser to test in; for performance, we know what connections to test on; and for usability, we know that our audience uses social media applications, so we can include interface elements that they would be familiar with.

Know Your Limits

Know the limits of your project. At some point, you’re going to have a “That’s good enough” conversation with yourself. Projects limits are usually controlled by a few factors:

  • Budget
    Remember that you should charge for testing. A lot of designers don’t, which is crazy. Testing is time-consuming — and, being designers and developers, our product is time.
  • Timeline
    Include testing in the project’s timeline. It’s often left off the list and, therefore, rushed.
  • Scope
    Not every website needs to work on hundreds of devices. Figure out the main use case, and focus on fulfilling that audience’s requirements.

Browser and Device Support Levels

To set the scope of browser and device support easily with clients and to avoid those “bad conversations,” we’ve found that being up front about our “levels of support” really helps. Below are some simple definitions that you can apply to each page type you test.

Support level 1: fully supported browsers and devices

  • All content must be readable.
  • All functionality must work.
  • Deviation from approved graphic design must be minimized.

Support level 2: partially supported browsers and devices

  • All content must be readable.
  • Navigation must work.
  • Business login functionality must degrade gracefully.
  • Any degradation to presentation must not obscure content.

Support level 3: unsupported browsers and devices

  • No support or testing is required.

Performance Support Levels

You might also want to agree with your client on a performance target. The quick and dirty method here is to agree on a score to reach in Google’s PageSpeed Insights and Pingdom’s Website Speed Test. Normally, we aim for at least 85 out of 100.

Tools For Managing Your Test Plan

It doesn’t matter what tools you use. I use Asana8 and BugHerd9; you could use a simple spreadsheet. It comes down to what works best for you. At a minimum, your tool should be able to do the following:

  • add bugs, issues and tasks in an ordered and segmented list, with the ability to tag (“priority, system critical, etc.);
  • assign bugs, issues and tasks to members of your team (or to yourself), with due dates;
  • comment on bugs, issues and tasks, with a date-ordered history thread;
  • upload screenshots, videos and documents related to bugs, issues and tasks;
  • mark a bug, issue or task as resolved or completed;
  • report on completed versus remaining bugs, issues and tasks.

How To Describe Bugs And Issues

Ever got a bug report from your client that stated, “I clicked on the blog and it doesn’t work”? Useless, right! So, what does a well-written bug report look like?

  • Be specific
    Without being wordy, clearly summarize the problem. Do not combine multiple bugs into one report; rather, submit a separate report for each issue.
  • Show how to replicate
    Detail step by step exactly what you did and what issue occurred as a result.
  • Limit pronouns
    Descriptions like “I clicked it and the window didn’t appear” are very unclear. Instead, “I clicked the ‘Submit’ button and the window marked ‘Registration’ did not load” tells the developer exactly what you did and what happened.
  • Read what you’ve written
    Does it make sense? Do you think it’s clear? Can you replicate the bug by following your own steps?

Setting Up Your Front-End Test Plan

So far, you have collected a bunch of useful information and data, but you’re going to need a proper testing plan to succeed as a front-end tester. Without one, you’re shooting in the dark. So, what exactly does a front-end testing plan look like? In its simplest form, it’s a to-do list, with a bunch of tasks for testing each of your web page types against a set of agreed criteria. The best way to explain this is through a case study.

Case Study: Front-End Test Plan For Dad Info’s Home Page

Test Plan Documentation

Here, we lay out an overview to give the tester some context about the project. And we let them know what we want tested, on which devices and browsers and how long they have to do it.

Budget:

  • total of 10 days for testing
  • use one and a half days for front-end testing of home page

Timeline:

  • complete initial testing within one day, with feedback to front-end developers completed the same day
  • three days for fixing bugs
  • a further half day for retesting bugs

Scope:

  • Support level 1 (browsers):
    • Windows 8: IE 10+, Chrome (latest), Firefox (latest), Safari (latest)
    • Mac OS X Mavericks: Chrome (latest), Firefox (latest), Safari (latest)
  • Support level 1 (devices):
    • iPhone 4 / 5, iPad 2, Asus VivoTab Smart
  • Support level 2:
    • Windows 7: IE 9+, Chrome (latest), Firefox (latest), Safari (latest)
    • Windows XP: IE 8, Chrome (latest), Firefox (latest), Safari (latest)
  • Support level 3:
    • anything else

For this project, we require three reports to assure the client that the page has undergone and passed the testing process:

  • browser and device report: support level 1 and 2
  • responsive report: support level 1
  • performance report: minimum 85 out of 100

Original Approved Design

Having a visual representation of what you are working towards is important to ensuring that graceful degradation is within acceptable limits and that the presentation doesn’t change much between browsers. We’ve added this image to the test plan documentation:

Homepage design of Dad Info10
Home page mock-up of Dad Info (Image: New Edge Media) (View large version11)

Details of Page Functionality

In the home page design, I’ve highlighted all of the functionality that needs to be tested, highlighting them with block overlays. This helps everyone involved to know exactly what to look for and puts us all on the same page. I’ve also added this to the test plan documentation.

Home page graphic design mock up with testing area overlays of DAD.12
Home page mock-up, with overlays for testing areas (Image: New Edge Media) (View large version13)

Based on these overlays, we can produce a full list of functionality.

Search form
  • Click or touch in the search box and then press the search icon to submit the form.
Navigation:
  • Hover over navigation item to display white highlight.
  • Hover over navigation item “Family” to show drop-down mega menu.
Image carousel 1:
  • Press the up and down arrows to browse the slides.
  • Press the pagination elements to skip to a particular slide.
  • Swipe through the slides on touch devices.
News feed:
  • Hover over the headings to change their color.
Image carousel 2:
  • Press the up and down arrows to browse the slides.
  • Press the pagination elements to skip to a particular slide.
  • Swipe through the slides on touch devices.
Call-to-action block 1:
  • Hover over title to change it
Image carousel 3:
  • Press the up and down arrows to browse the slides.
Twitter:
  • No special front-end functionality
Forum:
  • No special front-end functionality
Topics:
  • Hover over a support topic to reveal a picture to the right, with a description. Click “More” to go to a new page.
Footer links:
  • Hover over an icon to change its opacity.
Newsletter:
  • Clicking in or touching the “Enter email address” box should work.
  • Press “Subscribe” to submit the form.
Footer bottom:
  • No special front-end functionality

Browser and Device Report

Whether you decide to use a tool like Asana, BugHerd or Trello, your job as a tester is essentially to collect the following information to relay back to your front-end developers (or to use yourself if you’re solo). To quickly go through all of the browsers, I use BrowserStack, setting up virtual machines that run the OS and browser combinations that I require.

Test Item Browser/Device Pass/Fail Bug/Issue Description
search form
1.a
Windows 8 (IE 10) pass
navigation
1.a
Windows 8 (IE 10) pass
navigation
1.b
Windows 8 (IE 10) fail Cannot move mouse to mega menu area without it disappearing. See this Screenr recording14.
image carousel
1 – 3.a
Windows 8 (IE 10) fail The left and right arrows in the yellow box do not scroll slide 4 back to slide 1.

It’s a methodical job of working through all of the browser and device combinations until you have completed the same tests for each one.

Real Bug From Dad Info

  • item: navigation’s “Join” button
  • browser/device: Windows 8, IE 10, 1024-pixel screen width
  • pass/fail: fail
  • bug description: The “Join” button overlaps the Twitter button, highlighted in blue. See attached screenshot.
03-issuetracking-opt-small15
Screenshot of “Join” button bug (Image: New Edge Media) (View large version16)

Responsive Report

In the report on responsiveness, we are specifically testing elements and functionality that change as the screen’s canvas reduces in size. This includes navigation, page layout and images.

We have a few possible testing methods:

  • Resize the browser’s window
    This is the quick and dirty method, grabbing your browser’s window by the corner and dragging across the break points to see what happens. This is a great way to quickly scan the overall responsiveness of a website to see which elements change.
  • Use emulators
    BrowserStack emulates the majority of popular devices, and in my experience it is good enough for testing.
  • Use real devices
    The expensive option! This entails thoroughly testing on actual devices in your hand. Getting a screenshot usually requires capturing a photo, emailing it to yourself and then annotating in Photoshop. There are some options for screen recording, including UX Recorder17 for the iPhone.

For the Dad Info project, we used a mixture of all three. The front-end developers resized their browser to get the gist of responsive elements, while the quality assurance team used emulators and real devices to complete the testing process to the client’s satisfaction.

Real Bug From Dad Info

  • Item: image carousel 1
  • Browser/device: iPhone 5, iOS 7
  • Pass/fail: fail
  • Bug description: The margins set at the bottom of the carousel push the “News support your child…” title for the featured article too far down. Featured article title 1 should be 20 pixels below image carousel 1. See attached screenshot.
04-iphone-opt-small18
Screenshot of iPhone bug (Image: New Edge Media) (View large version19)

Performance Report

In the performance report, we are looking to score a minimum of 85 out of 100 in Google’s PageSpeed Insights. To get the client to sign off on the report, we’ve included a screenshot of the page speed analysis. Of course, if it doesn’t pass the agreed upon standard, then we provide feedback to the front-end development team using the bug-tracking report template.

Tip: We use boilerplates (stored in GitHub repositories, which we fork) for our content management system and Magento builds, whose performance is already optimized. This saves us a bunch of time.

05-google-desktop-opt-small20
The desktop version passed Google’s PageSpeed test. (Image: New Edge Media) (View large version21)
06-google-mobile-opt-small22
The mobile version passed Google’s PageSpeed test. (Image: Google2623)(View large version24)
07-pingtest-opt-small25
The website passed Pingdom’s speed test. (Image: Google2623) (View large version27)

The reporting is complete. We have just a few issues to send back to the front-end developers to wrap up the front-end build. Once it gets to the quality assurance team, we will retest the elements that kept the project from getting a clean bill of health.

Automated testing tools for visual regression

One thing to consider is the need for visual regression testing post go live, allowing you to compare editions of pages to see if your new feature, css update or class rename has caused any problems.

Visual regression tests essentially do a DIFF on the two versions and outline (in varying ways) the differences between them, highlighting potential issues.

Here are some great resources to get you started:

Summing Up

Testing is a critical process that developers should integrate into their workflow to minimize the number of bugs that get caught in the quality assurance phase. Front-end testing also needs to be budgeted for — with time, resources and money. The process will appeal to methodical types because they don’t need to be creatively skilled to carry it out. Tools are out there to make your life a little easier, but they won’t do the work for you. Whichever tool you pick, stick with it, define a process and put the effort in. The result will be a better website, with significantly fewer bugs, which your client will love and which will reduce the number of “Why isn’t this working?” phone calls and emails on Sunday night.

Your Action Plan

Reading what you should do is one thing; actually doing it quite another. So, I suggest carrying out the following actions right now:

  1. List the devices you have on hand, or check out Open Device Lab33 to find devices near you.
  2. Create support levels for your chosen browsers and devices.
  3. Make time for testing in your timelines and quotations.
  4. Select a management tool (Asana, BugHerd, etc.), or set up a spreadsheet to track bugs, issues and tasks.
  5. Select the first project to apply your test plan to.
  6. Go do it!

Front-end testing will give you and your client confidence in the finished project. You’ll know the website has been thoroughly tested for bugs and is ready for the world to see.

(da, ml, al)

Footnotes

  1. 1 http://www.dad.info/
  2. 2 http://asana.com
  3. 3 https://developer.chrome.com/devtools
  4. 4 http://www.browserstack.com
  5. 5 https://developers.google.com/speed/pagespeed/insights/
  6. 6 http://tools.pingdom.com
  7. 7 http://www.screenr.com
  8. 8 https://asana.com
  9. 9 http:/bugherd.com
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-dad-homepage-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-dad-homepage-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-homepage-overlay-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-homepage-overlay-opt.jpg
  14. 14 http://screenr.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-issuetracking-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-issuetracking-opt.png
  17. 17 http://www.uxrecorder.com/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-iphone-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-iphone-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-google-desktop-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-google-desktop-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-google-mobile-opt.png
  23. 23 http://www.google.co.uk
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-google-mobile-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-pingtest-opt.png
  26. 26 http://www.google.co.uk
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-pingtest-opt.png
  28. 28 https://github.com/BBC-News/wraith
  29. 29 https://github.com/Huddle/PhantomCSS
  30. 30 https://github.com/facebook/huxley
  31. 31 https://www.lullabot.com/blog/article/css-regression-testing-resemblejs
  32. 32 http://csste.st/tools/
  33. 33 http://opendevicelab.com

The post How To Create Your Own Front-End Website Testing Plan appeared first on Smashing Magazine.

The ultimate guide to getting started with Foundation

Go to Source

Foundation is one of the two big-name HTML/CSS/JS frameworks for front-end developers. That didn’t happen by accident. Today, we’re here to tell you all about why you should be using it.

Now first, for those who maybe write their own HTML, but have never worked with a framework before, here’s an explanation:

Frameworks are basically big bunches of pre-written code to help you get started on your projects faster. In the case of front-end code like HTML and CSS, this means you’ll find stuff like layout grids, basic button styles, and commonly used interface elements. Larger frameworks may also include jQuery plugins.

They are not intended to be used like complete website templates or themes, but as a set of building blocks. You take what you need, modify it to suit the project, and generally get on with your work (and your life, presumably). They are meant to be customized, and tinkered with.

This can initially be a daunting task, as frameworks like Foundation and its main rival, Bootstrap, have gotten huge. They each contain thousands of lines of CSS. Before you make a commitment to use any framework for any project, you need to evaluate its potential benefits against the time cost.

That said, once you get used to a framework, it can reduce the time you spend writing markup and CSS considerably.

 

Some history

Foundation began its life as nothing more than a general style guide and some common code. The guys at ZURB decided to speed up their prototyping process by taking some HTML and styles that they tended to re-use, and make a framework out of it. That’s it. That’s really how most good things get made. Someone needed it, so they made it.

Over time, they decided that what they had made was too good to keep to themselves, so they released version 2.0.0 to the world. They made everything responsive, polished it up, and open sourced it for us all. Now designers and developers the world over are using ZURB’s code to make their products faster and, perhaps, dare I say it, better.

Since its release on October 18th, 2011, the MIT-licensed framework has become one of the “big two”, and seen use on thousands of websites.

Its popularity speaks to its utility and versatility alike. If you decide that Foundation is right for you, it won’t let you down.

 

Features

Foundation has been under active development for nearly three years now. It is no surprise, then, that the feature list is extensive.

At its core, the framework is comprised of CSS files (generated from SASS files, also available for download), and several jQuery plugins. There is no HTML included in the main download (except a very basic demo page, you get to write that all by yourself.

That said, there is detailed documentation about each and every component. Each section of the documentation comes with example HTML for you to use and customize as needed. If you want to dive right in, check out the documentation.

If you want to customize the framework from the ground up, there are two things you can do:

Option 1

You can choose to download only the components that you want right on the main download page. If all you want is the grid, the navigation CSS, and a jQuery plugin or two, that’s easy enough. Just un-check all the things you don’t want to include, and go!

This “framework generator” also includes options for customizing the grid, your main colors, and a few other options. This is the option I’d choose for, say, prototyping or developing an internal company application. The default presentational styles are mostly good enough for these things, so why go and change them when you don’t have to?

Option 2

Now this is for the people who’ll use the framework for public projects. You won’t want to use the default presentational styles, as, in all likelihood, they won’t match your branding. For in-depth customization, you have to go to the source.

And by the source, I mean the Sass files. With those, you can go in and customize every variable to your liking, making the framework truly yours.

(A note on Sass files: Again, for those who may not be familiar with the term, Sass is a CSS preprocessor, that introduces things like variables, mixins, and other programming features to regular CSS.

Do a Google search for something like “Sass compiler for [your operating system here]”, and you’ll find what you need. Personally, I cannot recommend the cross-platform Koala App enough.)

Once your Sass files are compiled into one regular CSS file, just link to it in your section like you would any other CSS file. The Koala app, for instance, will compile the Sass files automatically every time you save them, so your browser will always see the latest changes.

Structure

The grid

I can’t say for certain that all HTML frameworks come with a grid system for layout, but most do. Foundation’s grid, without any customization, is a classic twelve-column, nestable, and responsive.

The markup and classes are simple, including classes for customizing the layout by screen-size. If you’ve worked with grid systems before, like the 960 Grid System, you won’t find Foundation’s grid difficult to master.

Note: It’s coded for a mobile-first approach, so you’ll want to keep that in mind as you layout your site.

The block grid

Think of this as a “mini grid”. It’s designed to keep a set number of items evenly-sized and spaced no matter the screen size.

Example: You have three identically-sized elements that you want to keep side-by-side across every device. To do that, you’d use this block grid example that I shamelessly stole right from the documentation:

<ul class="small-block-grid-3">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

Note that if you want, you can specify a different number of columns for different screen sizes. The elements will retain their equal sizing. This component is perfect for things like photo galleries.

Responsive stuff

The media queries are kept simple, but are designed to accommodate a number of screen sizes, ranging from smart-phones to ridiculously huge iMac screens.

Being designed from the ground up to be mobile-first is a great start. Foundation goes a step further by including specific components to help you further refine the responsive parts of your sites.

First, there are the usual classes to hide or show different elements at different viewport sizes. Then, you get slightly more advanced things, like Interchange.

Interchange is a JS library that will dynamically load different content depending on media queries. You can use this library to decide whether to load, for example, a .JPG image of a map, or a Google Maps embed. Or a regular image instead of a retina-screen-sized image.

Using this library, you can save your users some data and some RAM. Just be sure to implement a fall-back for those users with JavaScript disabled.

Navigation

Navigation options are plentiful in foundation, ranging from the all-purpose navigation bar (complete with drop-down menus), to icon bars, breadcrumb navigation, pagination, sidebars, and more.

There are two navigation components, though, that make Foundation stand out from other frameworks.

Magellan

The first is the Magellan Sticky Nav. Put this nav-bar anywhere you like on the page, and once you scroll past its starting location, it’ll follow you down. If you’re using it to link to section within the current page, it can highlight each one (in the bar itself) as you scroll down.

Offcanvas

The second is Offcanvas, which is a vertical navigation bar that is hidden by default. Hit the menu button, and the menu slides onto the page for your browsing pleasure.

Keep in mind that, like all Foundation components, these can be implemented with a minimum amount of markup. The guys at ZURB have put a lot of work into making these fairly advanced user interface elements easy to implement, and it shows.

Media

The media-related components of any framework are often where framework-makers tend to show off a little, and Foundation is no exception.

For example, included by default is the Clearing Lightbox. It’s a dead-simple lightbox image gallery, really. Just throw in some thumbnails, include the relevant classes, and you have a touch-capable image gallery that handles images of variable height with no issues whatsoever.

Another is Flex Video, which can, in theory, be used for just about any embeddable object. Just wrap a div with the flex-video class around your Youtube video, iframe, embed, or object element, and you’re good to go. Those objects will not automatically scale with the size of the browser.

Lastly, there are styles included for image thumbnails. Nothing fancy or special to see here… they’re just nice to have.

But what about Orbit?

People who have used Foundation prior to version 5 might be wondering about ZURB’s Orbit plugin. It’s a carousel, also sometimes called a slideshow, component that is responsive, feature-loaded, and it works pretty well.

However, while it’s still in the framework, it is no longer supported by ZURB, nor is it under active development.

The creators of Foundation themselves recommend looking for alternatives, such as Owl Carousel, or Slick.

Forms

Of course, basic styles for forms have not been forgotten. In fact, they’ve been refined over the years into works of supremely understated beauty. You might think I’m exaggerating, but I don’t think I am. Years of experience have been turned into basic form styles that I believe could be applied to nearly any project, with a minimum of tweaks.

It takes skill to make something as boring as forms look both generic and pretty at once. It’s no wonder that many of the frameworks I’ve tried have imitated Foundation’s style.

That said, it’s not all boring text fields and radio buttons. You know they had to make some stuff of their own.

Take the slider component, for example: You can implement range sliders with HTML5, but they’re boring, and use the default appearance of whatever OS you’re using. Foundation, on the other hand, includes sliders that can be styled with CSS for your customization pleasure.

Also included is a form validation library (more JavaScript here…) which allows you to make sure that your users are inputting the right data. When they input something wrong, for example, an invalid e-mail address, a notification will show up and tell them so.

Buttons

Can’t have a framework without some default button styles. I mean you can, but it just wouldn’t be right, somehow. The default Foundation buttons do not differ too much from any other framework. That is to say, they are implemented with minimal markup, and they have various size and color-specific classes.

You can, however, group them into button groups to sort of throw related actions together. These button groups (the horizontal ones, anyway) are designed to work perfectly with the grid. They’ve also got extra classes for size, color, and rounded corners… all the usual stuff.

Change the markup a little more, and Foundation can also give you dropdown buttons, and those split buttons. You know, mostly button, part dropdown menu?

Those last two components make use of Foundation’s built-in dropdown plugin. This means, among other things, that they are JavaScript dependent. Even so, they are simple to implement. It’s all about the classes.

Typography

Foundation uses a very plain, sans-serif typographical setup to get you started. It’s simple, easy to customize with some basic Sass variables, and it’s all relatively sized. That’s right, Foundation uses rem.

Since Foundation’s creators believe in usability, everything’s big enough to be easily read on small screens. Reading at a moderate distance on regular laptop/desktop screens doesn’t give me any trouble either.

Extra typographical features include:

Inline lists

Want a horizontal text-based list? You know, the kind you might put in a website footer? You’re covered. According to the creators, you should:

Use it when you want more control than spaces between links.

They’re right. &nbsp; sucks for spatial control.

Labels

These are essentially tiny bits of text with colored backgrounds. What might you use them for? Tags and other meta data, or as their name implies, you might use them to label things, ie. form fields.

Included are regular labels, alert labels, warning labels. It’s just another one of those tiny, useful things that I love about Foundation.

See also: Keystrokes

Callouts & Prompts

Sometimes on a website, and far more often in an application, you need ways to catch a user’s attention. You do this either to present them with necessary information, draw their eyes to an incomplete form field or action, or to teach them how to use an application.

If you’re evil, you might do it to play ads… with sound.

You could do it with a modal window. Foundation has great modal windows with extensive behavioral options, sizing options, event bindings… even an option for removing the background.

Then, there are the alerts. These large, colorful alert boxes are statically positioned, and stretch to the width of their container. You could always make them a fixed position for site-wide alerts, though. Have I mentioned the color, rounded corners, and other presentational classes yet? I’m going to stop, because they do that for a lot of things.

Then we have tooltips. These can be applied to just about any element, and set to only show on large screens, or all screens. (On mobile devices, you’d have to tap the element in question to see the tooltip.) They can also be positioned on any side of the element.

Joyride takes tooltips to the next level. It’s a plugin that leverages tooltips (and other things) to give users a tour of your website or application. Great for first-time users, if the interface is necessarily complex.

Content

The basic HTML/CSS frameworks will give you a way to organize your content on a page, and give it a bit of styling. This is one of the big frameworks, though, which means extra components, even for the content.

First up, we have pricing tables: the ZURB guys know their audience pretty well. A lot of people want easy ways to display pricing information for their various products and services. Foundation gives it to them in a fairly standard format.

Next, the progress bars. I’m not going to elaborate on these. They are exactly what you’d expect.

Foundation also includes the basic accordion plugin, and the expected tabbed content plugin. I think it interesting to note that you can put tabbed content inside an accordion section.

Lastly, this is something I have seen in few other frameworks, and I find it incredibly interesting: an equal-column-height component. They call it the Equalizer, a name only half as badass as its function. It requires JavaScript, of course, but it’s a very simple way of making all of the columns in a given section retain equal height in a responsive fashion.

Just add in a couple of data attributes, and you’re good to go. Here’s what is looks like when combined with the pricing table component:

The ultimate guide to getting started with Foundation

 

How to get started

So now you’ve gone through the extensive feature list, and you want them features! Right? Well, if I am indeed correct, then here’s how you get started.

We’re going to create a nice, simple, basic template in Foundation for practice. You can follow along in your own text editor, copy and paste the code, or just download the template I’ve made available because you’re a cheater.

After this section, I’ll be listing a number of other great tutorials and training resources to help on your journey to becoming a Foundation master.

Go download the default package on the download page, and let’s get started.

Include the base files in your project

Now, when you download the package, the file structure inside it will look something like this:

project-folder
    index.html (Demo file.)
    humans.txt (Like a readme file.)
    robots.txt (Just leave this alone.)
    /css
        foundation.css
        foundation.min.css *
        normalize.css *
    /img (Note: Empty)
    /js
        foundation.min.js *
        /foundation
            foundation.abide.js
            foundation.accordion.js
            foundation.alert.js
            (Etc. Huge list here.
                You can keep these files to see/play
                with the source, but you don't actually
                need them to use the framework.)
        /vendor
            fastclick.js
            jquery.cookie.js
            jquery.js *
            modernizr.js
            placeholder.js

You’ll notice that I’ve placed an asterisk after some of these files. These are the only files you actually need to make the framework do its thing. The rest are source files, or nice extra utilities. Those utilities can certainly help you do awesome things, but aren’t strictly necessary.

For example, placeholder.js implements the placeholder attribute of HTML5 forms for browsers that don’t support it.

The files I marked are the only ones that you absolutely need to link to in the section of your web page/application. For the purposes of this tutorial, I’m going to delete most of these files, and keep only those that are essential. I’ll also be starting from scratch with a blank index.html.

To start with, our “home page” will look something like this:

<html lang="en">

    <meta charset="UTF-8">
    
    <meta name="viewport" content="initial-scale=1.0, width=device-width">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/vendor/jquery.js">
    <script type="text/javascript" src="js/foundation.min.js">

You may have noticed an extra CSS file in there. We’ll need that for custom styles.

Create a simple layout

So, since this is a home page, let’s take the concept further. We’ll make it an exceptionally generic landing page for some business or other. No two-column layout for this tutorial! Those are so out of fashion.

Note that I’m skipping including anything like a navigation bar or a call to action in this example. These are totally things that you should do in real projects.

The header

According to the current laws of design trends, we must make a huge header with our company name, a slogan, and a massive background image (not included in this tutorial).

The HTML for this is simple enough:

   <header id="page-header">
       <div class="row">
           <div class="small-12 columns">
               <h1 class="text-center">Our Company Name
               <p class="text-center">Insert a pithy slogan here
           

The row class not only defines the outer limits of our grid, but centers it for us. The header element is there both for semantic reasons and to provide a placer to add a background image later.

We want our header grid column to stretch to one-hundred percent no matter the screen size, so we need only use the small-12 class. Medium and Large sized screens will inherit these styles unless others are specified.

We have our header, and our centered text. This, however doesn’t give us the tall-ish header that we want. For this, we’ll need some custom styles:

/*  HEADER STYLES  */

header#page-header {
    height: 500px;
    background: #cecece;
}

        header#page-header > div.row {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

As you can see, I’ve given our header a background color in lieu of an actual image, and vertically centered our header content. Pretty neat, huh? Here’s how our page looks so far:

The ultimate guide to getting started with Foundation

The introduction & services

So you’ve boldly announced yourself with your header. It’s time to tell your user who you are and what you do. A little description about each service or product… that’s how we do it in this modern age.

Let’s get started.

<section id="page-content">
        <div id="introduction" class="row">
            <div class="small-12 medium-10 medium-offset-1 large-8 large-offset-2 columns">
                <h2 class="text-center">Who We Are</h2>
                <p>Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.</p>
            </div>
        </div>
        <div id="services" class="row">
            <div class="small-12 columns">
                <h2 class="text-center">What We Do</h2>
            </div>
            <div class="small-12 medium-6 large-3 columns">
                <h3>Service Name</h3>
                <p>Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.</p>
            </div>
            <div class="small-12 medium-6 large-3 columns">
                <h3>Service Name</h3>
                <p>Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.</p>
            </div>
            <div class="small-12 medium-6 large-3 columns">
                <h3>Service Name</h3>
                <p>Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.</p>
            </div>
            <div class="small-12 medium-6 large-3 columns">
                <h3>Service Name</h3>
                <p>Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.</p>
            </div>
        </div>
   </section>

Alright, as you can see, all I’ve done is add some more rows and columns with content. I’ve applied the appropriate classes for making the columns scale to the device they’re being viewed on.

In the #introduction section, I did not just make the central column full-width. Instead, to make sure the introduction paragraph was readable, I made it smaller and gave it the appropriate offset classes for each screen size.

Vertical spacing of content sections is something you have to do for yourself in every framework, so again, I needed some custom CSS:

section#page-content, section#page-content > #services {
    padding-top: 3em;
}

    section#page-content {
        padding-bottom: 3em;
    }

Nothing special there. Since just about everything, including the grid, is spaced with ems, I used them for the padding to keep things visually consistent. Think of em-based element spacing as a built-in baseline grid that you can easily take advantage of.

Here’s how the whole thing looks now:

The ultimate guide to getting started with Foundation

The footer

Let’s give ourselves a dead-simple footer, with a couple of navigation links, and a copyright notice, because why not?

<footer id="page-footer">
       <div class="row">
           <div class="small-12 medium-6 columns">
                <ul class="inline-list">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
           </div>
           <div class="small-12 medium-6 columns">
               <p class="text-right">Copyright © Our Company, 2014</p>
           </div>
       </div>
   </footer>

Here, I’ve included an Inline List (see above) for those footer links, and two columns that go vertical at phone-size. Here’s the CSS I used:

footer#page-footer {
    padding-top: 3em;
    padding-bottom: 3em;
    border-top: 1px solid #cecece;
}

And voilà! A bare-bones landing page for you to customize to your heart’s content. Here’s what the whole thing looks like:

The ultimate guide to getting started with Foundation

Grab the zip file if you like, and play with the code that’s already there. Start from scratch, and take a look at the source. Or, you could just take a look below at the training materials that others have made…

 

Tutorials & Training

Training materials by ZURB

As you might expect, the guys at ZURB have gone beyond documentation by providing us with some training materials of their own. These take the form of the Foundation Course, and the Advanced Foundation Course. These training materials are meant to be downloaded and viewed locally.

ZURB also offers paid training classes which can be taken online. You can find more information about this on their website.

Screencasts by Webdesigner Depot

That’s right! We’ve made some training videos of our own, with a special focus on Foundation 5. Check them out on Youtube: Foundation 5 Introduction, and Using Foundation’s Advanced Features

Getting started with the ZURB Foundation 5 Grid

This set of screencasts by James Stone covers all the basics. Topics include: Setting up the Project, Starting with the Desktop Grid, Nested Desktop Grids, Adding Placeholder Images, Creating the Mobile Experience, and Refining the Tablet Experience.

ZURB Foundation 5 framework tutorials

The guys at ieatcss.com went and wrote a whole e-book all about Foundation 5. You can find their beginner tutorials here. If you want something more advanced, you can download their ebook for 29 USD.

Why would you pay that? Because instead of just telling you how to use the framework, they explain how everything works. And I do mean everything, including the JavaScript plugins.

Mastering Foundation Zurb. tutorials from A to Z

This is another set of tutorials, followed by an optional ebook. These are provided by MonsterPost, the TemplateMonster blog.

Foundation’s sassy styles explained

If you’ve been craving a slightly more advanced, in-depth tutorial, here you are! In this post, our friends at Tuts+ describe, in great detail, how to customize FOundation from the Sass files up.

If you’ve never worked with Sass files before, start here.

How to create responsive tables in Foundation

Lastly, the brilliant guys at Sitepoint show us how to create responsive tables. Mind you, this is a solution that Foundation implements by default. In this tutorial, you can learn how to take one specific component of Foundation, and integrate it into another project.

(If you’re new to web design, you may have heard something about tables being “evil”. Well, if you use them for layout out your website, that’s absolutely true. However, sometimes data is best represented in a tabular format, so it’s good to learn how to make tables readable on mobile devices.)

 

Forks

Gumby – a Foundation fork

One beautiful thing about open source frameworks like Foundation is that their licenses allow people to take them, change them, and even call them their own. The designers and developers at Digital Surgeons did just that.

They kept the structural parts of Foundation, and then included some interesting new user interface components and jQuery plugins of their own. The result was named Gumby, and it’s a fantastic framework in its own right.

Where Foundation is designed to be flexible, and suit both content-driven websites and web applications, Gumby is more specialized. It’s focused on one thing: content-driven websites, and the easy creation thereof.

Almost flat UI

The changes to Foundation in this fork are so subtle that I’m not sure whether to call it a fork or a theme. It is, in essence, Foundation 5.2.2 with just a few, small aesthetic changes.

What makes it interesting to me is that these changes buck the “flat design” trend in very small ways. The reasoning behind it seems to be that certain user interface elements, like buttons, should retain a subtle reference to the third dimension.

It’s slightly skeuomorphic design, and I think it could actually improves usability. Well, for some users, anyway.

 

Miscellaneous resources & tools

Here are some interesting Foundation related tools and things that didn’t quite fit in any other category:

Building Blocks by ZURB

The Building Blocks are snippets of code built with and/or for Foundation. These include new UI components, reusable content layouts, and more.

Sublime Text snippets

Sublime Text is a fantastic text editor used by programmers world-wide. These snippets (chunks of code meant for easy insertion into any file) are basically meant to make building layouts with Foundation go that much faster. They’re compatible with both Sublime Text 2 & 3.

Experimental grid generator

Is the default twelve-column grid not to your liking, or not right for your project? Then make a new one! Just head over to this grid generator, input your values, and grab your CSS.

Mind you, the CSS seems to be based on an older version of Foundation, so you may need to adapt it to the newer class names and responsive classes. Still, it does all the hard calculations for you.

Bookmarklets

Bookmarklets are little tools, usually built with JavaScript, that can be placed in your bookmarks bar. Once you trigger them, they can share the current page, display useful information in an overlay, and many other useful little things.

The Grid Displayer Bookmarklet by Antoine Lefeuvre can be used to overlay a visual grid on top of whatever page you’re working on at the moment. The grid is customizable, but you can set it to the Foundation defaults easily.

The Vertical Rhythm Grid Bookmarklet by Kevin Altman does much the same thing as the Grid Displayer. The difference is that instead of vertical lines, you get a bunch of horizontal lines to help you manage the vertical space between elements.

The [Responsive Design Bookmarklet] by Victor Coulon will reload the current page you’re on inside a tool that allows you to quickly preview your designs at different resolutions.

 

A look at what’s coming

You’d better believe that ZURB isn’t sitting still. Along with all of the other stuff they do, they’re hard at work. They’ve got some cool stuff coming, like:

Foundation for Apps

ZURB is creating a brand new version of Foundation which will not replace Foundation 5, but work along-side it. It will include features specifically for designing, prototyping, and building web applications.

Features will include a new grid, integration with Angular.js, new features designed specifically for prototyping and more. To read more about what they’re doing, see what they have to say for yourself: The Next Foundation.

Motion UI

Technically, Motion UI will be a part of this new, app-centric version of Foundation, but I imagine it will be available as a separate component for use anywhere. (That’s an educated guess, nothing more…) What is it? It’s an animation library.

Modern apps make heavy use of animation, not just to impress the users, but to improve usability. Motion UI is designed to make that easier for those of us building complex interfaces.

According to the ZURB guys themselves:

ZURB has loved flat for 16 years. We’ve flattened everything from Foundation, to our apps to our stomachs (we wish — we were working on it). But the flattening of the web has had its drawbacks. Minimizing most gradients, shadows and skeuomorphic elements has left a void in the design world for content differentiation. Motion helps us bring that back.

And while I think that the deliberate, complete elimination of skeuomorphism may have been a slight over-reaction in the first place (see what I said earlier about “Almost Flat UI”), I’m glad that we’re coming up with alternatives. We need new ways to tell our users how to get the most out of our products, and animation is a great way to manage that.

 

Conclusion

Foundation is just what its name implies. It’s a starting point, and it’s a great one at that. It’s not the only great framework out there, but it’s a solid choice for anyone who wants to build beautiful products faster.

Is it right for you and your projects? Take a look inside and find out.

NEXA RUST – Super Mega Pack of 83 fonts – only $47!
The ultimate guide to getting started with Foundation

Source