The WoRld’s besT-selling magazine foR Web designeRs issue 217 august 2011 www.netmagazine.com
Create amazing newsletters
issue
217
Master email marketing with our professional tips and tricks
add depth with Css3 gradients >
148 pages of AWESOME! T
he biggest and best mag for we designers and b developers
We reveal the best ways to apply this popular design technique
Plus > Master data structure in PHP Create a real-time survey 8-bit games with Aardman Why side projects matter Code job boards in Drupal We profile BLITZ agency
Issue 217 august 2011
the power of WordPress 3
Discover how to add a host of great new features to your sites with this hands-on CMS guide
£5.99
> Unleash
Exclusive interview “We’re disrupting education. We’re changing the way that people learn design”
Ryan Carson, Carsonified
ISO 9001, ISO 14001, ISO 27001
4 TIMES WINNER
WINNER
Best Business Hosting Provider
Best Business Customer Service
.net feed/big_question
What do you think about portfolio platforms?
Dan Mall
Art director/designer www.danielmall.com
These platforms are great as quick portfolio options. However, as someone who looks at 50 to 100 portfolios a week, they all start to blend together. If you’re really looking to stand out, a custom portfolio that accentuates your strengths – and hides your weaknesses – is the way to go. Remember: your portfolio is an example of your work too. Dan is art director at Big Spaceship
Trent Walton
Founder of Paravel paravelinc.com
I think they’re a great resource, though if you’re a front-end developer your personal site is an opportunity to show what you’re capable of. On the web, your site can be just as much of a portfolio piece as the work it showcases. Trent is founder of Paravel
Chris Coyier Web designer chriscoyier.net
For photographers, painters, ceramic artists, pure digital artists, printmakers, woodworkers ... amazing. Any one of them is a great choice. For web designers … kinda embarrassing. An online portfolio is the chance (maybe the only one they get) to display how much care and detail they put into their craft. Using a prebuilt solution is like a painter who doesn’t mix paints. Chris is a web designer working at Wufoo
Sites such as Behance, Carbonmade and Cargo offer great virtual spaces for creatives to display their work – but is it wrong to use an ‘off the rack’ platform? We ask our panel of experts …
Aral Balkan
Experience designer aralbalkan.com
Using a portfolio platform is perfectly fine if you’re a designer… as long as you’re not a web designer (or developer). If you are, then your portfolio site is, itself, part of your portfolio and a chance to show off your skills and set yourself apart. Using a generic portfolio site will, well, make you look generic. Aral is a designer, developer, professional speaker, teacher, and author of the Feathers iPhone app
38
.net august 2011
NET217.feed_bq 38
6/2/11 5:09:46 PM
.net feed/big_question Nathan Smith
Rob Mills
sonspring.com
bluegg.co.uk
UX designer
I think sites such as Behance, Cargo, and Carbonmade are great for graphic designers who need a place to put a portfolio of amazing work, but just do not have the time and/or skill to craft a solid site for themselves. I also think they work as a good stop-gap for web designers who are looking to get their work noticed, and land their first job, but do not have the time or resources to get their own domain name and worry about hosting. However, I think in the long-term, if you are a serious web designer or developer, you ought to have your own niche carved out on the web. Ultimately, if you are using a service, you’re beholden to its up-time, terms of use and design whims. Nathan created the 960 Grid System
Tom Lane
Illustrator/designer gingermonkeydesign.com
The right portfolio platforms, used in a considered and strategic way, can get your work in front of the right people. Rather than seeing them as another place to just put your work on the web, try to understand the initiatives each platform runs so you can use them to your advantage. Behance, for instance, curates the top creative work posted to their members’ profiles and has a gallery section that gets an incredible amount of hits each day. Personally, I find getting my work selected and seen by their traffic always results in a good stream of commissions, from all across the globe. Tom is a designer and illustrator
Elliot Jay Stocks
Independent designer elliotjaystocks.com
As much as I respect custom-made portfolios and, as a designer, have a desire to create them myself, I think sites like Cargo Collective are wonderful, because they allow people to get their work online without having to write any code. That’s great for nonwebby people like illustrators or print designers. And if you can write code, you can heavily customise the templates, so it’s the best of both worlds. Personally I’ve never been interested in the ‘social’ aspect communities like Behance offer, but they’re undoubtedly great tools. But I’d be wary of employing a web designer if they only had one of these portfolios that didn’t require any code-writing. Elliot is a designer and illustrator and the founder of typography magazine 8 Faces
Studio manager I think portfolio sites are a useful resource for people to share their work for increased exposure to an audience that they may not otherwise be able to engage with. Sure there’s a risk of plagiarism but you choose what to share and feedback/discussion amongst the community is often valuable. Rob is studio manager for creative agency Bluegg
Jonathan Andrew
Tech lead
welove72.com
It’s often very difficult to find the time and ‘headspace’ to design and build your own portfolio site. For freelancers and enthusiasts looking for work, content is key. It may be desirable to have your own site that conveys your own personality, but potential employers will ultimately only be interested in looking at your work and what you can offer, and Behance and Carbonmade showcase it in a very simple, yet very effective fashion. Jonathan Andrew is tech lead for We Love...
Christopher Schmitt Chief creative officer christopherschmitt.com
Use all the portfolio sites you can use. Put your work out there in as many places as you can. Don’t just keep your best work to yourself on one site, get your work on your own dot-com, but also on Dribbble, Forrst, Githib and so on. And once you have something to show, be sure to blog it, too, which should be connecting to an RSS-to-email newsletter service like the one provided by MailChimp. Christopher is chief creative officer for Heatvision
Project Manager www.project83.com
I think they are absolutely fantastic! It’s a great way for creative people to have a beautiful web presence without having to understand HTML/ CSS. If and when they have the budget/desire for something more unique and personalised, they can build a site. But until then, these apps are a really great fit. Nick creates websites at Project83, a design agency in Nashville
Melissa Bennett Copywriter
welove72.com
These platforms are an excellent resource for our industry and design community. They give creatives a voice and allow brilliant work to surface. Designers no longer have to wait for a Willy Wonka style invitation to allow them to showcase their work. They can choose from a wide range of platforms with varying themes to display new work and get industry critiques and feedback; they also help you keep your portfolio of work up-to-date and organised, allowing you to cultivate a good, solid folio of your best pieces. Melissa Bennett is a copywriter for We Love...
Jonathan Smiley Designer zurb.com
Shane Mielke Creative director shanemielke.com
Portfolio platforms like these are simple and effective ways for people to showcase their work online. If your work gets featured there are huge opportunities for recognition in the community. But a huge downside is that your work is hosted among peers and companies that you might be in competition with. Imagine sending a client a link to your work on a hosted portfolio platform and, instead of seeing just your projects, they start clicking the people in your own network or the featured pages and find someone else for their project. Shane is designer and creative director at 2Advanced
NET217.feed_bq 39
Nick Francis
For photographers, graphic artists or people who work in print, services like Carbonmade are a nice option – solid presentation without spending a lot of money on a custom site. For web designers I’m not sure I see the value. If you’re presenting your work for purposes of employment, using a service just says you can’t be bothered to make your own site – and templates won’t communicate your style in the same way. Jonathan Smiley is design lead at ZURB
>> more Big Question online If you want to read the full versions of our experts’ opinions, and perhaps add your own, visit us online at www.netmagazine.com
.net august 2011 39
6/2/11 5:09:46 PM
al ob Gl
Cu st om
Unleash the power of WordPress 3
e /R de Hi
th em e
.net wordpress
fi nd er Me nu s
Admin Bar Minimi ser
abler s i D r a B Admin
44
.net august 2011
NET217.f_word 44
i m o n o x a T
m o st u C
m to
st o P
es p Ty
H
Image Rob Bowen is art editor of .net and has 14 years’ experience in magazine and print design. twitter.com/SpeshBob
At this year’s SXSW Conference in March, WordPress founder Matt Mullenweg revealed that WordPress powers a whopping 12 per cent of the internet. Given Pingdom’s recent declaration that there are 255million sites on the web, that equates to an astounding 30.6million sites powered by the WordPress platform. With numbers like that, there’s no doubt that WordPress rules the web as the number one content management system. So why is it so popular? There are many reasons, but it’s mostly because savvy web designers can use WordPress to create powerful sites in minutes. Plus
6/2/11 4:08:25 PM
C
Words Jeff Starr is a web developer/designer and co-author of the book, Digging into WordPress. Jeff shares WordPress tips and tutorials at DigWP.com and PerishablePress.com
t en hm c ta at
Gl ob al
With the launch of version 3.1 in February, WordPress has become more powerful and easier to use than ever. Jeff Starr shows you how to get the best out of its new functionality
it’s completely free and extremely flexible. Need a small blog? Bam! Full-featured CMS? Done. A network of social media sites? Well, that takes a little longer, but yes, WordPress 3 can do that too. WordPress 3 brings tons of awesome features, including Twenty Ten, the new default theme that shows off all the latest features and functionality. WP3’s new APIs enable theme designers to customise everything: backgrounds, headers, post types, post formats, taxonomies, shortlinks, menus and more. This new functionality means that Admins have huge control over every detail of their site, with easy extensibility just a few clicks away. And the long-awaited merger of WordPress and WPMU (the multi-site version of WP) has finally happened, enabling designers to run thousands of individual sites from a single installation (one set of files, one database). You also get great stuff like bulk auto-updates, so you can update all of your plug-ins with a single click. And, as if all this wasn’t enough, WordPress 3.1 rolled out in February with a redesigned linking workflow, streamlined writing interface and handy Admin Toolbar. What does all this new functionality from WordPress mean for web designers? Well, turn over the page and we’ll reveal all …
r Ba
Di sa bl e
Ba r Ad mi n
n mi Ad
Custom Menus
e ov em /R de Hi
nav_menu
Custom Pos
al ob Gl n -i ug Pl
in de r
.net wordpress
e it S i lt Mu om st Cu
nu s
dt i -w d xe i f us
of cr i M
om st Cu
n me
menu-manage
Cust om Po st Fo
at ta ch me nt Ad m
t en hm c ta at
in
es p Ty
lti Sit e
Fo rm at s Mu
fi nd er
s nu Me
Gl ob al
Ba r
Mi ni mi se r
es mi no xo Ta
om om st Cu st Cu
NET217.f_word 45
nav_menu
Cu H st ide/Re om move Ad Admin B mi ar Pl ug n -i Cu n st B om a Po r st
th em e
menu-
s e i m o n
st
s nd ou ts r kg ma c r o ba
.net/august 2011 45
next>
6/2/11 4:08:59 PM
.net wordpress
Custom backgrounds Custom backgrounds are an easy place to begin with WordPress 3. The functionality is builtin, but not activated by default. As with a number of WordPress features, you have to enable their functionality by adding a line of code to your theme. To enable custom backgrounds, ensure that your theme includes the wp_head tag then include this snippet in your functions.php file: add_custom_background(); That line enables Admin-level users to choose their own custom background, which is added to the Media Library for optional use elsewhere. The Background settings are available from the Appearance menu. There you can set things like position, repeat, attachment and color, which are, of course, CSS properties that WordPress includes in the <head> of your pages:
Above left Customising backgrounds via the WordPress Admin takes just a few clicks Above Bada-boom, bada-bing! Instant shortlinks at the click of a button
<style type='text/css'> body { background-image: url('http://example. com/wp-content/uploads/bg.jpg'); background-repeat: no-repeat; background- position: top left; background- attachment: scroll; } </style> And changing and removing custom backgrounds is a piece of cake, so feel free to experiment!
Shortlinks Social media is bigger than ever. Popular services like Twitter restrict the number of characters
Slick new default theme Remember the old default Kubrick theme? Think fixed-width with rounded corners and cornflower-blue header and you’ve got it. Dubbed ‘Twenty Ten’ (as in the year, 2010), the new WordPress theme is inspired by Ian Stewart of Thematic and is jam-packed with some awesome features: Clean and minimal two-column layout Widgetised sidebar and footer areas Fresh horizontal dropdown menu system Clean typography via Georgia/sans-serif fonts Custom background images Custom header images via the WordPress Admin
Built-in support for Post Thumbnails Built-in support for Microformats Smarter template structure Strong(er) focus on SEO Compared to Kubrick, Twenty Ten is a powerhouse of a theme that really takes advantage of all the cool new things that WordPress 3 can do. Overall, it’s a solid, wellbuilt theme that is a pleasure to use. This sort of vanilla design may not appeal to everyone’s tastes, but it’s definitely a step up from crusty old Kubrick. To check out the new Twenty Ten theme in action, visit the Appearance settings page in the WP Admin.
allowed in a message, and you don’t want to waste any of them on full URLs. There are many great URL-shortening services such as Bit.ly and Tinyurl. com, and now WordPress makes it easy to roll your own from the comfort of the Admin area. By default WP3 generates shortlinks for every post, based on post-ID. They look like this: http://digwp. com/?p=123. To grab a quick copy of a post’s shortlink, just click the Get Shortlink button beneath the post title on the Write/Edit Post screen. This makes it super-easy to share your stuff on Twitter, Facebook or any of the other bazillion social media services available these days. WordPress also includes shortlink information in each post’s <head> section as a <link>, like so: <link rel='shortlink' href='http://digwpcom/?p=123' /> So that’s all swell, but how do we display the shortlink information in the theme itself? Simple, just add the following template tag to any WordPress Loop: <?php the_shortlink(); ?> By default, this will create a hyperlink for each post. The default code output will look like this: <a href='http://digwp.com/?p=123' title='Title'>The is the short link.</a>
But we can tweak this output by adding a few parameters: <?php the_shortlink('shortlink', null, '<p>', '</p>'); ?>
New look With WordPress 3 we get to say goodbye to that tired old sack … and hello to the new hotness
<prev
NET217.f_word 46
46
This tag wraps the shortlink with a paragraph, excludes the title attribute and simplifies the anchor text. The cool thing here is that the extra markup is only displayed if the shortlink is available, leaving no empty HTML tags to soil your design. Most sites display shortlinks immediately after each of their posts, so just add to the loop of your theme’s single.php and you’re good to go.
.net august 2011
6/2/11 4:09:01 PM
.net wordpress Custom menus
For more information on the_shortlink(), check out the WordPress Codex: http://digwp.com/u/481.
Streamlined linking
Deep-linking your content is key to successful SEO, and WordPress 3 makes it easier than ever with a new streamlined Linking Tool. When writing your posts using the Visual Editor, highlight your link text and click the link icon in the toolbar to bring up the Insert/edit link pop-up box. There you can specify any URL and title, or use the Insert-link tool to find existing internal content on your blog. Using the Search field or choosing from the list, simply select your post, edit the title if needed, and click Add Link to seal the deal. Just one panel does it all – truly a simple and efficient way to find related content to share with your visitors (and the search engines!). As mentioned, this new tool is only available when using the Visual Editor (as specified in your Profile settings), but it does an excellent job of inserting links quickly and easily with the magic of Ajax and just a few clicks.
Easier than ever
Perhaps the most useful WP3 feature for users is the new menu-management system, which gives you complete control over the navigational menus on your site. Before Custom Menus, WordPress designers had to pick and choose between various template tags to try and hack their way to a decent set of menus – even then, any sort of customisation was out of reach for the typical WordPress user. To be fair, WordPress does have some powerful template tags for creating menus, but with so many different types of content, there is no ‘one-size-fits-all’ template tag to suit each and every situation. Now with WordPress 3, any Admin-level user can make any number of custom menus – for example: category menus with specific exclusions, menus for external resources, specific posts and pages. To set up Custom Menus for your theme, first register them by placing the code below in your theme’s functions.php file. Let’s say we want to add three Custom Menus: function register_menus() { register_nav_menus( array( 'header-menu' => __('Header Menu'), 'sidebar-menu' => __('Sidebar Menu'), 'footer-menu' => __('Footer Menu') ) );
} add_action('init', 'register_menus'); This will register and enable three custom menus that can be displayed anywhere in your theme. We can do this using any of the following template tags: <?php wp_nav_menu(array('theme_ location'=>'header-menu')); ?> <?php wp_nav_menu(array('theme_ location'=>'sidebar-menu')); ?> <?php wp_nav_menu(array('theme_ location'=>'footer-menu')); ?> Once the template tags are in place, log into your Admin area and create a Custom Menu under Appearance > Menus. Everything is pretty self-explanatory from that point. You can create as many custom menus as desired and even customise each menu item’s URL, title, and link text. There is even a default widget that works automagically with any widgetised area. The power and flexibility that this new menu system brings to WordPress is seriously awesome. Any combination of links may now be displayed anywhere in your theme with just a few simple mouse clicks. For more information on using Custom Menus, check out DigWP.com: (digwp.com/u/502).
WordPress MultiSite Until WordPress 3, WordPress came in two flavours – regular and WPMU. Regular WP was for single-site installs, and WPMU was for creating a
It’s all good WP3’s powerful new Custom Menu interface takes the slog out of customisation
Added bonus You can add anything to your custom menu with easy ‘Add to Menu’ forms
network of sites. Now with WordPress 3, MultiSite functionality has been integrated into the core, enabling both single-site and multi-site setups using only one database and one set of files. This is good news for anyone wanting to use WordPress to run multiple sites. With WP3, everything is managed and updated from a single Admin area. The new MultiSite functionality is not enabled by default, though, so single-site users will experience the same five-minute installation process as before. To enable MultiSite, you need to add the following line of code to your site’s wp-config.php file (just above the line that says, ‘That’s all, stop editing!’): define('WP_ALLOW_MULTISITE', true); Go deep Using the new streamlined Link Tool makes deeplinking kind of fun – really!
After adding this line, a new link will appear in the WP Admin under the Tools menu. Clicking on
NET217.f_word 47
that link will take you to the Create a Network page, where you’ll define a few options and create a network. You’ll need to choose whether to use subdomains or sub-directories for each of your network sites. Unless you have good reason to do otherwise, choosing the sub-directories option is the easiest way to run MultiSite. To use subdomains, refer to the WP Codex: digwp. com/u/484. You can even use top-level domains (like example-1.com, example-2.com, and so on) by following the steps outlined at digwp.com/u/482. After choosing your options on the Create a Network page, click the Install button to activate your settings and create the network. The Enabling the network page will appear with the two chunks of code required to complete the installation. Simply follow the on-screen instructions to add the first chunk of code to your site’s
.net august 2011 47
next>
6/2/11 4:09:02 PM
.net projects
52
.net august 2011
NET217.f_project 52
6/2/11 3:40:39 PM
.net projects
Launching a side project Having recently launched the design resource Method & Craft, Phil Coffman has useful advice for those considering a side project
Side projects are all the rage. Whether you’re telling everyone about your completed project on Twitter, starting a Kickstarter fund to get your plan realised or scribbling away ideas furiously in your Moleskine, it’s hard to shake that insatiable desire to turn Image Mike Chipperfield is a member of Brightonextracurricular ideas in our heads into reality. based collective Magictorch. There’s a good reason for this – we’re creative www.magictorch.com people and we find it hard to turn off the ideamaking part of our brain. And, thanks to the skillsets we’ve obtained and the promotional potential of social media, it has never been easier to test our ideas by sharing them. But we all have busy schedules. Some of us are freelancers and have to juggle work, client relationships, contract writing and accounting. Others are busy with full-time jobs and families. How do you find time to start a passion project, let alone get it off the ground? Why take on a side project in w site at the first place? Is it better to collaborate You’ll find our ne . New om with others or do it yourself? How do netmagazine.c so , ily d da you promote your project? Let’s explore content is poste ked! some of those questions. get it bookmar Words Phil Coffman is associate creative director at digital marketing agency Springbox in Austin www.springbox.com
Check out our new site!
2
“I want to work with others”
Side projects give us the opportunity to collaborate with others. Even if your day job involves working in a team, it’s healthy to learn from others and, besides, you often don’t get to pick who’s in your team when you’re working for The Man. With a side project you can. The experience I’ve gained from side projects with people such as Noah Stokes and Trent Walton has enriched me as associate creative director at Springbox.
3
“I want to make a lot of money”
Side projects can be lucrative, and making a few extra bucks can be a compelling reason to start one. Ad networks such as Fusion Ads and The Deck provide their members with steady income. Kickstarter opens the door for a community to help bring projects to fruition. The App Store continues to woo indie developers and designers. There is money to be made.
4
“I want to use it myself”
Side projects give us the chance to create something we would like to have ourselves. The main reason I started Method & Craft (methodandcraft.com) was that I wanted to visit a site where design professionals share some of their techniques and offer a ‘behind-the-scenes’ look at how they do what they do.
Blockbuster Fflick (fflick. com), a movie site featuring material based on people’s tweets, has been a big success and was recently bought by Google
Why am I doing this anyway? Ideas are cheap. We all have them and it can be hard to choose which one to invest in. Here are four common answers:
1
“I want to try something new”
Side projects present a change of pace from our usual work and an opportunity to learn new skills. In the ever-evolving field of web design this can give you the chance to explore emerging technologies, which will make you more valuable to clients. A side project also gives you the opportunity to oversee a piece of work from start to finish and see how well you manage yourself.
NET217.f_project 53
.net august 2011 53
next>
6/2/11 3:40:41 PM
.net newsletters
Create amazing newsletters
Email newsletters are often the neglected child in the world of digital design but a clever crafted campaign can reap huge rewards. Digital creative agency We Love explains the secrets to newsletter success, with reference to its recent third birthday campaign … Words We Love Digital agency We Love describes itself as a “home for creative storytellers: a perfect mix of wisdom and rising stars, coming together to craft wondrous work for your brand”. www.welove72.com
Image Jonathan Ball is an illustrator and graphic designer inspired by such lowbrow artforms as retro games, cartoons, urban art and cute monsters. www.pokedstudio.com
58
Email newsletters may not be the sexiest or newest topic in web design. But they’re still a massively useful way to spread your message, promote your product and get people visiting your site. Getting them right can be the key to a successful project; getting them wrong can be hugely counterproductive. So how do you strike that perfect balance between enticing and informative? How you push your message without seeming pushy? And how do you ensure your carefully crafted newsletter isn’t perceived as that dreaded word, ‘spam’? In this feature we’ll address these questions with reference to a campaign We Love created to celebrate its third birthday (view it at we-arewelove.com) and hopefully give some insights into how to run a successful email marketing project, from idea conception to final coding flourishes.
Define your goals At the start of any creative project, you need to get together and define what you want to accomplish. For this project, our aim was to raise awareness of our company, our achievements and what makes us stand out from the crowd. We wanted to thank everyone who has been part of We Love, from clients and colleagues to friends. We also wanted to reflect the life cycle and growth of our company from what we have become to what we will be in the future. Once you’ve identified your objectives and target audience, the brainstorming can begin. This stage is all about pinning down that unique idea. In the concept phase we’ll have a team of copywriters, designers and developers all
.net august 2011
NET217.f_email 58
6/2/11 3:03:46 PM
.net newsletters
NET217.f_email 59
.net august 2011 59
next>
6/2/11 3:03:50 PM
.net technique frontend
CSS3 make your backgrounds shine Now that all browsers support CSS gradients, why not take advantage of their time and file-saving qualities, suggests Lea Verou Knowledge needed Intermediate CSS, basic graphic design experience Requires Firefox 3.6+, Chrome, WebKit nightlies, Opera 11.10 or IE10 preview Project time 1 hour Back in 2008 when CSS3 was becoming popular, the WebKit rendering engine pioneered the introduction of natively supported CSS gradients via its proprietary –webkit-gradient() CSS function. Designers were thrilled by this addition but it couldn’t gain widespread use. This was partly because it was restricted to WebKit-based browsers (Chrome, Safari and a few mobile ones), and partly due to its unfriendly syntax, which exposed a gradient drawing API in the most direct way possible. However one year later, Mozilla saw the need for such a feature in CSS and with Firefox 3.6 they went on to copy WebKit’s implementation with a few tweaks. When the Firefox 3.6 alpha came out including this feature, the CSS Working Group couldn’t ignore CSS gradients any longer. There were two inconsistent implementations already and no accompanying standard. They decided that even if they disagreed with the addition of gradients in CSS, they had to standardise so that at least there was a consistent way to use them across browsers, before others start working on them too. Tab Atkins jumped in and wrote a proposal for a new syntax that was much easier to use than WebKit’s, and allowed for more effects commonly needed in web design. After a few changes it was added in the Image Values and Replaced Content module, and Firefox changed its implementation to match it. In January 2011 WebKit started supporting the standard syntax too, and Opera followed suit in March, adding linear gradients in the Opera 11.10 beta (planning to implement radial ones a few months later). In April, the Internet Explorer 10 developer preview 1 was released, making IE the last (but not least) browser to support CSS gradients. This means we already have four independent implementations of native CSS gradients. The
Figure 1 The simplest gradient you can create using CSS gradients is a linear gradient, with two colours, from top to bottom
84
Download the files! > files you
All the latest version of every browser supports them. Luckily, torial need for this tu it’s very easy to add fallbacks for older versions, which can be found at could be as close as you want them to be: from just a solid netm.ag/css-217 colour to SVG, or bitmap image fallbacks. If browser support is not perfect, why not just settle to the old repeated image technique and postpone using CSS gradients for a few years? Well, native CSS gradients have quite a few advantages: Fewer HTTP requests and smaller file size (even with all the prefixes), which makes for quicker loading of pages. They’re a snap to create and edit, saving you valuable time for more creativity. Even if you are more conservative and don’t want to use them for production yet, they can prove to be a valuable tool for prototyping. They scale extremely well, since they are essentially vector images with no intrinsic dimensions. In the future, you’ll be able to animate them with the CSS transitions you already know. This is already in the spec but browsers haven’t caught up yet.
Using CSS3 gradients The simplest gradient you can create is a linear gradient with two colours, from top to bottom: background: linear-gradient(silver, gray); This is the standard syntax that we’re going to be using in the future. However, all of the browsers we’ve mentioned currently implement only gradients that have a vendor prefix, so in reality the process becomes a little bit more verbose: background: -moz-linear-gradient(silver, gray); background: -ms-linear-gradient(silver, gray); background: -o-linear-gradient(silver, gray);
Figure 2 What if we don’t want a top to bottom gradient? The syntax allows us to specify the direction of the gradient. Here we’ve used 45deg for a diagonal gradient
.net august 2011
NET217.tut_css 84
6/2/11 11:55:38 AM
.net technique frontend 1
Browser inconsistencies
2
Like every CSS feature, CSS gradients come with their fair share of bugs and implementation inconsistencies. Some of the most common you might come across are:
Figure 3 The image on the left uses two gradients, each with 50% height, stacked on top of each other. On the right, we make the height of the top gradient shorter background: -webkit-linear-gradient(silver, gray); background: linear-gradient(silver, gray); To make it more cross-browser acceptable, you could also add the (now obsolete but still needed) -webkit-gradient() version: background: -moz-linear-gradient(silver, gray); background: -ms-linear-gradient(silver, gray); background: -o-linear-gradient(silver, gray); background: -webkit-gradient(linear, 0 0, 0 100%, from(silver), to(gray)); background: -webkit-linear-gradient(silver, gray); background: linear-gradient(silver, gray); Since browsers drop the whole declaration if they can’t understand the value, you can add a fallback before the gradients for older browsers. This usually takes the form of a solid colour, but could be an SVG or bitmap image too: background: gray; background: -moz-linear-gradient(silver, gray); background: -ms-linear-gradient(silver, gray); background: -o-linear-gradient(silver, gray); background: -webkit-gradient(linear, 0 0, 0 100%, from(silver), to(gray)); background: -webkit-linear-gradient(silver, gray); background: linear-gradient(silver, gray); The result can be seen in Figure 1. For brevity, in the rest of this tutorial we’ll omit the prefixed versions (don’t forget them in real-world usage, though!).
1
2
3
4
Figure 4 A wealth of different results can be achieved by altering the position of the first and second colours within a linear gradient and the percentage heights
Firefox unfortunately doesn’t support explicitly sized radial gradients (Mozilla bug #627885) Google Chrome doesn’t support elliptical radial gradients yet, although it doesn’t drop the declaration When using the technique described in Figure 6 for stripes, Firefox needs an additional last colour stop to show it correctly (with the same colour as the one used last) In WebKit, the triangles used to make the chequerboard in Figure 8.1 end up slightly smaller than needed, so they leave a 1px gap between them (WebKit bug #54615) Circles created with radial gradients (like in the polka dot pattern in Figure 10) are quite aliased in WebKit, even if the colour stops are not at the exact same position currentColor is not supported in gradient colour stops by either WebKit or IE10.
As with every prefixed CSS property or value, don’t forget to put in the standard version last in order to make your code futureproof. Also, don’t forget you need to include -webkit-gradient() before -webkit-linear-gradient(). The good news is that you can save yourself from having to go through all of this hassle by using the following handy online tool to convert
It’s very easy to add fallbacks, which could be as close as you want them to be the standard syntax to all of the above: http://leaverou.me/demos/ cssgradientsplease.
Turning things around That seems useful, but what if we don’t want a top to bottom gradient? Fortunately, the syntax allows us to specify the direction of the gradient, either with a corner or side keyword (top, left top, right bottom and so on), or an angle in degrees. For example, 45deg for a diagonal gradient: background: linear-gradient(45deg, silver, black);
1
2
Figure 5 By combining background-size with the gradient, you can produce horizontal, vertical and diagonal patterns
NET217.tut_css 85
3
.net august 2011
85
next>
6/2/11 11:55:39 AM
.net technique frontend
Flash Build a retro game with Flixel
Download the files! >u
All the files yo torial need for this tu can be found at 17 netm.ag/flash-2
Part one Richard Davey of Aardman Digital (aardman.com/digital (aardman.com/digital) explains how to get started with the Flixel game framework, and build an 8-bit styled retro game Knowledge needed ActionScript 3, understanding of Classes and Objects Requires The Flex SDK and Flash Develop (or Flash Builder on OS X) Project time 2 -3 hours Retro style ‘8-bit’ games are more popular than ever online. With pixel-art graphics and ‘chip tune’ music that apes the consoles of old, these games often have surprisingly innovative gameplay mechanics. And Flash has turned out to be the perfect tool for creating them, as hit titles such as Canabalt (adamatomic.com/canabalt) and Fathom (adamatomic.com/ fathom) demonstrate. This may seem at odds with a technology known for its vector graphics and timeline animation. But under the hood Flash is perfectly capable of pushing around large volumes of pixels. Flixel is a game framework born from a desire to create 8-bit style games. But it has evolved into a powerful way to rapidly create games in Flash. With a strong community and plug-ins available, it’s the perfect choice to create our game with. In this two-part series we’ll explore how Flixel works and build a retro-styled platform game in the process. Download the tutorial files and look through the source code, because not all of it can be showcased here and we’ve got a lot of ground to cover!
Getting started For Windows users there’s a guide to installing FlashDevelop with Flixel at netm.ag/install-217. On Mac OS X you can use Adobe Flash Builder: FlashGameDojo has a tutorial for this at netm.ag/builder-217. Alternatively, run FlashDevelop under Parallels (netm.ag/parallels-217). Even if you use FlashDevelop/Flash Builder already, I’d still recommend following the guides so you become familiar with the Flixel package structure. It helps to have a plan of your game before you start. While this should never restrict you from iterating your game during development, it will set a base ground on which to build. Here is a concise brief for ours: ‘Player controls a chick who can run left/right and jump on platforms across a horizontally scrolling level. The environment is a lush green jungle with trees, grass, flowers
and ruins to explore. There will be static and moving platforms and stars to collect. Collect enough stars and the level exit opens. Players cannot die by falling unless they hit the water. Animal baddies move around the platforms and are fatal to touch.’ From this we can instantly visualise how the game will look and play. This enables us to break the code structure into logical objects such as Player, Map, Star and Enemy. The artist can also create concept sketches to set the style of the game, and provide a point of reference for the pixel art.
It starts with FlxGame Open Main.as from the Part 1 source folder: public class Main extends FlxGame { public function Main() { super(320, 240, PlayState, 2, 60, 60); forceDebugger = true; } } FlxGame is the wrapper for your whole game, setting up Flixel in the process. The call to super sets the resolution of our game (320 x 240), the initial State (PlayState), the zoom level (2) and the frame rates (60 fps). While 320 x 240 may seem small at a zoom level of 2 it will display at 640 x 480. The upscaling of retro games is a common trait that helps show off the detailed pixel art. forceDebugger enables the built-in debugger, which is activated by pressing the ' key. This enables you to view bounding boxes, collision, paths, variables, logs and save out game replays. Your game can have only one FlxGame class, but it can have many States. States are a way to split your game into logical sections. For example, a MainMenuState, a PlayState with the guts of the game and a GameOverState. Only one State can be active at a time.
Our hero Meet Nutmeg, the sprite sheet for the pixel hero of our game, drawn in 16 x 18 sized frames for that retrotastic gaming feel
90
.net august 2011
NET217.tut_flash 90
6/2/11 12:11:15 PM
.net technique frontend
What is Flixel?
Flixel first Fathom was one of the first games built with Flixel and is a good example of what it can do
Concept sketches These help set a visual style for the game and act as a reference for the pixel art
States in Flixel extend FlxState and they are the guts of your game. When the State is initialised it calls the function create. This is used to construct any assets or variables. Once your game is running, Flixel calls the update function every frame. In Flash terms it’s the equivalent of an Enter Frame event. Here is where you handle anything that needs to happen continuously. We’ll use it to detect collision between game objects. Inside the create function we make two types of object: the Player sprite and some platforms. player = new Player(32, 100); floor = new FlxTileblock(0, 208, 320, 32); floor.makeGraphic(320, 32, 0xff689c16); add(player); add(floor); The floor variable is one such platform. Although we’ll replace it in the final game, it’s a great rapid way to provide objects the player can jump on to test the physics. The objects are then added to the State, allowing Flixel to draw
With a strong community and plug-ins available, Flixel is perfect for creating our game them when it renders the scene. It’s similar to addChild in native Flash and the order in which you add defines how they are drawn. All player-specific code is held in the Player class, represented here through the player variable. This keeps it organised and easy to re-use. Before we start that, however, we need to give our player some wings – quite literally – by preparing the sprite sheet.
Meet Nutmeg The hero of our game is a chick called Nutmeg. We know from the brief he can run, jump and get hurt. Based on this our artist created a sprite sheet containing all the frames for animation laid out next to each other on a fixed-width grid. Flixel can automatically create reversed frames so we only draw him facing right. The first frame is an idle pose. Frames 2 and 3 are the walk cycle; 4 is a hurt expression. If you’re more comfortable animating inside of Flash Professional, you can create a timeline sequence as usual, export it to a SWF and use a tool such as Grant Skinner’s Zoë (easeljs.com/zoe.html) to convert it to a sprite sheet. Sprites in Flixel are called FlxSprite, which is what our Player extends. These differ from regular Flash Sprites in that as well as graphics data they contain extra values to allow you to easily control physics, animation, direction, collision and rotation. Inside Player.as we’ve embedded the sprite sheet: [Embed(source = '../assets/player.png')] private var playerPNG:Class; And then tell FlxSprite to use it:
“It was around seven years ago that I tried to make a little game engine, something that would allow me to make Super NES style games,” says Flixel’s creator Adam Saltsman (adamatomic.com). “It just seemed like a fun thing to do. After a few abortive attempts in C++/Python/Java I finally settled on AS3. It was the pixel-level stuff in it that really interested me. “However I’d grown very cautious about ‘engine building’ and not actually making any games. So I stuck with AS3 and created game after game, and noticed which patterns evolved. The games kept getting more complex, and re-used code from previous projects, and eventually those parts I was seeing in every project got moved to their own folder. I think a lot (if not most) developers have a similar folder somewhere, just a pile of ‘really handy’ code. “Originally this was just for me, something I’d use to sketch new game designs in. But it wasn’t long before I thought that with a little polish here and there I might be able to release it publicly. Turns out it needed a lot of polish (and still does), but I really like where it’s going. “Lately I have been thinking a lot about how to ‘make stuff that matters’, which is a very loose idea, but something I obsess over, for better or worse. I think Flixel is a cool thing. It’s not really ‘art’ in and of itself, but it contributes to the cultural food chain, and that makes me feel like a hero. “I’d say the following games are shining examples of Flixel in action: Canabalt (adamatomic.com/ canabalt), Station 38 (patkemp.com/ wp-gallery/games/ Station38.html), Tuper Tario Tros (www. newgrounds.com/ portal/view/522276), Cat Astro Phi (www.newgrounds. com/portal/ Feline groovy Reminiscent of a Gameboy Classic title, Cat Astro Phi shows what Flixel is capable of view/555641).”
addAnimation("walk", [0, 1, 0, 2], 10, true); This creates a new animation sequence called walk, which cycles through frames 0, 1, 0, 2 at a rate of 10 frames per second. The true parameter makes it loop. To play an animation you use its label: play("walk");
What goes up must come down Making the player sprite run and jump smoothly provides us with a great opportunity to explore ones of Flixel’s strengths: its plug-ins. Much like with WordPress and Drupal, the Flixel community releases plug-ins that extend the framework further and ultimately save you time. One such plug-in is FlxControl, which is part of the Flixel Power Tools. These are included in the tutorial zips but are constantly updated; check github.com/photonstorm/Flixel-Power-Tools for updates. If downloading fresh, there’s a Getting Started guide in the Docs folder. The plug-in needs to be activated and assigned to our player FlxSprite: if (FlxG.getPlugin(FlxControl) == null) { FlxG.addPlugin(new FlxControl); } FlxControl.create(this, FlxControlHandler.MOVEMENT_ACCELERATES, FlxControlHandler.STOPPING_DECELERATES, 1, true, false);
loadGraphic(playerPNG, true, true, 16, 18, true); This tells Flixel to chop the sheet into 16x18 frames and create reversed versions. Animation works in a similar way to Flash MovieClips.
The parameters tell it that we want the sprite to accelerate and decelerate. If we didn’t pick this the sprite would start and stop immediately, making the experience very abrupt.
NET217.tut_flash 91
.net august 2011
91
next>
6/2/11 12:11:16 PM
.net web_pro/expert_advice
_ expert advice Send your questions to feedback@netmagazine.com
Double standards? As I’m soon to graduate into the world of the web after studying BSc (Hons) Web Applications Development for four years, I’d like to know why, if W3C standards are so important in the future of web development, so many web developers and agencies fail to validate their own websites. From: Steve Bell Kenny Meyers: Standards are not strict rules; they’re a set of guidelines. As with all things in life, the ideal does not always equate to the practical or reasonable. Sometimes it doesn’t even fit within the deadline. Websites don’t need to be validated to work on the internet, but we should try to get as close as possible. If someone’s site doesn’t validate but works well, that’s fine.
Privacy I’ve set up an online collaboration tool to help societies, clubs and sports teams at university to manage their members, finances and other areas. Another aspect of the tool is that the university will have an oversight of all groups so that they can see which ones are active, which students are members of which societies, and so on. My worry is that there may be privacy policies or other such legislation that may limit what information can be shared between group and
university, and that this could come back to bite me if the proper legal jargon isn’t put in place. Do you know of anything that could affect this? From: Tom Wade Jon Fell: The Data Protection Act governs the collection, storage and processing of personal data – which is any data from which a living individual can be identified. The Act imposes obligations on data controllers, including an obligation to register with the Information Commissioner’s Office. While there are some exemptions for organisations that are established for not-for-profit purposes, the exemption is narrow. It applies to processing that’s only for the purposes of establishing or maintaining membership, or supporting a not-for-profit body or association that provides or administers activities for either members or those who have regular contact with it. The good news is that it’s the individual societies, clubs and sports teams which are the data controllers so it is for them to determine whether they have to register. Although no obligations are imposed upon you under the Act as you are acting as a data processor, the societies, clubs and sports teams are required under the Act to impose obligations on you to keep the data secure.
These obligations have to be imposed by a written agreement and will require you to ensure that you have in place appropriate technical and organisational measures in place to keep the personal data secure. When a society or club collects personal data, it needs to explain what it needs the data for and what it’s going to do with it. If the club or society intends to share that data with other clubs or the university, then it needs to make this clear at the time that it collects the data. Often it’s dealt with by using a fair collection notice in conjunction with a privacy policy. Again, this is a duty for the data controller and so is not a direct concern for you. However, you may wish to seek assurances from the clubs and societies using your site that they have complied with all of the applicable data protection requirements. Further information can be found at the Information Commissioner’s website (ico.gov.uk).
Staying up to date The industry moves so fast, with news and updates, new tools, languages, hacks and bugs being announced every day. What tools or methods do you use to keep up to date? From: Sebastian Green
Focus on… The Agile methodology Profile Name Toby Mason Job Client services director Company Totally Communications URL www.totally communications.co.uk In the past, it’s been acceptable to design a flashy, pretty website, with which a customer might well be relatively happy. But as clients have come to appreciate more what a good website is and what it can do for their business, their expectations have risen. It’s now crucial that design and development agencies build flexibility into their developmental processes to meet clients’ increasing demands.
122
This is where the Agile methodology can really help. Agile is an approach to project management that can enable us to respond quickly to any changes in a project. In the past, you had to assume that every requirement of a project could be identified and agreed before any design or coding had even taken place. A development team had only one chance to get each facet of a project right – and each phase had to be completed before the next one could begin. The site had to be designed down to the last detail before any coding could take place. This type of approach has little, if any, communication between the different groups involved at each stage. If the goalposts move (as they invariably do), the software no longer fits with the business plan and becomes effectively useless. Such errors and mistakes lead to blown budgets and exceeded
deadlines, not to mention unhappy clients. In an Agile model, every aspect of development is frequently revisited throughout the lifecycle of the project, allowing time to steer it back on track if it starts to fall off-brief. Using this approach, you don’t decide up front what will take place throughout the project. Instead, you take it in incremental steps, outlaying the design and development at every stage and re-evaluating the project as you move through it, thus meeting your client’s demands on time, on budget and to spec. A project’s aims and objectives at the beginning may be very different to those at varying stages throughout the development. Having regular catchups with your developers and your client gives you the opportunity to fine-tune your progress to make sure that the end result is what you want. Ultimately, with the Agile methodology you’re protecting the
.net august 2011
NET217.expert 122
6/2/11 4:52:03 PM
Brought to you by
World’s No.1 Web Hosting Company
/your experts Design Usman Sheikh Information architect and managing director Usman is the MD at Contrive Digital Ltd. www.contrivedigital.com
Development Kenny Meyers Kenny works for Facebook as a marketing webmaster and discusses nerdy stuff at thenerdary.net. kennymeyers.com
Usman Sheikh: I’m still a big fan of RSS and news feeds in general. My iGoogle homepage is filled with neatly organised tabs for design, UE, typography, technology and social media, to name a few. Each tab is full of related RSS feeds coming through from different blogs and news websites. I usually spend a couple of minutes each morning just skimming through all the tabs. Following the right people on Twitter helps a lot, as well. Some of the industry leaders are always commenting on the latest trends – which is useful in itself, but also gives you a starting point to further investigate the topic yourself. With so many people tweeting about interesting articles that they’ve read online, this is an excellent way to discover new blogs and news websites, which you might not have known about otherwise. Dave Chaffey: Taming the blog beast is perhaps the biggest challenge for me as, for my books and SmartInsights.com summaries, I need to filter what’s important and what’s not, across all digital marketing – from affiliate marketing through web design, via conversion rate optimisation and SEO. There are no shortcuts. Like most people, I use a combination of Twitter and RSS feeds. Twitter
Legal Jon Fell Partner Jon works at commercial law firm Pinsent Masons, and is one of the founders of legal advice site OUT-LAW.com. www.pinsentmasons.com
Marketing Dave Chaffey Digital marketing consultant, author and commentator Dave advises businesses on all aspects of digital strategy and practice. www.smartinsights.com
to respond quickly to any changes in a project.
work you’re doing to make sure it ends up out in the world for everyone to see. Nobody wants your time and effort to be wasted on a project that gets shelved – making this way of working attractive for both clients and developers. l
Entrepreneur Wendy is the co-founder of free site builder Moonfruit and marketing director of Gandi.net. www.moonfruit.com
“If you’re going down the fixed width layout route, then always think about your target audiences” Usman Sheikh
is best for breaking news, and you get to trust recommendations from certain folk. I’ll also dip into my trusty Google Reader every other day. I wish there was an automated approach. The nearest I’ve seen is Postrank.com, which rates posts on any blog according to a combination of views and social mentions. The new LinkedIn Today feature (linkedin.com/today) works in a similar way and is the best social aggregation tool I’ve seen yet – I recommend it! Kenny Meyers: For long-term growth, I read a lot. However, I’ve come to realise that I can’t just read my way to understanding. Since most of the work I do is development, I have to learn how to make solutions with my limited knowledge in the beginning, then build upon it with awareness gained from reading. Understanding the technology is crucial only to speed, not learning. To keep up with current trends, I pay attention to the programming Reddit (reddit. com/r/programming) and Hacker News (news.ycombinator.com). These two resources are updated daily with links to new tactics and technologies.
Universal solution
Flexible The Agile development process helps us
Business Wendy Tan White
I’m planning how to create a customer support portal site for my company, which has several different divisions but is essentially an industrial computer and battery manufacturer. What I want is a site that can accommodate customer service enquiries, technical support (including file downloads) and a forum but I also need a way of creating a digital dropbox to exchange files with customer on an as-needed basis. So far, all I’ve been able to find are individual systems – one for a blog, one for a forum, one for customer support, and so on, with no central way of combining them. Do you have any suggestions for this, or would it be something that I’d need to create from scratch? From Jason James Kenny Meyers: I’ve found the combination of Lighthouse (lighthouseapp.com) and Tender Support (tenderapp.com) solve most of the
problems you bring up. However, there is no magic bullet here. Some people I know swear by ZenDesk (zendesk.com), and Sifter (sifterapp.com) is a beautiful tracker. For file storage there’s Dropbox (getdropbox.com) – or an alternative option is the new OneHub beta (www.onehub.com). You are looking for an all-in-one solution that doesn’t currently exist. If you want to build your own custom solution, I suggest using the APIs that these companies provide.
Resolution (1) I’m coding a website using primarily XHTML and CSS. I’ve read in some places on the web that you shouldn’t worry about the screen resolution an individual will use for looking at the site; others say that you do need to code for the various screen resolutions. I’m currently setting up my site to look the way I want it to in my native 1280x1024-pixel resolution. When I reduce the resolution to 1024x768, the layout gets altered. Some web sites say only 15.1 per cent of web users view sites in 1024x768, and that the rest are 1280 and above. Any articles or sites that can steer me in the right direction would be greatly appreciated. I want to make a simple, well-designed website. From: Dave Fields Usman Sheikh: There are different schools of thought on this matter, but my advice is to always think about your target audiences. If you are going down the fixed width layout route, then keep in mind exactly who will be accessing your website. Based on global stats, 1280x1024 and above are now the most commonly used screen resolutions. However, if you’re designing a website that might be used by the local community, or places where audiences may not have the latest computers with larger screens, then it’s better to play it safe and go with 1024x768. Again, there are smarter ways to update the content layout, depending on screen resolutions, using CSS but, if you’re just starting out, then it’s better to just keep things as simple as possible.
.net august 2011
NET217.expert 123
123
next>
6/2/11 4:52:05 PM