web.designer.issue.209 2013
DESCRIPTION
Web.designer.issue.209 2013TRANSCRIPT
08000 124 544 [email protected]
We’ll move your sites to Guru for you, free of charge.
We’ll gladly handle your clients’ hosting.
We back everything up — including static and dynamic data.
f
m
j
We know you’re busy.
20% off!Just use the code
‘WDM1’
Coupon Code valid until 01/07/2013. Guru (UKDedicated Ltd) reserve the right to alter or withdraw the promotion at any time. E&OE. Guru (UKDedicated Ltd) 3 Centro, Boundary Way, Hemel Hempstead, Hertfordshire, HP2 7SU UKDedicated Ltd reg. company no. 04625539 VAT no. GB814020091
eing a web designer isn’t simply about
designing websites – there is so much
more to be considered. The first step is
e� ective planning, the old cliché ‘failing to
plan is planning to fail’ rings true in the
world of web design. Creating sketches
and wireframes is the path to a
successful build and the more time
spent, the better the results. But this is just one element of
the process. With a plan in hand, it’s time to start designing,
and there’s a good chance there will be some developing
involved. Choosing the right tools for this stage of the build
is critical. A faster, more e� icient workflow complemented by
ready-built frameworks will bring site success quicker.
The cycle doesn’t stop there – testing is next on the
agenda. This may not be the glamour role, but still a crucial
element that should get special attention. Finally, no site is
complete without promotion: a site needs to be seen to be a
success. This issue we have taken the whole life cycle into
consideration and brought you the 50 tools you need for
site success – check them out on page 40.
This issue sees the end of one era and the start of a new
one. It’s a big thanks to Russell Barnes who has returned to
his mothership and sister title Linux User & Developer.
And it is with great pleasure, after being associated with the
Web Designer brand for over seven years, that I am taking
over the reins of the magazine.
Look forward to seeing you again next issue.
Get ready to plan, build, test and promote your site
Welcometo the issue
THE WEB DESIGNER MISSIONTo be the most accessible and
inspiring voice for the industry, offering cutting-edge features
and techniques vital tobuilding future-proof
online contentSteveJenkins
ExcitographicPlotting the features that got us in a frenzy over the month…
Steve Jenkins, Deputy Editor
Rachel Shemilt, Designer
Adam Millward, Senior Sub Editor
Iro
n M
an 3
Wo
rdP
ress
’s
10th
bir
thd
ay
Ch
rom
e fo
r iO
S
Bar
ley
con
ten
t ed
itor
Leag
ue
On
e p
lay-
off
s
An
Eve
nt A
par
t co
nfe
ren
ce
Gal
axy
S4
/K
ey L
ime
Pie
Rac
hel
’s
bir
thd
ay
“ There is agrowing trendfor the design community to bash responsive design ”We catch up with Catch Digital, learning about some of the studio’s most exciting projects, plus what the future holdsPage 30
“ The old cliché ‘failing to plan is planning to fail’ rings true in the world of web design ”Follow us on Twitter for all the news & conversation @WebDesignerMag
Visit our blog for opinion, freebies & more www.webdesignermag.co.uk
Highlight
Turn over to the contents to discover what’s going to get you excited this issue…
meta _________________________________________________________________________ 3
<meta>welcome
B
Should WordPress be afraid of this new CMS rival? See page 8 for more
‘Up the Cherries!’ Steve thinks AFC Bournemouth can go all the way
Th
e Iv
ory
fr
amew
ork
4 __________________________________________________________________________meta
<meta>contributors
Imagine Publishing LtdRichmond House, 33 Richmond HillBournemouth, Dorset, BH2 6EZ☎ +44 (0)1202 586200Web: www.imagine-publishing.co.uk www.webdesignermag.co.uk www.greatdigitalmags.com
Magazine teamEditor Russell [email protected]
☎ 01202 586272
Deputy Editor Steve [email protected]
☎ 01202 586233
Designer Rachel ShemiltSenior Sub Editor Adam MillwardPhotographer James SheppardEditor In Chief Nick JonesHead of Publishing Aaron AsadiHead of Design Ross AndrewsContributorsGareth Dutton, Matt Gifford, Sam Hampton-Smith, David Howell, Phil King, Charlotte Crooks, Annabelle Sing, Mark Shuf� ebottom, Adam Smith, Tim Stone, Jeffrey Way, Greg Whitaker, Ella Carter, Sarah Harrison, Jayson Winters, Richard Lamb, Rob Edwards & Stephen Williams
AdvertisingDigital or printed media packs are available on request.
Head of Sales Hang Deretz
☎ 01202 [email protected]
Advertising Manager Jennifer Farrell
☎ 01202 [email protected]
Account Manager Rhian Carter
☎ 01202 [email protected]
Cover discHead of Digital Mat Toor Multimedia Editor Matt [email protected]
InternationalWeb Designer is available for licensing. Contact the International department to discuss opportunities.
Head of International Licensing Cathy Blackman
☎ +44 (0) 1202 [email protected]
To order a subscription to Web Designer:
☎ 0844 848 8413 ☎ +44 1795 592 878Email: [email protected] subscription (UK) – £62.3013-issue subscription (Europe) – £7013-issue subscription (ROW) – £80
CirculationHead of Circulation Darren Pearce
☎ 01202 586200
ProductionProduction Director Jane Hawkins
☎ 01202 586200
FoundersGroup Managing Director Damian ButtGroup Finance & Commercial Director Steven BoydGroup Creative Director Mark Kendrick
Printing & DistributionPrinted by Wyndeham Heron Ltd, Bentalls Complex, Colchester Road, Heybridge, Maldon, Essex CM9 4NW
Distributed in the UK & Eire by Seymour Distribution, 2 East Poultry Avenue, London, EC1A 9PT ☎ 0207 429 4000
Distributed in Australia by Gordon & Gotch, Equinox Centre, 18 Rodborough Road, Frenchs Forest, NSW 2086 ☎ 61 2 9972 8800
Distributed in Rest of the World by Marketforce, Blue Fin Building, 110 Southwark Street, London SE1 0SU ☎ 0203 148 8105
DisclaimerThe publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this magazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used speci� cally for the purpose of criticism and review. Although the magazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This magazine is fully independent and not af� liated in any way with the companies mentioned herein.
© Imagine Publishing Ltd 2013
ISSN 1477-3534
Sam is a graphic designer and web developer based in Scotland. He works
with clients across the UK and beyond including Manchester Metropolitan
University, the Home O� ice and Capita. This issue he reveals 50 web tools
that every designer/developer needs to plan, design and build. Page 40
This issue’s panel of expertsWelcome to that bit of the mag where we learn more about the featured writers and contributors…
“ The better your set of tools is, the more time you can dedicate to the designing aspect of web development ”
Gotweb skills?
We’re always looking for the hottest web-design talent. Email
[email protected] examples of your creative work
Rob Edwards Rob is a designer and developer who has pushed for the adoption of web typography since its inception. This issue he takes a look at inspirational web typography and reveals the fonts and techniques used. Page 74
Matt GiffordA lead RIA consultant developer and industry author from Cambridge, he specialises in ColdFusion and mobile development. In part 2 of his ‘build a web server’ tutorial, Matt reveals how to automatically create apps on the server. Page 90
Tim StoneTim is a front-end developer who earned a first-class degree in Interactive Media Production from Bournemouth Uni. This issue he demonstrates how to use the Google-maintained library Angular.js to rapidly build web apps. Page 94
Richard Lamb
Jayson Winters
Richard Lamb is a web designer, writer and a lifelong movie buff – he runs the blog Celluloid Zombie. This issue he adopts the new Reverie 4 HTML5 framework and demonstrates how to build a responsive WordPress theme. Page 54
The creative lead at Brace Design, Jayson is always looking to provide a better customer experience with great UI techniques. This issue he reveals how to add fade effects to pop-ups and create hover effects for individual elements. Page 70
Mark ShufflebottomProgramme leader of the BA Digital Media Design course at Bournemouth University and an Adobe Education Leader, Mark takes a look at Adobe’s new responsive design tool, Edge Reflow, and reveals what it has to offer. Page 62
Jeffrey WayJeffrey is a developer, evangelist, instructor and author who works for Envato (envato.com). This issue he delves into the essential practice of unit testing with an insight into the Mockery PHP mock object framework. Page 84
David HowellDavid is an experienced writer, author and journalist as well as the owner of his own publishing business. This issue we sent him to interview creative geniuses Catch Digital and get the lowdown on how they operate. Page 30
Sam Hampton-Smith
Rob is a designer and developer who has pushed for the adoption of web typography since its inception. This issue he takes a look at inspirational web typography and
6 __________________________________________________________________________meta
<meta>inside issue 209
contentsCutting-edge features, techniques and inspiration for web creatives
Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch… [email protected] @WebDesignerMag www.webdesignermag.co.uk
8 Is Barley set to topple WordPress as king of the CMS world? New kid on the block looks to make an
impression. We talk to co-founders Colin Devroe
and Kyle Ruane about Barley
10 Chrome set to become No 1 The Google browser hits top spot in four of six
worldwide regions
12 Comment: Michael Tomes MD at creativepool.com asks: is the UK’s creative
industry getting enough support?
14 Comment: Andy Budd Clearleft’s founder attempts to define ‘good design’
<header>Discussing the hottest topics from the web design world
16 Lightbox A trio of beautifully designed sites that need to
be seen and admired
22 Design diary: Snowbird Utah creatives Rally Interactive add style to snow
with a clean and contemporary update to the
award-winning ski resort’s site
30 Catch: Catching the digital wave This issue it’s off to Soho for a face-to-face
chat with digital design gurus Catch
40 Cover: 50 must-have web tools Everything you need to plan, design, develop,
test and promote your website
74 Inspirational web typography Discover the art of adding style and substance
to contemporary web fonts
84 Easier testing with Mockery Save yourself time and hassle testing code
with this in-depth guide to mocking
98 Portfolio Two hot new independent rising stars reveal
their undoubted talents
Inside…
Outdoor sports sites don’t come much cooler than this A portfolio that entertains and educates
Digital creatives delivering cutting-edge designs
16
30
22Snowbird Lightbox: In The Loop
What’s the Catch?
Cover focus
40Everything you need to take your site from concept to completion
meta _________________________________________________________________________ 7
<tutorials>Web gurus take you step-by-step through professional techniques
50 Create interactive vector graphics Employ the Raphaël JavaScript library to really bring good-looking vectors to life
54 Build adaptive WordPress themes Use the Reverie 4 HTML5 framework to go responsive
62 Go responsive with Edge Reflow Adopt the new Adobe tool for all-screen designs
66 Design HTML5 web forms Add validation and style to web forms with HTML5 input types, attributes and CSS3
58 Create a scrolling menu for mobile osbornbarr.com Smart thinking for mobile60 Design polygonal shapes for the web nasaprospect.com Vectors with web style
70 Make tooltips with fade effects visit.uc.pt/en Add informative pop-ups
72 Slider hover effects neopolitanclothing.com Create subtle hover effects
A dedicated section offering features and tutorials for advanced coders
On the free CD
• 55+ minutes of pro video tuition• 2 standard WordPress themes• 29 flower vector brushes• 30 sound effects & loops
A comprehensive collectionof free designer resources!
112 Discover what your latest disc has to offer
Recreating the web’s hottest stylesWeb workshop
112
54
Build a bespoke theme with Reverie 4Responsive WordPress
62
Design for all screens with AdobeGo with the Reflow
66
Add a little panache to web formsStylish HTML5 forms
50
Add motion to static graphicsClever vector particles
90 Build a web server (part 2) Automate the creation of new apps on your own testing server, which you made last issue
94 Make apps with Angular JS Rapidly prototype web apps with this library
Mocking fully explained in this beginner’s guide
84Feature
Easy Mockery tests
EASIER TESTINGWITH MOCKERY
Nevermiss an issue
Subscribe Turn to page 38 now.
USA readers turn to page 108 for anexclusive offer
Visit the WEB DESIGNER online shop at
for back issues, bookazines and DVDs
Visit the WEB DESIGNER online shop at
8 _______________________________________________________________________header
newscomment
crowd source
Discussing the hottest topics in the web design worldIf you have a creative project, new web product or great designer story, contact the editorial desk
[email protected] @WebDesignerMag
<header>
Barley is billed as a ‘this-
generation’ content editor and
brings simplicity to the whole
process of managing a website.
Built using PHP, HTML and CSS, of
course, the Barley editor enables users
to edit their content directly on the
webpage. Sounds exciting, doesn’t it?
And it is – so we took some time out to
get the lowdown in an interview with
the men behind the magic.
From humble beginnings the Barley
concept evolved from an idea that
wasn’t even going to be Barley.
Co-founders Colin Devroe and Kyle
Ruane reveal the backstory and how
the concept evolved.
Colin: “As with most startup
businesses and products, Barley has
changed significantly since first
inception. Our original idea for Barley
wasn’t Barley at all. Kyle Ruane, Jeff
Johns, Kyle Slattery, Chris Fehnel and
myself started a small group called
Perpetually Fascinated. The name of
this group was a riff on my Twitter bio
about always being interested in new
things. We thought this group would
share ideas, code and business models
and see if anything would ever come
of them. We ran it like a small version
of what Valve has structured in [its]
employee handbook; someone raises
their hand with an idea and, if
someone else is keen on the idea, they
can lend a hand. We pitched several
ideas from iPhone applications to
small open-source Alfred plug-ins.”
Kyle: “Then Colin and I separated from
the pack to work on a simple service to
allow people to sell their homes with
large photographs and an amazingly
easy-to-edit template. We called it
‘1pager.net’. And we built it. However
This-generation content editor Barley looks to change the landscape of online publishing. Web Designer talks to co-founders Colin Devroe and Kyle Ruane to find out what the future holds…
Is Barley set to topple WordPress as king CMS?
header_______________________________________________________________________ 9
news<header>
Find news and feature items at www.webdesignermag.co.uk
Twitter cards get an upgrade
The Twitter feature that allows for the introduction of rich content on tweets has been given a few new features to play with. The introduction of mobile
app deep-linking allows users to directly link to an app. In addition, a new
selection of card types is also being introduced: App, to show app info;
Product, to display related images and text; and Gallery for sharing images.
Internet Explorer
jQueryFirefox
TWITTERFirefox 20 adds more HTML5 support The latest version of the Mozilla browser has added a selection of HTML5 features. There is now support for Canvas Blend modes, and the HTML5 playbackRate attribute adds to an improved audio and video experience. Firefox 20 offers private browsing too, which doesn’t save information about sites visited.
<news cloud>Bite-sized coverage of the month’s trending topics
An image-sharing mobile app that utilises WordPress and lets the user retain image rights
The open source framework adds Windows 8 app support
IE11 looks set to finally catch up with its rivals and include WebGL
The new Nexus 7 is expected to launch mid to late summer 2013
Pressgram
once we saw it in action we thought the
vision for it could be so much bigger. So
we took the prototype and, using our
bigger vision as our business model, we
set out to raise some money to make
Barley a reality.”
With the core concept finally nailed
down Colin and Kyle began dedicating
many long hours to the actual building
of the content management system.
Kyle: “Colin and I started working on
our original idea in July 2012 on nights
and weekends. By the time October
rolled around, we thought we had
something special on our hands and
so we sat down and developed a
presentation to raise money against. It
took us about a month to secure some
financing and get the ball rolling.”
Colin: “Sometime in December we had
much of the business end of things
moving forward so I resigned from my
position as director of strategy at
Viddler in the middle of that month and
Kyle fired all of his clients and stopped
doing freelance work. We started
working full-time on Barley in
December and, shortly after getting our
funding in the door, we hired Jeff from
our Perpetually Fascinated crew to be
our main product guy.”
Kyle: “Now we’re spending just about
every waking moment on Barley.”
Colin: “…as our wives can tell you!”
The Barley mantra is: ‘No admins, no
forms, just simple web content editing.’
A worthy premise, but how does it
work? The duo explain.
Colin: “The idea of admin-free editing
isn’t new. Henri Bergius and others
have really been beating this drum of
editing inline for years now. But the
scale to which we hope to take it‚ that is
pretty new. In a year or two, Barley’s
feature set will end up looking pretty
ambitious, but we think we can power
hundreds of thousands of websites
with Barley and that it will be exactly
what small business owners and
people that don’t need or want to write
code have been waiting for.”
Kyle: “As far as security is concerned,
we’re working really hard to make
Barley a fairly flexible system for site
designers and developers so that they
can use it for as many projects as they
can come up with, but be fairly well
locked down for their end customers.”
Asked how they intend to make
simplicity the key across all platforms
and devices, the guys tell us:
Kyle: “Our goal with Barley is to create a
dead-simple user experience for both
the tech-savvy and the layperson. We
are accomplishing this by reducing the
available options down to a carefully
considered toolset to manage content
and various admin tasks, removing
confusing and unnecessary elements.
In an effort to simplify all aspects of
Barley, we will be launching as a hosted
solution. We believe this will remove a
few barriers for the average person.”
Colin: “So while it’s true that there
won’t be hundreds of features and
thousands of plug-ins to start, it’s
because people don’t need that many.
Also, Barley will be able to accept most
static HTML/CSS-based sites. So it will
be easy to develop custom sites.”
Kyle: “Regarding mobile effectiveness,
Barley is built for mobile. One of our
team’s requisites for Barley early on
was that our platform had to fit the way
people use their phones and
computers – not force them to use one
or the other. So not only will all site
templates be responsive‚ working on
every type of screen‚ but our toolset
will be tailored to each screen too.”
Colin: “For example, we don’t think that
a business owner should have to be at
their computer to add a new photo to
their site, or to change their business
hours for the weekend, or the daily
special at their restaurant; they should
be able to do this from their phone at
their child’s soccer game, all without
ever writing a single line of HTML or
logging in to a complex CMS.”
This leaves the final big questions:
when can users get the full release and
how much will it cost?
Kyle: “Barley will be available from 1
May 2013. This will be our first public
release of Barley and we think a great
step towards our full vision.”
Colin: “As for price, we haven’t yet
released those figures because we’re
still doing the maths on how much it
will cost us to run a site on Barley. Of
course we want Barley to be as
affordable as possible, but we also want
to run a profitable and sustainable
business. So we’re working really hard
to bring the price as low as possible.”
What makes Barley special?The cutting-edge content editor boasts a number of killer features. Here are a few to watch out for…
Instantly edit and format on the current page Directly add images from popular social sites Need help? Watch the How-To collection of videos
Company Number: 3913408 | Registered offi ce: Acton House, Perdiswell Park, Worcester WR3 7GD
That picture up there? It’s Worcestershire. In England. That’s where we are.
We’re names.co.uk and our website builder tool, SiteMaker, is so simple to use; you just drag and drop, point and click. And you get
UK based support for FREE.
When you call us, you call real people, in the same country as you. That’s important.
A NAMESCO BRAND
TALK 0845 363 6175
VISIT www.names.co.uk
EMAIL [email protected]
Website BuilderCreate a website quickly & easily
No Technical Skills Needed
Free .co.uk Domain
Over 100+ Templates
14 Day Free Trial Available
Integrate with Twitter & Facebook
With 4 out of 5 people preferring .co.uk websites when searching online, we think .co.uk is a great place to be.
If you want the perfect .co.uk domain to get your website up and running quickly, you
know where we are.
Get in touch and let’s make your website our world too.
12 ______________________________________________________________________header
comment<header>
Ideas are everything. Everything that we see and touch starts with an idea that was taken and explored, designed, pulled apart and put back together to create the world we see
around us. Creative thinking is what created the font on this page,
the seat that you are sat in and the clothes that you are wearing. It’s
all around us, in everything we do, at work and at play. So why is it
that the creative industries are often an afterthought when it comes
to recognising sectors that can really help to drive the economy
forward? And what will it take for the government to actually do
something to help the economic potential of this dynamic, fast-
growing sector?
Let’s look at the facts. The creative industries are one of the UK’s
current success stories, contributing 6% of GDP and generating
£70,000 every minute for the UK economy. These industries are
also one of the few sectors experiencing growth and adding
numbers daily to the already 1.5-million-strong workforce.
With the right support, there’s so much more that the industry
could achieve. For years the government has been saying that the
creative industries is to lead the economy forward, but have not
backed this up with a real investment plan. The UK now actually
‘makes‘ comparatively very little. This is no longer Victorian England
during the industrial revolution; the workhorses of the world – China,
India et al – are the producers now.
We need to be the innovators, the ones who come up with the
creative solutions and the ideas. Every single item starts with a
design, a scribble on a napkin or blueprint. These products then
compete for our attention through creative advertising and
marketing campaigns and are enhanced by innovative website
design; all of which is underpinned by a small army of talent who
continue to push the boundaries.
The problem is that, more often than not, many of the army
march alone. The creative industries are made up of hundreds of
micro-businesses and freelancers that are struggling in the current
economic climate. They need certainty from the government and
financial support from lenders. We need policy that recognises that
small businesses are at the heart of the industry and builds from the
bottom up so smaller players aren’t isolated and new entrants into
the market can get a fair start.
The ability to easily secure loans is part of this, but could the
government go further? Animators, TV producers, filmmakers and
video-games producers already benefit from tax breaks, but just
imagine the impact if this list could be expanded to include web and
graphics design and other key creative areas.
Financial worries aside, creatives face a further challenge of
working in a hugely volatile industry which is constantly switching
directions. It’s important that the government recognises this unique
environment and provides a flexible framework in which creatives
can operate and realise value from their work, rather than a rigid
structure that will effectively slap handcuffs on the industry and
prohibit innovation and growth. Creative businesses and their IP
need protection, but equally they must be allowed the freedom to
expand and innovate quickly in order to keep up with market trends
and consumer demand.
Perhaps the biggest area in which the government can show
support for the creative industries is simply through acknowledging
the value that the industry holds with more than just words. Starting
at the ground level they need to recognise it as a worthy career
choice. When Michael Gove, Secretary of State for Education,
threatened to downgrade creative subjects in schools there was
outrage across the industry.
The idea that subjects could simply be squeezed out of the
education system was not only utterly preposterous but a clear
signal from the government that it didn’t value these subjects as a
worthy career path for young people. In a dramatic U-turn, Gove
then backed down on the plans and so creative subjects like music,
art and design and drama will continue to have a more equal status
in the education system against the subjects that were considered
more worthwhile. And why not? Freedom of expression and creative
thinking starts at school; it’s here that imaginations are fuelled and
abilities discovered. While not everyone will go on to be an artist,
graphic designer, musician or actor, the arts still have a huge role in
influencing who we are and we all stand to bring this experience
with us into the wider world of work.
Whatever industry it is that we end up in, it’s creative thinking that
will mark us out from the rest of the crowd and give our businesses
a competitive edge.
Is the UK’s creative industry getting the support it needs?
Support, not suffocation
Michael Tomes is MD at creativepool.com, the world’s
first network where companies and creatives can connect
through the work they share. Michael is passionate about
breaking down barriers to facilitate creative
collaborations.
Michael Tomes
development
Start your free trial now, visit www.livedrive.com/prosuite
Cloud Storage for Everyone
14 DAY
FREE TRIAL
NO CREDIT CARD REQUIRED
Completely safe. Protected by military grade encryption.
Safe & secure
Access your � les from any web browser or any mobile device.
Access anywhere
Loads of features for Pro users - includingFTP and WebDAV.
Advanced features
5TB cloud storage sync’d between all your computers and devices.
Sync everything
Stream your music & movies to PC, Mac, iOS, Android and Kindle.
Media playback
Upload all of your � les, from up to5 computers, into the cloud.
Unlimited Backup
Keep ALL your filesKeep
ONLINETry our 14 day FREE TRIAL
14 ______________________________________________________________________header
comment<header>
A lot of the discussions I have about our profession seem to conclude with somebody saying something along the lines of, “Well, it’s all just design really”, or “It’s just good
design and bad design”. This is a convenient way of terminating a
conversation when you’re bored and have a bus to catch. It’s the
designers’ equivalent of Godwin’s law.
In the most part I agreed that user-centred design and task-
centred design are really just Design. Graphic design, product design
and architectural design are also Design. You could even argue that
engineering and programming are forms of Design, if you believe
that Design is ultimately about making decisions which affect the
final manifestation of a thing.
However it’s not an especially helpful statement.
Fashion design, jewellery design and architectural design differ
because of the medium and the way that the medium is enjoyed.
The differences in medium combine with history to produce vastly
differing approaches, and it’s these differing approaches that I
find particularly interesting.
Within digital design, there are varying approaches (or schools)
including user-centred design, task-centred design and genius
design. All of these approaches have evolved to address a wide
range of needs, and in turn produce slightly different outcomes.
None of these approaches is an island, and good designers will often
mix and match techniques. However, every designer uses a slightly
different mixture and comes up with a vast array of results. Some
with more success than others, of course.
Defining ‘good’ and ‘bad’ design though is even harder. Is good
design just a matter of aesthetics and personal taste, or can
something be described as good design if it’s highly functional and
fit for purpose, but looks shoddy (I’m thinking of big players like
eBay, Amazon and a host of other high-traffic websites here)?
Interestingly, it’s mostly senior people that use the ‘It’s just design’
argument, and I think there is good reason for this. Like Buddha
reaching enlightenment and realising that we’re all basically
interconnected, designers at the peak of their careers start looking
across disciplines and noticing the similarities. We are all part of this
big interconnected thing called Design.
Congratulations. You’ve reached design nirvana. Let’s all hold
hands and pat each other on the back (not at the same
time, obviously).
It is at this point that many designers ascend to design heaven
(or possibly up their own backsides) and detach themselves from
the suffering of the average man. However, just like Buddha, I think
that a few of these design gods would benefit from coming back
down to earth and selflessly helping their fellow designers to reach
a similar state of mind.
Once you’ve reached enlightenment, you can’t go around telling
people how obvious and interconnected everything is or you’ll start
sounding like David Icke (the lizards are responsible for everything,
honest). Instead, the way to lead people to that understanding is to
provide them with models of the world that expand their
understanding and lead them to their own ‘light-bulb moment’.
This is much in the same way that physics teachers will explain
Newtonian mechanics before moving on to quantum string
theory. This is why I find conversations about the nature of design
useful. It allows designers to expand their horizons in different
directions until their models start to overlap – to apply different
lenses to their practice in order to understand how the various
moving parts work, and where they fit in.
Sure, it’s all just design in the end, but that doesn’t make user-
centred design, task-centred design or any other schools of design
any less useful or relevant.
Defining good and bad design is harder than you think – or is it?
It’s just design
Andy is a founding partner and MD at UX design consultancy Clearleft. He is a
well-known speaker at a host of global web design conferences including
UX London, An Event Apart, South by Southwest and
Inspire. Find him online at www.andybudd.com.
Andy Budd
design
Can something be described as good design if it’s highly functional… but looks shoddy?
design
SELL ONLINEBACKUP TO YOURCUSTOMERSJust £39.95 per month for unlimited customers
BACKUP TO YOURBACKUP TO YOUR
30 DAY
MONEY BACK
GUARANTEE
Get started now, visit www.livedrive.com/reseller
Questions? Call our team on 020 3137 6446
It’s so easy and it’s live instantly. Start selling today.
Get set up in minutes
Build your own products. Even brand the desktop software.
White label everything
Our online control panel is so simple to use. Add users in minutes.
Stay in control
You sell the simplest, most powerful online backup. Works on Windows and Mac.
State of the art online backup
Unlimited storage and bandwidth forall accounts.
No charge for storage or bandwidth
For customers that want more. Sell cloud sync and business cloud storage!
Plus more
You pay a � xed £39.95/month. Sell accounts at any price.
No charge per customer
per month for
16 ____________________________________________________________________ lightbox
Gallery of stunning web design
SITEOF THE
MONTH
<Above>• From the first frame of video, it’s clear that this site is like no other, using inspirational quotes in a whole new context
<Below>• Typography, colour, video and audio come together in perfect unison to ensure the visitor to this site ‘gets going’
C
Get Going Today – Drexel University
www.getgoingtoday.org
Designer/developer BKWLDbkwld.com
Development technologies HTML5, SCSS, Compass framework, CSS3 animations, JavaScript
onceived as a
recruitment platform for
Drexel University in
Sacramento, the design
that BKWLD created is
subtle, engaging and,
above all, embeds a
powerful call to action.
Creative director Jeff
Toll says the site delivers
Drexel’s brand message
of rebellion and inspiration: “The idea
was to stray away from the standard
campus hype promo videos or listing
of courses and deliver a highly sharable
story. BKWLD responded with a unique
approach that speaks to the core of the
Drexel brand – rebellion. The story
needed to resonate with a student who
needed that extra push of inspiration
and empowerment to ‘get going’.”
“Drexel is a full-screen, fluid design
targeting desktop and tablet displays,”
explains BKWLD development director
Dan Rogers, “The development was
primarily a front-end affair, making use
of SCSS with the Compass framework
to render visual styles and CSS3
animations. Drexel’s routing system,
randomised grids, asset loading and
dynamic scaling were all developed in
JavaScript.” Open source libraries used
include Modernizr, jQuery, Backbone.js,
Underscore.js, Require.js, plug-ins from
the Ender.js library, and some of
BKWLD’s plug-ins developed in-house.
Using video as the core
communications medium enables the
site to connect emotionally with the
viewer. The site has 16 cinemagraph-
inspired looping videos that tell a story
through the voice of inspirational
quotes. The videos are organised
in a series of dynamic grids that
never repeat, backed by a reflective,
calming soundtrack.
“ BKWLD responded with a unique approach that speaks to the core of
the Drexel brand – rebellion ”
Few university recruitment sites are as creative as the immersive experience made for Drexel
lightbox ____________________________________________________________________ 17
Got it? Flaunt it! Tell us about your site [email protected]
<Top left, clockwise>
• Each inspirational quote is backed by video footage that moves this site away from what could have become clichéd content
• People are at the centre of Drexel’s recruitment. See who they are and what inspires them
• Original content fills each of the frames the visitor can choose from. This delivers a journey of discovery as the site reveals itself to the viewer
• The 16 videos tell a story that is also supported by audio. Each of the pieces is designed to be shared as widely as possible
#73B9DC#665F5A #274558
#8C7975 #8D4A5F#FFFBDC
<Above>• Blanch is a free modular sans serif font developed by Barcelona-based design studio Atipus
<Below>• One of a number of low-cost high-quality typefaces, Mountain Retreat was designed by Andrew Clark and is available at Ten Dollar Fonts
18 ____________________________________________________________________ lightbox
Know a site that deserves to grace these pages? Tweet us now @WebDesignerMag
<Above>• Right from the first opening screen, visitors know they will be treated to a portfolio site that is both inventive and humorous
<Above>• The retro slide approach to displaying the work of the team is clean and intuitive
#1E1E1E
#FFC84D
#EEEEEE
#B3B3B3
#4090B0
#FEFBD9
<Above>• Click on the LED to get a hint for how you can unlock one of the surprises that this portfolio offers
<Above>• Choose a portfolio item to look at in more detail, revealing smooth transitions from screenshot to screenshot
lightbox ____________________________________________________________________19
D
In The Loopwww.weareintheloop.com
Designers Sidar Sahin, Guillaume Tomasiwww.weareintheloop.com
Development technologies HTML5, Flash, Photoshop, CSS3
esigners and developers have
always had to think about how to
best present their work to the
world. Innovative portfolio sites
come and go, so when the site
from In the Loop comes along it’s
easy to see why these designers
have been winning awards.
Co-founder and creative
developer Guillaume Tomasi
outlines their approach to the site’s
design: “We wanted to show our portfolio in an
interactive and funny way. That being said, we
came up with the idea to play with the black
clay we had when we were children. Also, we
wanted to give the site a gaming feel to it. So as
visitors move around the portfolio, they can
unlock funny and bonus materials, just as you
can in a game.”
The construction of this portfolio was also
approached in a slightly different way. Instead
“ We wanted to begin constructing the website with final ideas and not have to go back and forth into the conception when we were well into the development stage ”
A fun portfolio site that entertains and educates about the founders’ technical skills in equal measure
of hand-coding the pages, the founders opted
for Union Platform (www.unionplatform.com),
as this enabled them to build their site very
quickly. And for the animated components
of the site, Tweenlite by Jack Doyle
(www.greensock.com/tweenlite) was used.
But before that: “We spent a lot of time to create
the concept. Sketchings, prototyping etc,”
continues Guillaume. “We wanted to begin
constructing the website with final ideas and
not have to go back and forth into the
conception when we were well into the
development stage.”
The result is a portfolio site that starts with a
monochrome feel, but soon bursts into colour
and motion. The time taken to plan it was clearly
well spent. Using off-the-shelf development
tools may not be the norm with portfolio design,
but this site shows that these tools have evolved
to the stage where all they need is a dose of
creativity to produce something engaging.
<Above>• One of the surprises that can be unlocked if visitors spend some time navigating around the website
<Below>• The main font used on the site is the updated version of Bebas Neue, available from Dharma Type
20 __________________________________________________________________ lightbox
Know a site that deserves to grace these pages? Tweet us now @WebDesignerMag
#000000
#3F2A27
#62865A
#7A8EB6
#FFF23A
#2C453E
The Tripwww.jacktorrancetrip.com
<Above>• The fantastic story that Jack Torrance told to the Kissinger Twins comes to life on whatever device you want to use
Designer Unit9www.unit9.com
Development technologies HTML5, jQuery
esigned
as an
experience
that is
equally at
home on
any device,
The Trip is
the online
presence
of a
transmedia project developed by the
Kissinger Twins. It is the story of Jack
Torrance, who relates his life
experience and how he claims to have
faked the moon landings of the 1960s.
The interactive online version of The
Trip consists of 11 chapters. Users can
choose how they move through the
storyline, and at what pace. The
developers have gone to great lengths
to ensure that the whole site is fully
immersive with an evocative
soundtrack and visuals that blur the
line between reality and fiction.
Built using HTML5, the designers
ensured that whether the site is viewed
on a monitor, tablet PC or phone, the
viewer would always have a rewarding
experience. “The site was created
bit-by-bit with each module designed
from an experiment which was created
as ‘proof of concept’ for each of the
director’s ideas,” explains Otto
Nascarella, the lead developer on the
project. “Two jQuery plug-ins were
written during the development of this
project, but only one ended up being
used live: the typographic animations,
called jQuery textdrop.”
The overall design creates an
atmosphere, which is precisely what
the designers and director were
aiming at: “By mixing Kasia Kifert’s
photographs of vast empty spaces,
sun, waves and yachts cast off Tutuila
Island and the huge ‘The Trip’ title with
heavy fonts, we managed to create
strangely poetic and melancholic retro
footage and [the] feel to the film,” say
the Kissinger Twins. “We managed to
achieve everything we set out to. It
looks great on screen, as a poster, vinyl
album or as large-scale photos.”
“ Users can choose how they move through the storyline,
and at what pace ”
Telling the story of Jack Torrance, this site is evocative and gripping, with visuals
that are perfectly executed online
<Above>• Consisting of 11 chapters, you can move through the online story from any point you choose
<Above>• Visitors see a running commentary as each chapter of the journey is played out on screen
<Right>• The site design is constructed to include well-chosen video footage that is supported with a subtle soundtrack
<Above>
The font used throughout the site is ITC American Typewriter Bold, originally designed by Linotype and available from A-Z fonts
D
DOMAINS | E-MAIL | WEB HOSTING | eCOMMERCE | SERVERS
Call 0844 335 1211 or buy online 1and1.co.uk
* 1&1 Unlimited (Windows and Linux) free for the fi rst 6 months, then £6.99/month. 1&1 Unlimited has a 12 month minimum contract term. The .co.uk domain offer applies for the fi rst year of registration; second year and subsequent years will be charged at the regular price. All .co.uk domains have a two year registration cycle payable in advance. The .co.uk domain offer is for new contracts only and is limited to one domain per contract. Visit www.1and1.co.uk for full offer details, terms and conditions. Prices exclude VAT. Windows is a registered trademark of Microsoft® Corporation. Linux is a registered trademark of Linus Torvalds.
At 1&1 we provide advanced solutions for even the most demanding web projects. Choose from our fl exible Windows and Linux hosting packages for thelatest in technology and programming.
1&1 offers NEW: Microsoft® ASP.NET 4.0/4.5, the latest programming technology for developers, helping to create modern, professional websites with 1&1 Windows Web Hosting.
Linux professionals benefi t from NEW: PHP 5.4 and PHPDev, plus unlimited access to 1&1 Click & Build Applications and more with 1&1 Linux Web Hosting.
WINDOWS OR LINUX
HOSTING
MAXIMUM RELIABILITYYour website data is stored simultaneously in two geographically separate high-performance 1&1 Data Centres, with automatic daily back-ups included.
EXPERT SUPPORT1&1 employs over 1,500 internal developers to guarantee the continuous improvement of our products. You can manage your account easily wherever you are via the user-friendly 1&1 Control Panel, and get reliable 24/7 phone and e-mail support from our web hosting experts.
1&1 UnlimitedWindows
1&1 UnlimitedLinux
6MONTHSFREE!Then £6.99 per month*
6MONTHSFREE!Then £6.99 per month*
Unlimited Webspace
Unlimited Traffi c
1 FREE domain for contract lifetime
Mobile Website Editing Software NetObjects Fusion® 1&1 Edition included
Facebook® and Bing™ vouchers worth £55
IPv6 ready
and much more …
NEW! ASP.NET/.NET Framework 4.0/4.5
NEW! PHP 5.4, PHPDev, Zend Framework, Perl, Python, Ruby, SSI
NEW! 5 MS SQL 2012databases (1 GB each)
100 MySQL 5 databases (1 GB each)
NEW! ASP.NET MVC 3 and 4, .NET, AJAX, LINQ, PHP 5, PHPDev, Perl, SSI NEW! Webspace Recovery
NEW! Dedicated app poolsUnlimited access to 65 Click & Build Applications including WordPress, Drupal™ and Joomla!®
GET A .co.uk FOR JUST £0.99!*
® ©
22 _____________________________________________________________ design diary
Snowbird
design diary _____________________________________________________________ 23
he crisp, clean, white and cold
expanses of a mountain have
been attracting the
adventurous for centuries. But
it was the latter half of the 20th
century that saw ski resorts
blossom into desirable holiday
destinations. Snowbird, situated
in the Little Cottonwood Canyon in the state of Utah,
started life back in 1971, long before digital outsider Rally
Interactive was born.
The resort has seen continual development over the
decades with the 2002 Winter Olympics gracing nearby
Salt Lake City. In 2008 Outside Magazine named
Snowbird the number one ski resort in North America.
Snowbird’s digital heritage has been gracing the web
since 1996, but it wasn’t until 2012 that the resort teamed
up with three guys that go by the name of Rally
Interactive. The agency itself had only been in existence
since January 2011. The three founders, Ben Cline,
Thomas Cooke and Wes Pearce all shared a love of digital,
snow and the great outdoors, which was an ideal
combination to start an agency and get involved with the
Snowbird resort.
It was always a long-term goal for the agency to align
their talents and skills with outdoor-lifestyle brands as a
way to feed their culture. The Snowbird project fitted
neatly into Rally’s portfolio of clients where quality
matters. And, to make matters even more exciting, the
Snowbird brand just happened to be something that the
agency cared passionately about.
TThe obvious connection, and location, between
Snowbird and Rally Interactive meant that the project
was always a goer. But the project took a little longer
to come to the table than originally expected as Rally
managing partner, Thomas Cooke, explains: “Ironically,
we had pitched this project and won the RFP once
before, but at that time, the project was put on hold –
whether it was for budgetary reasons, or whether
Snowbird needed to get the right sta� in place on
their end to handle the content needs of a project of
this scale, or a little bit of both.
“The entire ski industry in the West su� ered a
pretty bad snow year in 2011-2012. There is a widely
held belief in the ski resort business that if it snows a
lot, you are a marketing genius. A great snow year
motivates skiers to visit your mountain and buy lift
tickets, stay in the lodges and hotels, dine at the
restaurants, and put their kids in ski-school. Everybody
wins. It’s the multiplier e� ect of a great snow year, and
the co� ers for next year’s marketing projects are
overflowing. But when you have a bad snow year,
well… you get the idea.
“We happened to finally get this project rolling after
an uncharacteristically tough year for Utah, and
though Snowbird’s need to re-create its web
experience was long overdue, coming after a lean
snow year amplified the stakes, not just for Rally: our
clients’ necks were also on the line. On top of
delivering a great site that was expected to increase
online bookings, it was almost as if we needed to
guarantee that it would snow too! I can happily say
Project Snowbird Web www.snowbird.com Agency Rally Interactive Web rallyinteractive.com Duration 15 weeks People involved 7 Total man hours Approximately 1,600 hours Project budget N/A
Snowbird
Award-winning Utah ski resort Snowbird teamed up with local digital geniuses Rally Interactive to align their talents and know-howto bring both form and function to the outdoor lifestyle brand
Snowbird:Bringing the ski resort experience to the web
throughout the process. Naturally, they (Snowbird) played
a huge role in defining what their needs were and guiding
our e� orts in user-centric design for the most important
groups of users. In the initial planning phases, we dealt
with a much larger group than what the working group
would be in later phases. We conducted a planning
session where we gathered as much internal feedback
from a variety of internal constituents: lodging,
reservations, mountain operations, etc. It was imperative
that our clients had support from their internal
stakeholders. It also didn’t hurt that the Rally strategy and
project-management team (Thomas Cooke and Heather
LaPerle) both had held senior marketing positions with
other Utah ski resorts, and were very familiar with dealing
24 _____________________________________________________________ design diary
Snowbird is having a great year so far, just browse
through their Photo of the Day section, and you can see
evidence of all the snow Rally was responsible for making.
Genius,” he says, with tongue in cheek.
Winning the project was just the first step in bringing
the new Snowbird ski experience to the web. To build a
persona and get to the core needs for the site, a host of
meetings and planning between the two parties involved
were called upon. Cooke gives an insight into the starting
relationship between the client and the agency. “Nobody
knows the true Snowbird brand better than the core
customers, and nobody knows those customers better
than the marketing folks at Snowbird who hired us. Their
team and our team were very active and collaborative
with the politics of the ski town. As we got further along
in the scope and execution, the client working group got
much smaller: basically just the project manager on the
client side and the director of marketing of the resort
who was ultimately responsible. We talked to them daily.”
The site design is the visual experience that brings a
website to life. How a design gets to the web begins at
the concept stage. What considerations need to be taken
into account, who will be the core users and what do
they want to see? As Cooke reveals, trends also play a
part. “Our initial concept presentation to Snowbird
borrowed an old phrase from hockey great Wayne
Gretzky: ‘Don’t skate to where the puck is, skate to where
the puck is going to be.’ Snowbird initially asked for a new
Name Heather LaPerleTitle Senior producer
Name Thomas CookeTitle Managing partner
Name Ben ClineTitle Creative director
Name Brijan PowellTitle Associate creative director
Snowbird
© Matt Crawley
design diary _____________________________________________________________ 25
THE MOBILE CHALLENGE Multiple screen sizes, resolutions, operating
systems and manufacturers present many a
challenge for developers. Lead developer Wes
Pearce gives a brief insight into the process
presented the Snowbird project.
“We generally divide a site like Snowbird into
individual sections or modules, and a single
developer will handle the frontend and backend
work associated with that section. If someone is
building a weather widget, for example, they’re
responsible for managing the weather data and
building the UI associated with it.
“The most challenging aspect of the site was
creating a great experience across all the mobile
devices we were required to support. Even the
latest and greatest versions of iOS and Android
di� er in ways that can impact development
significantly. Throw in recently released Windows
phones, and we had a lot of QA and testing to get
the mobile version of the site ready for release.”
<Above> Building widgets for Snowbird gave developers the opportunity to delve into the backend and get creative with the UI
site design, but what we gave them was a mobile-first
approach to rebuilding their web presence. We didn’t pull
this out of thin air. Taking into account the rise of
responsive approaches, looking at their site analytics,
considering the approaches of some of Snowbird’s
respected competitors, we believed they needed to
address the whole big picture. Analytics tells you where
the puck has been. So many smart people only look at
analytics as a way of reporting what happened. Harder to
predict what is happening or what will happen. It wasn’t
too far of a stretch for us to convince Snowbird about the
trends indicating more mobile web visits, not fewer. We
built one application on the backend that manages
content on three unique views: the desktop browser, the
touch-optimised tablet, and the small-screen smartphone.
But many of the design cues started with the small
screen. Our approach was not to take a robust desktop
view and shrink it down, but to make a no compromise
mobile site and scale it up to larger experiences.”
With a concept in hand, the next stage of the Snowbird
project was to get down to the shop floor and get
designing the elements that would wow users. Creative
director Ben Cline gives an insight into the process that
Rally adopted to create the visuals . “Visual design duties
were primarily handled by myself and Nick Schiefer, our
design intern last summer. Nick came to us from the new
media design program at RIT (Rochester Institute of
Technology). Once the overall design direction for the
Name Adam LuptakTitle Senior developer
Name Eric MoncadaTitle Senior developer
Snowbird site was locked down, I had Nick specifically
working on custom iconography for the mobile site as
well as a couple of page layouts. The need for the icons
came from a mobile development prototype that we built
very early on. The goal with the mobile site was to make it
feel like a native app. Philosophically, designers at Rally
always work closely with developers throughout an entire
project to ensure the visual integrity remains intact by
launch. So many of the small details that make this site
unique were polished elements that happened down the
stretch, so to speak, with design and development
bouncing ideas back and forth while we were executing.
For example, the ‘mountain contour’ rollover that moves
organically along the top navigation, that was a
The website design is the
visual experience that brings a site to life. How a design gets to the web begins at the concept stage
Snowbird
26 _____________________________________________________________ design diary
GOODBYE TO BADGetting to launch day is rarely a pain-free experience. Founding partner and lead developer Wes Pearce
reveals the internal struggles and compromises that brought the Snowbird experience to live.
“We met a few real challenges [in] getting the Snowbird site launched. Some of these were internal. We
found while our client was comfortable embracing the modern web in spirit, in practice we were dealing
with some internal stakeholders proofing content on old work-stations with outdated browsers and
operating systems. Their own folks were not able to fully experience the site the way it was intended for
the core consumers. There were some graceful degradation compromises that had to be built into the
experience down the finishing stretch that we frankly didn’t plan for up front. We also had the challenge of
answering to a certain segment of daily site visitors who after five years of getting used to the old site
experience, had become quite comfortable with ‘bad.’ It’s not to say we didn’t plan for this, as we all know
how much human beings love it when things change! But the last thing you want your clients to hear (and
it very often is the first thing they hear) is criticism.”
math-based animation that Adam, one of the lead
developers on the project prototyped. Another example
would be the desktop site transitions. I prototyped the
transition in After E� ects before it went into development.
This allowed the developers to oversee how the transition
would link together before writing any code.”
The completion of a site is just the beginning of its
journey and it is not the end of an agency’s responsibility.
Managing partner and producer Thomas Cooke reveals
how their relationship with Snowbird is much more than
just building a web site. “We have since provided
Snowbird with some post-launch changes and
enhancements to the site, and continue to o� er
maintenance support on an ongoing basis. We’ve enjoyed
a long relationship with Snowbird that goes back to some
smaller previous projects, and the launch of the new site
only entrenches Rally as a partner for the long term.
We’ve had our end of the year company holiday party
there the last two years. We bring clients in for work
sessions and have them stay at the Cli� Lodge at
Snowbird, and it just blows them away. We have a road
map in place with Snowbird that looks at other initiatives
they want to tackle. This site is just the beginning.”
Snowbird
The completion of a site is the beginning of its journey, it is not the end of an agency’s responsibility… Rally’s
relationship with Snowbird is more than just building a website
Snowbird
design diary _____________________________________________________________ 27
We asked the team at Rally Interactive if they had a passion for snow and were they lucky enough to visit the resort as part of the Snowbird project?
Name Thomas CookeTitle Managing partner and producer
Name Ben ClineTitle Creative director
“We’ve had a long relationship with Snowbird, even
before this project. On occasion, we are invited up to
get on the first few trams of the morning with the
mountain sta� , which is good for a few runs before the
mountain opens to the public. Feels like you have the
mountain to yourself. We have also been fortunate to
share our relationship with Snowbird with other clients.
For example, we have had our National Geographic
clients come out for major work sessions, and I think
they love the Snowbird retreats more than we do!”
“The Snowbird resort is located a mere 25 miles away
from our Rally Interactive headquarters in Salt Lake City,
Utah, USA. Being situated so close to an amazing,
world-class ski area makes it really easy to head up to the
mountain and get some turns in before work or on the
weekends and holidays. Everyone who works at Rally
also happens to love skiing or snowboarding, and so
making the journey to Snowbird is a very easy choice
when it comes to choosing a perfect location for
company outings.”
Name Adam LuptakTitle Senior developer
“We all spend way too much time staring at our
monitors, so it’s important to unplug; going up to
Snowbird is one of my favourite ways to do that. Any
day I can get up out of the valley and take a few turns
is a good day, so I try to milk my season pass as
much as I can. I actually think the fact that we all ski
or board is important – being season-pass holders
informs our process, since we’re part of the target
audience. We know that we’re designing and building
a product that we are going to use ourselves.”
INSPIRINGBETTER
BUSINESS
“Growing up I was mesmerised by the speed of Formula 1 racing. As I got older,I started to really appreciate F1 more for the engineering and attention to detail.
I have been lucky enough to attend F1 events to see first hand just how passionate and obsessive the racing teams are – it was awesome. The teams even have a responsibility of ensuring all screws on their equipment cases point north!
That concept really inspired me. My team and I strive for perfection day after day, and only achieve this via hard work, attention to detail and partnering with the best suppliers.
Fasthosts delivers a premium level of service and support that’s demanded byour client-base. The secure and reliable service enables us to retain existing and attract new customers.”
Ben Wallace Director of Digital Media.drpgroup
Fasthosts has worked with inspiring businesses like drpgroup for over 13 years.The professional hosted IT solutions provide enhanced performance, increased e�ciency and state-of-the-art technology.
Find out more at:
fasthosts.co.uk/inspireor call 0808 1686 777
The professional’s choice for hosted IT solutionsDEDICATED SERVERS • VIRTUAL PRIVATE SERVERS • WEB HOSTING • DOMAIN NAMES
EXCHANGE EMAIL • RESELLER HOSTING
“This is my story”
The professional’s choice for hosted IT solutions
®
“F1 Racing inspired me.”
pro file ���������������������������������������������������������������������� 31pro file ���������������������������������������������������������������������� 31
The early-Noughties were an exciting time to be working in digital. This is before the
industry began to call it
‘digital’, with the digital-
design environment
being very much like
the Wild West – an
unregulated space
where anything was
possible, and for the most part design companies
were just making it up as they went along.
This is the environment where Jonathan Smith,
the founder and MD of Catch Digital found himself
working within. Jonathan studied new media as it
was initially called at Bournemouth University that
offered one of the first media-production degrees.
This was the late-Nineties with Jonathan graduating
just as the dotcom bubble burst. “It was probably the
worst-possible time to go into London with a degree
which had effectively taught me to make CD ROMs
in Director,” Jonathan explained. “I’d vaguely heard of
HTML but didn’t quite understand it.”
Jonathan worked for several agencies, many of
whom were corporate but progressive and creative.
Jonathan continued: “No matter where I was there
was always a sense that we were being paid to make
it up as we went along, which was fun and hugely
exciting to me. Someone at some point said that
web designers were the new rock stars, and it
certainly felt like that.”
As the decade wore on Jonathan explained that
for him, a change was needed: “Digital became a
Catch Digital is a creative agency that always leverages the right tools to deliver cutting-edge design tailored to each of its clients
who Catch Digital what Designers and
developers focused on superb digital products,
Drupal Association members, full service
including eCommerce, accessibility, mobile web and
social-media campaigns where 45 Fouberts Place,
London, W1F 7QHweb catchdigital.com
Key clientsRimmel
Caterham
Scope
Haymarket
Taxand
Catching the digital wave
core part of marketing strategies, budgets increased,
and we all started to have to take things a bit more
seriously. I fell out of love somewhat with the
internet, wanting to work at an agency as I did in the
early days of digital where coming into work each
day was challenging and fun. I decided to ditch
London to spend time travelling around south-east
Asia to reconsider my career direction.
“It was when I was away that I found myself
spending just as much time in Internet cafes than on
the beach or climbing up temples, I realised I didn’t
dislike the internet at all, but where I’d been working
wasn’t working out for me. It wasn’t fun any more.”
It was then 2006 and Jonathan found himself
back in London and trying to find a way to pay off
his backpacking debts. Working as a Flash developer,
a chance encounter would change the course of
Jonathan’s life: “I met a couple of business owners
through freelancing who offered to take me out for
lunch in return for some advice. [They wanted to
know] about the hottest up-and-coming digital
agencies in London that they could rely on to
outsource a few digital projects to.
CatCh DIGItaL
CatCh DIGItaL
32 ��������������������������������������������������������������������� pro file
than the big boys. Savvy brands were ploughing
what they had left of their slashed advertising
budgets into digital marketing (this was 2007,
remember), knowing they got more bang for their
buck with a smaller agency. We used the recession
to our advantage and grew during this time while
others were shedding staff. There was an abundance
of talent out there being made redundant, and we
were picking up business and hiring.”
Now with a business to run, naming the agency
was the next step. “I’d like to say there was some
deep and meaningful thinking behind it. There isn’t.
There are some terribly named agencies out there,
but some with questionable names I really admire. I
admire them for their output, not their name. I had
to tell myself this when coming up with all kinds of
awful names like Beep Digital. Eventually ‘Catch’ was
born from a boozy night out with some friends. All
the progressive agencies I admired in 2006 seemed
to have short names, Poke, Dare, Glue etc. Catch is
short, and it stuck. The domain name catch.com and
co.uk were taken, so I went for catchdigital.com.
“Rather foolhardily, I suggested that they punt the
work over to me, give me a place to squat in their
offices and in return I’d grow a team to service their
business. That was six years ago now. The initial
business links they provided enabled me to hire one,
then two, then three (repeat until 20+ people!), and
the rest, as they say, is history.”
Catch Digital shows that no matter the economic
environment, if you have a high-quality service to
sell, clients will beat a path to your door, Jonathan
explains: “Trying to grow an agency, even with a
small ready-made pipeline of business during the a
recession wasn’t the easiest thing in the world. But I
think it actually worked to our advantage. We were
small, nimble, and for want of a better word, cheaper
“ It’s important to point out, no matter how large-scale the project may be, we always keep the design and development in-house in our central London studio. You won’t catch us outsourcing work to the Far East ”
Jonathan Smith, founder and MD
industry insight
Work on online system for advertising industry awards. License it to some large publishing companies. Take the team to Valencia.
Begin experimenting with Drupal, launching our first Drupal website for Haymarket. Take the team to Madrid for Xmas.
Get booted out of the office share as we’re taking up too much space. Find our own office on the same street and move in.
Number of employees
1
Number of employees
5Number of employees
11
Number of employees
8Number of employees
1
Catch Digital timelineEstablished 2007Founder Jonathan Smith
Catch opens for business with Jonathan asking to borrow a desk at a video-production agency in Soho.
2007 2009 20102008
“ For us, the most important thing is the project itself. We often ask ourselves: is this something we are interested in doing? ”
<Above> The Catch team has
an abundance of creative talent
<Above> The most important
thing Catch is the project itself
CatCh DIGItaL
pro file _____________________________________________________________________ 33
The original Hoxton website was looking a little
tired, and since its launch in 2007 social media and
web technologies in general had moved on. The
majority of people were visiting the website via
tablets and mobile devices, and the content wasn’t
best viewed on smaller screens.
Hoxton asked Catch Digital to design and build a
site which mirrored the cool, urban and relaxed
nature of their venue – and their patrons for that
matter – and one which offered an engaging
experience on a desktop and on mobile.
Catch Digital proposed to implement new features
and animations, which would help to improve user
experience and interaction, and ultimately help
leverage the site to convert visitors into paying
customers for the restaurant.
As well as being functional, Catch Digital also
wanted to place emphasis on the design and
incorporated photography from the venue into the
background imagery of the site. While live
entertainment is an essential part of Hoxton’s
offering, they were keen to promote the Mexican-
inspired food and drinks, which is also reflected in
the design.
Hoxton regularly showcases the work of
up-and-coming artists in London. As such, Catch
Digital integrated a Flickr gallery into the web page
that displays both previous and current artists
exhibiting work at the venue.
The site is fully responsive, and works beautifully
across multiple platforms. It provides an experience
that is targeted at the regular clientele for Hoxton.
Catch Digital used the fantastic Isotope jQuery
Plug-in (isotope.metafizzy.co) to create a site that is
not only beautifully designed, but is also very
dynamic in its implementation.
Hoxton Square Bar & Kitchenwww.hoxtonsquarebar.com
<Above> The Hoxton’s site encapsulates Catch Digital’s ethos
<Right> Catch was born in borrowed office space in 2007
Number of employees
17
Number of employees
26
Number of employees
212012 20132011
Our first iPhone app goes into the app store for Snazaroo.
Another new office. Moved to a 2,700+ sq ft space just off Carnaby Street. Our Baby Names iPhone app for Bounty launches and ranks #2 in the iTunes Lifestyle chart, in front of Amazon and behind eBay.
Launch a suite of global sites for Rimmel, 18 markets covering 11 languages. Become obsessed with foosball, start live-streaming our foosball tournaments.
We’ve kind of become known as Catch Digital
because of [the] URL. It’s certainly been no bad thing
when it comes to ranking for ‘digital-agency’ related
key phrases that’s for sure.”
In the early days of the agency, Catch Digital was
able to pick a number of clients who knew a little
about what digital design could do for their
businesses, but had little experience of who could
deliver this content. “We have succeeded in making a
name for ourselves as open-source specialists (most
often Drupal) and our reputation for working
collaboratively with our clients to deliver great sites
has opened doors for us with some very big brands,”
Jonathan explained. “I think we’re quite unique in that
we don’t advertise (other than utilising earned media)
we don’t have a sales team hitting the phones. All of
the new work that we win comes from
recommendations or from being invited to pitch by
potential new clients that have seen our work
elsewhere. We get approached a lot, which is a nice
situation to be in, but it took several years of working
hard and proving ourselves in our own quiet way
before the larger brands came knocking.”
Attracting clients that can also move the agency
forward in terms of its business strategy is also
important, as Jonathan outlined: “For us, the most
important thing is the project itself. We often ask
ourselves: is this something we are interested in
doing? Do we think we have an opportunity to be
creative here? Is there an opportunity to work with a
brand we like or respect?
“The scale of the build and the budget are things
we have to take into consideration from a
commercial perspective, but not until we are sure
that the project is something that we want to do. We
have huge clients like Rimmel for whom we are their
global digital agency, responsible for them in 18
markets in 11 languages. But equally we have some
smaller clients like Barworks who own and operate a
select few bars in Soho and East London. We hang
out in their bars, so we took them on as a client –
and why not?
34 ��������������������������������������������������������������������� pro file
more intimate projects the agency has worked with.
“It would be easy to show a large-scale project here,
but it’s actually for one of our smallest clients. In
2012 we developed a site for Hoxton Square Bar &
Kitchen (www.hoxtonsquarebar.com) that we all
feel really expresses what Catch is about, a truly
collaborative approach and something that was both
challenging, pushed our knowledge technically, and
ended up with a great site the client loves and works
well for their customers.
“We had a great existing relationship with the
client, and their complete trust in our ideas and
execution led to them giving us an open brief
‘promote this bar’. This meant that we were able to
really push the boat out on our creative and
technical approach. The site is fully responsive, it
“I was hungry to get a good reputation and I
think clients have to take a punt on you when it’s
just you and say one other person. You know, now
we’ve kind of moved into this position where we do
have a really good reputation, so we can cherry
pick to a degree for sure, but we try to take on work
that we feel will be creatively rewarding and
challenging for all the team. So you know,
producers, designers and developers all together.
We ask will this be something that will actually
benefit ourselves and our own portfolio, as well as
being able to nail this for the client? Ultimately you
want to come into work and be challenged and
have fun every day.”
And is there a project that typically defines the
Catch Digital ethos? Jonathan outlined one of the
Rimmel products are available in 18 markets,
spanning 11 languages. Catch Digital were tasked
with designing and building the brand a digital
platform which would fix Rimmel ahead of the
curve across their markets.
Movement is at the heart of their creative
treatment. The organic layout is supported by subtle
animations and a real sense of depth which creates
a memorable experience that is unique to Rimmel.
Catch Digital’s ‘mobile-first’ ethos has allowed the
agency to create a site built with mobile and tablet
use firmly in mind. Catch Digital provided Rimmel
with a cross-platform compatible experience,
ensuring all users are presented with the same
information as those visiting on a desktop browser.
For a feature-rich user experience, Catch Digital
integrated a wealth of third-party systems,
including CheetahMail (for email marketing and
data capture), BazaarVoice ( for product reviews
and ratings), Where2GetIt (a retail outlet locator)
and DailyMakeover – Virtual Makeover (to try
products virtually).
To enable the user to refine the vast product
range that Rimmel offer, Catch Digital integrated a
technology called Isotope. This makes browsing
and filtering a far more impressive experience, and
shows off the products to full effect.
Pairing cutting-edge technology with stunning
creativity, Catch Digital created a global platform for
Rimmel that cements them as the best in class. The
agency created the platform using Drupal within
which they can roll out additional market websites
in their local language. An international team of
content editors have full control over their
individual market’s website. Catch Digital is
currently working on replacing all the legacy
market sites with the new look and feel. These will
be rolled out during 2013.
Rimmel London – global website redevelopment uk.rimmellondon.com
<Above> Catch Digital provided Rimmel with a unique, world-class website that had organic movement at its core
“ Ultimately you want to come into work and be challenged and have fun every day ”
<Above> All team members
at Catch have a client-facing role
CatCh DIGItaL
<Below> The agency is platform agnostic, and every producer has a custom setup
pro file _____________________________________________________________________ 35
works beautifully across multiple platforms, and
provides an experience that is targeted at the
regular clientele for Hoxton. We’ve used the fantastic
Isotope jQuery plug-in (now much copied!) to create
a site that is not only beautifully designed, but is also
very dynamic in its implementation.”
Turning to the nuts and bolts of how Catch Digital
turns a brief into cutting-edge design, Jonathan
outlined the company’s approach: “The size of our
project teams varies depending on the scale of the
project and how aggressive the deadline is, but the
structure is the same in most cases. Clients have a
dedicated point of contact within our Client Services
team. Some agencies refer to them as project
managers but we use ‘producer’ title as all of our
team are client-facing and are responsible for
balancing the needs of the client along with
delivering a successful project (on time).
“The producer will assemble an internal project
team that will consist of an art director, one or more
designers, a lead developer and a team of
developers with a mixture of skills to fit the project.
Senior team members are involved in all stages of
our projects and we work in a collaborative fashion
so we all know what is being produced and
everyone has the chance to contribute.
“The initial phase of a project can often take up
considerable time. This is what we call the project-
scoping or ‘discovery’ phase, where we spend time
really getting under the skin of the brief (often
re-writing it), understanding the client, their audience
as well as getting to know the client project team
intimately. Design and development follows, and our
projects can last anything from 4-16 weeks on
average, with the bulk of the production time being
spent on development. However, it’s important to
point out, no matter how large-scale the project may
be, we always keep the design and development
in-house in our central London studio. You won’t
catch us punting the work over to the Far East.”
The toolset that Catch Digital uses includes the
ubiquitous Adobe tools, but also from a process
point of view Google Docs have come very
important, as they lend themselves to the
collaborative e� ort that is today’s creative digital
design. Catch Digital also use Assembla (www.assembla.com) and Basecamp (www.basecamp.com) with the former proving to be absolutely
invaluable, particularly during the testing phases of
large projects. The project teams at Catch Digital
also use Merlin (www.projectwizards.net) for
project planning and resource allocation. UX work is
carried out in either Balsamiq (www.balsamiq.com)
or OmniGra� le (www.omnigroup.com).
For development, Catch Digital is platform-
agnostic with the agency using a varied mixture of
Windows, Mac or Linux with each producer having
their own custom setups, usually with free or
open-source tools. For iOS they either develop
natively, or more recently using the Titanium SDK
from Appcelerator (www.appcelerator.com/platform/titanium-sdk). All of Catch Digital’s
Baby Names by Bounty provides
the UK’s most up-to-date
information and inspiration for
parents needing help naming
their unborn children. The app
comes pre-loaded with the latest
names data, collected right from
bedsides in maternity wards
around the UK by the dedicated
Bounty team.
The app provides data sorted for
boys and girls, the top 100,
most-popular names based on
location and even suggested
middle names and sibling names
to match first names. Fun features
like ‘shake to shuffle’ are in place
to randomly generate names, and
the app also provides news
content directly from the Bounty
Baby Names news feeds.
By developing the app using the
Titanium App Development
Framework and SDK, future
versions for iPad and Android can
be created quickly and easily, with
a reduction in investment for
development time required to roll
out across the multiple platforms.
This approach provides great
flexibility for future expansion to
new app marketplaces, and
provides a simple way to keep up
with handset advancements.
The app is approaching 100,000
downloads and having received
hundreds of five-star reviews, it
has done a great job, even at one
time reaching #2 in the iTunes UK
Lifestyle Chart.
Baby Names by Bounty (iOS App) www.appstore.com/babynamesbybounty
development is done with open-source technologies,
with the bulk of that being completed via Drupal
(www.drupal.org).
HTML5, CSS3 and jQuery are seen as the
technologies that will build the web over the coming
years. What are Catch Digital’s thoughts on these
and how do they think they will evolve?
Catch Digital have a pretty flexible approach to
mobile, always trying to balance the expectation of
users with the needs of the client. In most cases
they take a responsive approach, although they have
been known to experiment with custom mobile-
friendly landing pages and more adaptive
techniques when the need arises. Responsive design
is great but they feel that there will always be a need
for tailored experiences in mobile.
Jon Hume, head of projects, explained: “There is a
growing trend for the design community to bash
responsive design, with some people claiming that it
makes the web a bit ‘soulless’ – we would disagree
with this and feel strongly that it can be done in a
way that maintains the design of the site, while
allowing for a compelling mobile experience.”
Social media is now considered an integral part of
any digital campaign. How important are services
such as Twitter, Facebook etc in the overall process
of driving tra� ic to a client’s site? “We find that is a
question that we get asked a lot, but we prefer to
look at it as; ‘What can we do to engage with your
users more e� ectively using other platforms?’”
commented Jon Hume: “The end goal is the same:
CATCH DIGITAL
36 _____________________________________________________________________ pro file
increasing tra� ic or awareness to the website, but we
don’t want to stop there.
“Users might only visit a client’s website
occasionally, so what we look to do is provide them
with information that they need to keep in touch
with the brand, feel like it is a brand that they
associate themselves with and then know where to
find the website when the need arises. Improving
engagement and opening a dialogue is where the
real value of social media lies, simply looking to drive
tra� ic to your website means that you could be
missing out on other opportunities to connect with
your users, and long-term that can cost you sales.”
Clearly the quality of the work that Catch Digital
has been producing is directly linked to the skills that
the agency contains. Does the company look for a
particular type of person when recruiting? Jonathan
outlined his approach: “There is definitely a ‘Catch’
type of person. We are a close-knit team and finding
new sta� to fit in with that is something that we have
a proud history of achieving, so this is considered
across all of the teams when we are recruiting.
Jon Hume says, “We do like to find potential
candidates in interesting ways. One team member
sent us a photo of herself with a beard drawn on
using the iOS app we developed for Snazaroo (a
popular face-painting brand) which did a good job of
getting our attention. And we recently searched for
a new intern by asking applications to be done via a
three-minute YouTube video.
“I think that approach translates nicely into our
advice for potential candidates: go direct rather than
via a recruiter if you can. Have a clear vision for what
you want to do and be able to explain it well, and
demonstrate your skills with real-world experience. If
you don’t have any experience, get some either as
an intern or in your own time, there are plenty of
learning resources available.
“The final word of advice would be to show your
passion for digital – make use of all the social
platforms, send tweets, engage with your peers and
get involved. A personal website is a must, even if it’s
just a collection of links to your social-media links.
There are plenty of great services out there like
About Me (http://about.me), Flavours (http://flavors.me) and Carbonmade (http://carbonmade.com)
that give you a slick-looking presence with no coding
knowledge required.
“There’s nothing worse than seeing ‘references
and work available on request’, because when
you’ve got 20 CVs, you go to the ones that have a
link to Carbonmade or Dribble (http://dribbble.com)
so you can see the work immediately. You can have
a shiny CV with lots of A-stars on it but that’s not
necessarily what we’re going to look at straightaway.
I’d much rather get a feel for who you are. How
you’re going to be to work with and whether I trust
you with my clients is more important.”
Jon Hume also commented: “There’s some great
examples recently where young designers have
gone out and sold real-world property that exists
already and made their work available for people to
look at and have ended up getting jobs. There’s a
guy that in his own time re-branded Microsoft
completely, so he did everything and explained it all
in a really good way, showed all the applications for
it and [as a result] he’s ended up getting a job there.
I think there’s potential for that sort of thing. If you
want to go out of your way and really try and
impress people, there are gaps there for you to do it
and its definitely a great way of impressing some
potential employers.”
And so what does the future have in store for
Catch Digital? “It’s a super exciting time for us right
now,” says Jonathan. “In the summer last year we
moved to a beautiful space just o� Carnaby Street in
the West End [which is] more than three times the
size of our last space to enable us to continue to
grow organically,” he concludes. “We’re established
enough now to be able to attract some great talent,
and its a great feeling to see the o� ice filling up with
all manner of talented sta� from designers to
producers and developers as our client base
continues to grow.
“We already have clients across the globe, from
NYC to Mumbai via Paris and Germany. Increasingly
we find ourselves working with North American
clients, so we’re currently plotting a satellite o� ice in
Manhattan to better serve these clients, thus
avoiding the early evening FaceTime where we’re
WEB .............................................................. www.catchdigital.comFOUNDER ................................................................. Jonathan SmithYEAR FOUNDED ............................................................................. 2007CURRENT EMPLOYEES ................................................................ 27 LOCATION ............................................................... Central London
SERVICES
> Content-managed websites> Mobile applications> Social-media campaigns> Responsive mobile design> Digital products and platforms
“ Show your passion for digital – make use of all the social platforms, send tweets, engage with your peers and get involved ”
“ Someone at some point said that web designers were the new rock stars, and it certainly felt like that”
Jonathan Smith, founder and MD
industry insight
thinking about beer o’clock, and they are having a
croissant and a latte.
“And as for future projects, if we told you we’d
have to kill you. So it’s best for both of us that we
keep tight-lipped on that one! But you can expect
some physical and digital work, large-scale
content-managed multi-language websites, and a
ton of mobile.”
CATCH DIGITAL
Subscriptions Voucher
■ YES! I would like to subscribe to Web Designer
Your detailsTitle First name
Surname
Address
Postcode Country
Telephone number
Mobile number Email address
Please complete your email address to receive news and special offers
Direct Debit Payment■ UK Direct Debit payment Pay only £25.15 every six issues (save 30%)
Payment detailsYOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES)
■ UK £62.30 (Save 20%) ■ Europe £70 ■ World £80
Cheque
■ I enclose a cheque for £ (made payable to Imagine Publishing Ltd)
Credit/Debit Card
■ Visa ■ MasterCard ■ Amex ■ Maestro
Card number Expiry date
Security number ■ ■ ■ (last three digits on the strip at the back of the card)
Issue number ■ ■ (if Maestro)
Signed
Date
Code: PAG209■ Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. ■ Tick this box if you do not wish to receive promotional material from other companies.Terms and conditions apply. We publish 13 issues a year. Your subscription will start from the next available issue unless otherwise indicated. Direct Debit guarantee details available on request. This offer expires without notice.
Web Designer Subscriptions Department, 800 Guillat Avenue, Kent Science Park, Sittingbourne, ME9 8GU, or email it to [email protected]
Instruction to your Bank orBuilding Society to pay by Direct Debit
Signature(s)
Date
Bank/Building Society account number
Instructions to your Bank or Building SocietyPlease pay Imagine Publishing Limited Direct Debits from the account detailed in this instruction subject to the safeguards assured by the Direct Debit guarantee. I understand that this instruction may remain with Imagine Publishing Limited and, if so, details will be passed on electronically to my Bank/Building Society
Branch sort code
Name(s) of account holder(s)
To: The Manager Bank/Building Society
Address
Postcode
Originator’s Identification Number
5 0 1 8 8 4
Reference Number
Name and full postal address of your Bank or Building Society
Please fill in the form and send it to: Imagine Publishing Limited, 800 Guillat Avenue, Kent Science Park, Sittingbourne, ME9 8GU
Return this order form to:
✔
Manage your subscription account online at www.imaginesubs.co.uk
Banks and Building Societies may not accept Direct Debit instructions for some types of account
OnlineOrder via credit or debit card, just visit:www.imaginesubs.co.uk/wedand enter code PAG209
TelephoneOrder by phone, just call:
0844 848 8413Overseas: +44 (0) 1795 592 878 and quote code PAG209
Post or emailPlease complete the form and post it to:Web Designer Subscriptions,800 Guillat Avenue,Kent Science Park,Sittingbourne, ME9 8GUAlternatively, scan and email the form to:[email protected]
THREE WAYS TO SUBSCRIBE
IMAGINESUBS.CO.UK
GO DIGITAL!
FOR ANDROID, MAC, PC, iPHONE & iPAD
GREAT DIGITAL SUBSCRIPTIONOFFERS AVAILABLE AT:
The only magazine you need to design and develop stunning websites
Subscribe now and
SAVE 30%Let Web Designer unleash your creative side!
The only magazine you need to design and develop stunning websites
Dreamweaver, HTML5 & CSS WordPress & microblogging
Photoshop & Illustrator Frameworks & tools Plus site showcases
& exclusive interviews!
USA READERS
see page 108 for
exclusive
discounts
40 ___________________________________________________________________ feature
AS A WEB DESIGNER, IT’S REALLY IMPORTANT TO HAVE AN EFFECTIVE, WELL-ORGANISED WORKFLOW. THE TRICK IS CHOOSING THE RIGHT TOOLS, SO WE’VE COMPILED 50 OF OUR FAVOURITES TO GET YOU STARTED
feature _____________________________________________________________________41
Designing websites isn’t just about drawing pretty pictures; as a web designer you
may find that up to 50 per cent of your time is spent planning, testing and promoting,
not to mention the paperwork! Being multi-skilled is an accepted part of the job, but it
can be frustrating when you’re called away from the work you love to conduct tasks
you don’t enjoy. Thankfully, there’s a simple way to reduce this e� ect, and you can get
started today!
Having an e� ective and well-organised workflow is a crucial part of any job, but
this is especially true for web design. There are so many facets to the role: you
might be wireframing a website one minute, and testing an entirely di� erent site the
next. In between these crucial roles, and even after, there are a host of processes to
add to the web design/development lifecycle. There’s also planning, development,
promotion and, of course, what most consider the most important part, the actual
designing itself.
GET THE RIGHT TOOLS FOR THE JOB Whether or not you enjoy these tasks, it’s certainly a truism to say that a lot of the
time you work as a web designer, you’re not actually actively designing websites!
There is so much more that needs to be done to get a site to the finish. Of course,
this can be helped by having an e� ective set of tools at your disposal to help you
get the most out of your time and e� ort, regardless of whether your preference lies
with developing user interactions
or designing user controls.
Remember, the more time you
save optimising your workflow
and reducing unnecessary manual
work, the more you can spend on designing fantastic sites.
CHOOSE YOUR TOOLS WISELYThe better your set of tools is, the more time you can dedicate to the designing aspect
of the role, creating a framework and solid foundation for robust designs. The di� iculty
is that there are just so many di� erent tools and services available, it’s a minefield
trying to keep up to date with the various options. Get your choice right and you’ll
have an arsenal of tools that will save you time and e� ort. That’s why we’ve gathered
together 50 of the best tools for web designers that will help you in five key areas:
planning, design, development, testing and promotion.
Within our list we’ve got full-scale desktop tools, online options, web services,
frameworks and utilities. The common feature among them all is that they’ll help you
save precious time, as well as ensuring the best of results. When used in combination
as part of your workflow, these tools form a complete suite that will help you build a
website from concept to completion.
and reducing unnecessary manual
work, the more you can spend on designing fantastic sites.
PLANNINGGET YOUR WEB DESIGN PROJECT OFF TO THE RIGHT START WITH THE RIGHT SELECTION OF MUST-HAVE PLANNING AND WIREFRAMING TOOLS
BASECAMP www.basecamp.com
Basecamp is an online project management system that’s the ideal planning and project
collaboration platform. As well as o� ering built-in user control and management, Basecamp
allows you to work easily with colleagues, assign tasks and track progress against these
easily. The system provides to-do lists, discussion areas, asset storage and a shared calendar.
Basecamp is part
of a suite of online
apps including
Highrise, Backpack
and Campfire,
which together
provide a complete
set of project
management tools.
While the app isn’t
free, it does o� er
good value for
money with plans
starting at $30/
month, for which
you’ll be able to
plan and manage
up to 15
concurrent
projects.
DIAhttps://live.gnome.
org/Dia
Dia is a free desktop tool for generating diagrams,
available for Windows, Mac OS X and Linux.
Broadly equivalent to Microsoft’s Visio, it o� ers a
range of di� erent ways to generate relationship
diagrams and is a great solution for mapping
out your website before you start designing and
coding it. As well as o� ering a large library of
pre-built shapes for creating diagrams, it allows
you to generate your own using SVG and XML,
making it flexible enough to fit any workflow and
presentation style.
MOQUPShttps://moqups.com/
Moqups is a fantastic free
online wireframing tool that allows you to create
interactive mock-ups that you can share with
colleagues and clients. Individual ‘pages’ can be linked
to create a fully connected user journey through your
proposed website, before you’ve crafted any of the
user interface. Completed mock-ups can be exported
in PDF and PNG format, making it easy to include
your wireframes in project documentation. Crucially,
the entire system works in the browser using HTML5,
making it accessible across the full range of devices
– ideal for web designers who face a daily commute in
the morning!
42 ____________________________________________________________________ feature
Focus on getting the user journey and site structure right during the planning stage to avoid uncomfortable discoveries later on. By generating wireframes and flow charts, you can save a lot of time in the build phase, and your client will have a clear sense of the final product before you’ve so much as coded a single HTML tag!
UX DESIGN
YUUGUUwww.yuuguu.com
YuuGuu is a screen-sharing and desktop
collaboration tool that makes it easy to quickly
see what’s on your colleague’s desktop, conduct
interactive demonstrations and host web meetings.
The service integrates with your existing software,
without the need to download plug-ins, so that
you can host meetings as if everyone were sitting
in the same room. Pricing starts from £69/year for
unlimited meetings including screen-sharing, web
conferencing and audio phone-in services.
DROPBOXwww.dropbox.com
Dropbox is a simple way to share
and back up files across a
number of di� erent devices. It works as an extension
to your hard drive, o� ering cloud-based storage and
automatic syncing between computers and devices.
It also works seamlessly as a collaboration tool by
allowing folders to be shared between di� erent users.
The basic version is available completely free, with
the option to pay for additional storage (although it’s
possible to slowly build up your free storage by
sharing with non-Dropbox users and recommending
the service to your friends and colleagues).
allows you to work easily with colleagues, assign tasks and track progress against these
easily. The system provides to-do lists, discussion areas, asset storage and a shared calendar.
Basecamp is part
of a suite of online
apps including
Highrise, Backpack
and Campfire,
which together
provide a complete
set of project
management tools.
While the app isn’t
free, it does o� er
good value for
money with plans
starting at $30/
month, for which
you’ll be able to
plan and manage
up to 15
concurrent
feature ____________________________________________________________________43
TESTINGTESTING IS OFTEN OVERLOOKED, BUT IS ARGUABLY THE MOST IMPORTANT STAGE OF A WEB DESIGN PROJECT, AS IT OFFERS YOU THE OPPORTUNITY TO ENSURE THAT USERS EXPERIENCE YOUR DESIGN AS INTENDED
RESPONSIVE DESIGN TESTINGmattkersley.com/responsive/
As the web moves towards a
more responsive approach to
user interface design, so a range
of tools for testing has been
developed. One of the more
simple, but therefore e� ective,
tools is this simple site from Matt
Kersley. Enter the URL you’d
like to test, and the page will
render the content inside a series
of di� erent-sized windows to
emulate small screens found on
smartphones, medium screens
akin to tablet devices, and full-
size desktop-style windows. By
comparing the layout and testing
in this tool, it’s possible to test that
your responsive design approach
is working correctly, without any
of the flu� associated with more
in-depth tools.
The easiest way to test e� ectively is to iteratively
check as you make changes throughout the
development process, rather than leaving all your
testing until the end of the project. You still need
to complete end-to-end tests, but progressively
testing throughout will reduce the number of
bugs and the timescales at the testing phase.
END-TO-END
SAUCELABShttps://saucelabs.com
Testing across multiple browsers is essential for
all web designers. It’s commonly understood that
di� erent web browser rendering engines produce
slightly (or dramatically) di� erent results. Rather
than manually test across the plethora of di� erent
configurations and versions, use a hosted
solution such as that o� ered by SauceLabs. This
paid-for service allows you to fully test both the
visual rendering and the interactive elements of
your page designs without having to maintain
a testing platform yourself. While there are free
options available that will give you a simple
browser screenshot, SauceLabs’ product goes
several steps further by allowing you to view
videos of each testing session.
FIREBUGgetfirebug.com
Firebug is perhaps the best-known webpage
interrogation tool, and is based on the Firefox web
browser platform, although there are versions or
equivalents for all the main browsers. Firebug is
especially useful because of the way it allows you
to directly interact with elements within the DOM,
interrupt and place code break points, and override
CSS settings on a page. This combination of tools,
along with useful network analysis and a handy
console, makes it an absolutely essential tool for any
web designer or developer to fully test and evaluate
their own webpages. It’s also pretty useful for seeing
how other developers have implemented features, so
is worth using throughout the development process –
not just during testing.
JSLINTwww.jslint.com
JSLint is a JavaScript testing and optimisation
platform which allows you to conduct robust testing
and evaluation of your scripts. A bit like running the
W3C HTML validator, the output shows you where
you have problems in your JavaScript, and provides
pointers to help you address the issues and rectify
problems. JSLint describes itself as a code quality
tool, which means that it will reject (or identify) code
that would run happily within the browser, but that
could be better written. This promotion of best
practice approaches ensures you will write tighter,
better optimised code that will use fewer resources
and run more e� iciently.
W3C VALIDATORSwww.w3.org/2013/ValidatorSuite/beta/
The W3C, which is the body responsible for
developing and maintaining web standards including
HTML5 and CSS3, o� ers a variety of validation tools
that can be used to test the validity of your code.
While this may seem arbitrary, and doesn’t necessarily
reflect the way a particular browser will render your
page, it’s important to strive towards standards-
compliant code to ensure future compatibility, as
well as meet your obligations under accessibility
legislation such as the Disability Discrimination Act.
As well as the HTML validator, the W3C o� ers tools
for CSS validation, JavaScript and Accessibility. All the
validators have recently been integrated into a single
Validator suite which is currently in beta testing.
44 ____________________________________________________________________ feature
ADOBE DREAMWEAVER CS6www.adobe.com/uk/products/
dreamweaver.html
Dreamweaver is perhaps the best-
known web design and development tool, now part of
the Creative Suite from Adobe. It includes a complete
design and development environment allowing you
to create websites in code or design view, integrating
server-side and client-side languages; preview and
test within the app; and implement advanced user
interactions directly from the editor. Although it is
available as a standalone product, the best value can
be derived from the Creative Cloud service which
costs from £46.88/month. As well as Dreamweaver,
you’ll also get Adobe’s other creative tools including
Photoshop, Illustrator, Fireworks and a series of task-
specific apps such as Muse (for wireframing, planning
and implementing code-free website designs), Typekit
(for integrating fonts into your website) and PhoneGap
for generating native mobile apps using HTML5.
INKSCAPE inkscape.org
Inkscape is an open source Scalable Vector Graphics (SVG) editor that o� ers an ideal environment
for creating website mock-ups. Using a toolset similar to that found in Adobe’s Illustrator package,
Inkscape is a vector-only app that allows you to create artwork in a resolution-independent format –
perfect for the modern responsive web design methodology. The app is available pre-compiled for
both Windows and Mac OS X, and you can also compile your own version from the source code if you wish.
WORDPRESSwww.wordpress.org
WordPress is probably the
world’s most popular CMS,
but it started o� as a blogging
platform designed to make it easy to create a blog
and share your views with the world. These days this
free software has matured into a fully customisable
and extensible solution for creating and managing
content, including audio and video integration
through the use of plug-ins, making it a great
contender for your website’s management and
deployment. A vibrant community of developers
has developed thousands of plug-ins, both free
and commercial, that extend the core functionality
to include options for eCommerce, eLearning and
portal websites, plus a host of other applications.
FILEZILLAhttps://filezilla-project.org/
FileZilla is an open source FTP
client that works across Windows,
Mac and Linux. Despite its free price tag, it
supports all the common standards that you’ll
find in commercial equivalents including FTP,
FTP over SSL/TLS, and SSH. There are numerous
handy features that make FileZilla a real time-saver,
including the likes of pause/resume transfers,
remote file search and a transfer queue. Multiple
FTP servers can be connected simultaneously,
and it’s easy to bookmark your favourite servers
for later one-click access. An FTP client is a pretty
essential tool for any web designer, and FileZilla is
right up there with the best!
DESIGNMAKE YOUR DESIGN WORKFLOW QUICKER AND MORE EFFECTIVE WITH OUR ESSENTIAL TOOLS TO HELP YOU GET THE JOB DONE!
Use frameworks to save time and avoid reinventing the wheel! We’ve chosen a couple of common and popular frameworks to include within our 50 must-have tools, but in truth there are many frameworks available that o� er similar benefits, so find one that works for you to speed up your development.
FRAMEWORKS
GOOGLE DOCSdocs.google.com
A free cloud-based alternative to Microsoft’s Word
and Excel, Google Docs provides an excellent place
to develop and store content before deployment
to your site. Using a WYSIWYG interface, presented
within a web browser, it is also an ideal choice where
collaboration is required between di� erent users (eg
a client and a web designer), as it allows all parties
to view content and make changes simultaneously.
There is a paid-for upgrade available, but the basic
free version is su� icient for almost all standard needs
and is a great example of how traditional desktop
applications can be successfully migrated to the cloud.
feature ____________________________________________________________________45
WEB FONT SPECIMENwebfontspecimen.com
This free service allows you to preview how fonts
will appear on the web. The specimen rendering
includes full paragraphs with a range of line
heights and font sizes, plus a selection of headings,
styles (bold and italic) and individual glyphs. This
makes it ideal for getting a fully accurate sense of
what a web font is going to look like in the browser.
BOOTSTRAPtwitter.github.com/bootstrap/
This rapid application development tool will save
you lots of time. It provides boilerplate functionality
including JavaScript, CSS and markup that outputs
responsive code optimised to work across multiple
devices, including tablets and smartphones, without
the need to manually assemble and plumb all the
typical code required to make a rich application or
website work. As well as a series of useful templates
that provide a great jumping-o� point, it includes
a grid system, typography-orientated features,
advanced JavaScript widgets and CSS components.
GOOGLE WEB FONTSwww.google.com/fonts/
Like many other free and commercial services,
Google Web Fonts has developed over the past
few years to o� er a reliable alternative to the old
‘web-safe’ fonts that caused a generation of sites to
appear homogenised. It includes 624 font families
that are all free to use – and with a very simple
installation routine, it’s trivial to start implementing
them on your website. Not every font is of quite
the same quality you might find in commercial
alternatives, but Google’s free o� ering is a winner
that every web designer needs tucked away in
their toolbox.
MAGENTOwww.magentocommerce.com
Magento o� ers a highly flexible environment for
developing enterprise-level online web stores.
Although renowned for being complex and
di� icult to master, it’s a reliable, secure platform.
Features include built-in support for multiple web
stores, multiple product types and integration with
hundreds of payment service providers (PSPs).
Think about how you can reuse assets you’ve
previously generated, and start maintaining a
library of common icons and graphical files to
save having to search for or draw new assets
each time you embark on a new project.
ASSETS
STYLEADOBE KULERhttps://kuler.adobe.com
A great freebie from Adobe that o� ers an intuitive
way to browse and select colour schemes for your
web projects. Kuler includes the option to upload a
photo and sample colours from within, as well as a
neat integration into the standard Adobe design tools
for ease of workflow.
LAYER STYLESwww.layerstyles.org
Layer Styles is a simple online tool that looks
and feels like Photoshop’s layer styles dialog box.
But instead of generating styles for layers within
Photoshop, it generates CSS3 code that you can
apply to any <div> on your website. No registration is
required – just bookmark it and visit when you want
to visually generate your layer style code!
SPLASHUPwww.splashup.com
Splashup is a free browser-based image editor that
allows you to generate bitmap graphics without
having to install any software on your computer. The
app integrates with a number of online photo sites
including Picasa and Flickr, and o� ers many of the
same tools you would find in the likes of Photoshop,
without the price tag or download!
SPRITEBOXwww.spritebox.net
This simple online app allows you to upload a CSS
sprite and draw over the top of it, defining di� erent
regions that will be used in your CSS. The tool then
outputs CSS code to match your regions, simplifying
the process of generating pixel-perfect sprite layouts.
ALOHA EDITORaloha-editor.org
Aloha is an HTML5-compliant What You See Is
What You Get (WYSIWYG) editor that works cross-
browser to help generate standards-based HTML
code from user input. With a controllable set of
user-selectable properties, it’s an ideal solution for
collecting rich user input without allowing the typical
mess of invalidly nested, span-heavy code that older
WYSIWYG editors tend to produce.
HANDBRAKEhandbrake.fr
HandBrake lets you convert video quickly and
easily for free. Simply select a video from your
hard drive and choose output settings (including
all the usual web-specific options), before adding
the job to your queue. Select the same file multiple
times to output di� erent formats as required, then
run the queue while you get on with other work.
46____________________________________________________________________ feature
CODEECSSTENDERecsstender.org
eCSStender is a handy tool that allows you to
write a single, standards-compliant set of CSS
without having to worry about the di� erent
prefixes, browser-specific workarounds and hacks.
eCSStender will then automatically expand your
code to deal with all the specifics of making your
code work cross-browser.
COFFEESCRIPTjashkenas.github.com/co� ee-script/
Co� eeScript is a small interpreted language
that compiles into JavaScript. The idea is that
Co� eeScript makes it quicker and easier to code
complicated routines, without the need to deal with
the (sometimes) inaccessible syntax of JavaScript.
One for the purists, this o� ers a great way to rapidly
develop functionality without getting too bogged
down in the code itself.
#GRIDhashgrid.com
#grid is a simple tool that inserts a layout grid into
your webpage, allowing you to create pixel-perfect
layouts and test across di� erent browsers. Activated
with a keyboard shortcut, the jQuery plug-in is
adaptable to work with your preferred grid size,
including gutters and multiple columns.
PRIMERwww.primercss.com
This simple and elegant little tool converts your
pasted HTML into an empty CSS stylesheet ready
for your visual styles. Copy and paste your markup
into the box on-screen and Primer will output an
empty set of CSS nodes based on the IDs and
classes within your HTML, ready for styles to be
applied. Ideal for designers who like to code the
structure of their site, then apply styles!
ANIMATE.CSSdaneden.me/animate/
Animate.css is a library of preset CSS animations
rendered entirely using standards-compliant CSS3,
but designed to work across all CSS3-capable
browsers. The library is a genuine time-saver
especially when you want to add a little sparkle
without resorting to rolling your own e� ects. The
library is simple to use, with a basic configuration
possible to minimise the amount of code required
such that only the features you need are included.
CAKEPHPcakephp.org
This is one of several rapid development tools that
provide a basis for server-side development without
the need to create all the standard plumbing from
scratch. O� -the-shelf support for database access,
validation, authentication and translations are all
included, and a series of boilerplate ‘sca� olding’
features allow you to develop application
prototypes quickly without having to worry about
how to structure your system.
HTML5 BOILERPLATE html5boilerplate.com
This simple template allows you to quickly develop an
HTML5-compliant page design. As well as including standard
page elements such as <head> and <body> sections, it
o� ers pre-built support for responsive layout, smartphone
touch icons and Google Analytics, and comes with the most
common libraries for rapid development – including jQuery,
Modernizr and Normalize.css. An ideal starting point for any
new HTML5 project, it’ll save you a huge amount of time.
VIDEO JSvideojs.com
The premise is simple: create video elements on your
page using standards-compliant code and the Video
JS library will automatically create fallback code for
non-HTML5-capable browsers using Adobe Flash.
The fallback works across browsers that don’t support
the available codecs for your video too – allowing you
to render HTML5 video using H.264, say – but falling
back to Flash where this codec isn’t available. Video JS
is great to work with and removes all the headaches
associated with deploying video to the web.
DEVELOPMENT
JS BINjsbin.com
JS Bin is an online JavaScript/HTML/CSS
development and testing suite, allowing you to
quickly prototype and develop functionality without
having to generate standard markup, or download
and include libraries manually. It allows you to save
your prototypes, convert them to a variety of formats
and quickly implement di� erent libraries – all with the
click of your mouse.
GET YOUR HANDS ON A HOST OF READY-MADE TOOLS, LANGUAGES AND FRAMEWORKS TO ENSURE THAT THE DEVELOPMENT PROCESS RUNS SMOOTHLY
JUICERbit.ly/xDXhW
This command-line tool combines, merges and
minifies JavaScript and CSS files, reducing the number
of dependencies for your website, speeding up
loading times. Crucially, it allows you to continue to
develop in separate files for di� erentiation of logic
and levels of presentation to your preference, but
outputting a single CSS file and a single JS file at the
end for production use.
feature ____________________________________________________________________ 47
APPSADOBE AIRwww.adobe.com/products/air.html
Adobe Integrated Runtime (AIR) allows developers
to package applications written in standard web
technologies into native apps for use across di� erent
devices, including desktop machines (both Windows
and Mac) as well as app stores for Android, Kindle,
iPhone and iPad. This allows web designers to use
their existing skills to create sophisticated desktop
and mobile apps, and access new revenue streams
and selling opportunities, without having to re-skill.
EVERNOTEevernote.com
Evernote is an online scrapbooking service that
allows you to store, annotate and retrieve snippets
from a wide range of sources. It’s an ideal planning
and preparation tool when researching a particular
project, but it’s also great as a solution for recording
and referring to inspiration material during the design
stage of a website build.
DOCHUBdochub.io
DocHub is a simple reference library of
documentation for a raft of common web
technologies including CSS, HTML, JavaScript, the
Document Object Model (DOM), jQuery and PHP.
Simply select a technology, then enter a search term
to filter the list of documentation and access clear
explanations and example code.
WEB DEVELOPER TOOLBARchrispederick.com/work/web-developer/
The ever-popular web developer extension for
Chrome and Firefox is still worthy of being in every
developer’s toolbox as it o� ers a wide range of
tools to help interrogate and analyse webpages in
the browser. This tool includes useful functionality
to outline and identify DOM elements, edit styles
directly on the page and control scripting.
SENCHA TOUCHwww.sencha.com/products/touch
Helping you to develop mobile optimised websites
that look and feel like native apps, Sencha Touch
o� ers a full development environment – including
support for smartphone-only features such as touch
screen and accelerometer. Although it uses a bespoke
method for generating views, requiring a good
understanding of JavaScript, it’s a powerful platform.
THREE.JSmrdoob.github.com/three.js/
For advanced 3D visualisations rendered in the
browser, it’s much quicker and easier to use a
library such as three.js. This powerful framework
deals with a lot of the more complex aspects of
the WebGL language, making it straightforward to
generate simple (and complex) 3D scenes using
cameras, lights and primitive shapes. And it works
across di� erent devices and rendering engines.
CHART.JSwww.chartjs.org
It’s becoming more
important to be able to
generate graphics inside
the browser, using live
data sources to interpret
and present data in a
visual manner. Chart.js is
one of many libraries that
make this process easier
for web developers by
providing a structured
framework to develop
rich, interactive <canvas>
graphics. A number of
features make it stand out
from the competition.
GITgit-scm.com
Git is free, open source
version control system that allows you to take control
of your website assets. It supports local branching,
staging and deployment. When combined with the
online repository GitHub, Git provides an extremely
reliable and e� ective way to keep track of code
changes, control access and publication – surpassing
many commercial alternatives. Some designers don’t
bother with version control, but if you find yourself
saving files with names such as version2finalr3 you’ll
immediately benefit from the control Git o� ers.
JQUERYwww.jQuery.com
jQuery is a JavaScript framework and library that
heralded the arrival of rich user interfaces and
advanced user interaction on the web, without the
need for plug-ins. The library makes it simple to
create animations, validation and UI controls with
the minimum of code. As well as being extremely
utilitarian, it also helpfully abstracts the di� erences
between di� erent browser implementations of
JavaScript and the DOM making it much quicker.
SPLASHUPwww.splashup.com
Splashup is a free browser-based image editor that
allows you to generate bitmap graphics without
having to install any software on your computer. The
app integrates with a number of online photo sites
including Picasa and Flickr, and o� ers many of the
same tools you would find in the likes of Photoshop,
without the price tag or download!
Make it easier to reuse elements of your
code later on by adding good commenting
in your code as you go. You can make use of
preprocessor scripts to strip out comments
before you publish a website live, while retaining
your comments in the development files.
REUSE
SEO DOCTORhttps://addons.mozilla.org/en-us/firefox/addon/
seo-doctor/
This Firefox plug-in is typical of a number of di� erent
SEO browser add-ons, each of which broadly o� ers
the same level of functionality. The premise is that by
handling the common search engine optimisation
(SEO) mistakes and errors, you can improve your
website’s performance in the search engines, thereby
increasing tra� ic to your site. SEO Doctor has a
number of handy features including the ability to
track non-indexable content, link statistics, and a
health report on the status of basic SEO-relevant
features in your HTML coding. Overall, this is a great
entry-level tool that can help you ensure you’ve
avoided the most common obstacles.
48____________________________________________________________________ feature
PROMOTIONONCE YOU HAVE YOUR WEBSITE SET UP, YOU’VE STILL GOT SOME WORK TO GET USERS BROWSING AND EXPERIENCING YOUR WORK… THESE TOOLS WILL HELP YOU DO JUST THAT!
The web has become increasingly social-
oriented over the past few years, and this is
unlikely to change any time soon. For this
reason, it’s absolutely essential that you engage
with the primary social networks and use them
as a channel to drive tra� ic to your website.
SOCIAL
FACEBOOK DEVELOPERSdevelopers.facebook.com/
Facebook has become a destination on the web
rather than just another social network. Increasingly,
consumer-orientated websites are producing
Facebook apps – e� ectively a version of the website
designed to sit inside the Facebook environment and
integrate with the built-in authentication and user
account systems. By repurposing your web content
to be served through the Facebook platform, you’ll
open your content up to easier sharing and an entirely
new marketplace that you might otherwise struggle to
address. So it’s well worth registering for the Facebook
developer programme and using the platform as
another channel through which to reach web users.
GOOGLE ANALYTICSwww.google.co.uk/analytics/
For free website intelligence, there’s not much
available to beat Google Analytics. This tool o� ers a
full suite of analysis and optimisation data, helping
you track and monitor usage, manage conversions
and goals, and improve your users’ experience. As
well as the standard toolset common to all website
statistics packages, Analytics also allows you to
view real-time data as visitors hit your website,
track what keywords lead to the most engaged
visitors, and where money spent on Google
AdWords o� ers the best return on investment.
HOOTSUITE hootsuite.com
HootSuite o� ers a single point from which you can manage and maintain your accounts with all the common
social networks. As social networking becomes increasingly important in the marketing and promotion of online
businesses, it’s now crucial to both have a presence and actively leverage the networks to help provide good
customer service, update your visitors/customers and promote your website. HootSuite is especially useful in this
regard as it brings together all the main networks into a single interface which allows you to monitor and track
interactions, push out status updates and service messages, and maintain customer relationships easily.
ADD THISwww.addthis.com
As the web has become more social network
orientated, it’s become increasingly important that
you help visitors to spread the word about your site.
AddThis o� ers a customisable suite of tools that you
can integrate into your site design with exactly this
purpose in mind; there’s no better recommendation
than a personal one! Simply choose the buttons,
functionality and style you’d like to use, and copy/
paste the code into place. You can also access basic
analytics and usage statistics to help you improve the
performance of your website on the social networks,
making this an invaluable promotion tool.
interactions, push out status updates and service messages, and maintain customer relationships easily.
Advertise on Google. Pay only when people click on your ad.
Pay As You GoAdvertising
For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you only pay when they click to visit your website. So you get exactly what you pay for – more customers. And because this is pay-as-you-go advertising, you have complete control.
Control how much you spendYou can set a daily spending limit and an amount you’re happy to pay for people to click on your ad. The price is chosen by you, not us, so you never have to worry about going over your budget.
Control who sees your adYour ad will only appear when potential customers are searching online for relevant terms you’ve chosen to describe your business.
Control where and when they see itYou can choose to target your audience by location and time: attract local customers during your opening hours or, if you’d rather, promote yourself to a global audience round the clock.
Don’t miss out – try it today We’ll turn your first £25 of advertising into £100*. To start attracting new customers today:Off er missing?
Don’t worry, someone in your company may have beaten you to it. Track them down and
make sure their
£25 is turned into £100*
Off er only available to businesses in the UK.
†Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone or call from abroad. Support is available in English only. Offer subject to website and business qualification.
Terms and conditions apply. Promotional credit can only be used for AdWords accounts that are less than 14 days old by advertisers with a billing address in the UK. In order to activate this offer, you need to enter the promotional code through the Billing tab in your account before 31/07/2013. Promotional codes have no promotional value and entry of the promotional code serves only to begin your qualification for the associated promotional credit. To qualify for the promotional credit you must accrue advertising charges in the amount of £25 within 31 days of entering your promotional code. For example, if you enter the code on 05/07/2013 you’ll have until 05/08/2013 to accrue advertising charges in the amount of £25. In all circumstances, you must enter your promotional code before 31/07/2013 in order to activate this offer. Your account must be successfully billed by AdWords and remain in good standing in order to qualify for a promotional credit. The promotional credit will be applied within approximately 5 days of your account reaching the threshold for accrued advertising charges specified above, as long as you’ve activated your account using the promotional code and fulfilled all requirements stated in the offer. Once applied, the promotional credit will appear on the Billing Summary page in your account. For the complete terms and conditions, see http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated under the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, Ireland. Copyright 2013. Google and Google AdWords are trademarks of Google, Inc. and are registered in the US and other countries.
Visit google.co.uk/adwords
Or call 0800 169 0478† to get your account set up and optimised for free by the AdWords Experts.
Modern web browsers are able to render procedural graphics but it can get complex – Raphaël JS makes it straightforward
Create vector graphics in the browser with Raphaël JS
tools | tech | trends Dreamweaver (or web editor of choice)expert Sam Hampton-Smith
rawing vector graphics in the
browser used to be the sole
preserve of plug-ins such as
Adobe Flash or Microsoft
Silverlight. But, with the
adoption of the Canvas
specification over the past few
years, it’s now practical to draw
using an API within the browser
without needing any plug-ins.
Just because it’s possible, however, doesn’t mean
that it’s simple. Understanding how the context
works, drawing and filling can become unwieldy and
confusing very quickly. Thankfully, there are a
number of di� erent JavaScript libraries available that
can break things down and simplify the whole
process. Raphaël is a great choice because it also
provides easy access to animation tools and
interaction events.
In this tutorial we’ll take a look at how you can get
started with Raphaël, using it to generate a simple
particle system. Once you’ve completed the steps
shown on these pages, you’ll know enough to be
able to apply Raphaël to games, infographics or
animation, whatever takes your fancy.
D
01 A basic pageAll of our vector graphics in these steps will be
created using the Raphaël JavaScript library, so we don’t
need much in the way of a HTML page to get started.
Quickly create a blank document with a single <div>
element. Give the <div> an ID of mycanvas and save
your file as index.html.
001 <!DOCTYPE HTML> 002 <html lang=”en”> 003 <head>
004 <title>Simple 2D Particle system</
title>
005 <meta charset=”utf-8”>
006 <style type=”text/css”>
007 body {
008 margin: 0px;
009 background: #000;
010 }
011 #mycanvas {
012 width: 600px;
013 height: 600px;
014 position: relative;
015 margin: auto;
016 }
017 </style>
018 </head> 019 <body> 020 <div id=”mycanvas”></div >
021 </body> 022 </html>
02 Include RaphaëlHead over to http://raphaeljs.com and
download the production script for inclusion on your
page. Once you’ve grabbed it, add the library to your
page by using <script> tags in the <head> section of
your page. Create a blank JavaScript file and add a
second <script> tag in your HTML to point to it. This will
hold our vector-graphic code.
001 <script src=”scripts/raphael.js”></script> 002 <script src=”scripts/vector.js”></script>
03 Create the canvasBefore we can do any drawing, we need to
create a canvas to work with. Raphaël o� ers two
di� erent ways of doing this – either by creating a
surface relative to the viewport window, or by attaching
a canvas to an existing element. We’ve got a <div>
waiting for this purpose, so we’ll use the second
method. Add the code shown to your vector.js file.
001 canvas = Raphael(“mycanvas”);
04 Basic drawingWe’re now ready to do some basic drawing in
the browser! As we already have a 600px square
canvas (these dimensions can be modified to suit)
ready to go, we can plot and draw lines as we please
inside this space. Note that the origin (0,0) is in the
top-left corner of the canvas, rather than the bottom-
left as you might have expected.
50 __________________________________________________________________ tutorials
<tutorials>Create vector graphics in the browser with Raphaël JS
On the CD• Completed HTML• CSS• Images
05 Draw a circle!There are a number of built-in methods that can
be found within the Raphaël library which make it
simple to create primitive shapes. A great example to
start with is the humble circle. Let’s draw one now by
adding the code shown. This code draws a circle with a
radius of 100px, at the point 200px on the X-axis, and
300px on the Y-axis.
001 canvas.circle(200,300,100);
We’ve only scratched the surface of drawing in
Raphaël in this tutorial. There’s a lot more you can
do – read the documentation at http://raphaeljs.com/
reference.html for more!
Read the documentation
tutorials ____________________________________________________________________51
<tutorials>Create vector graphics in the browser with Raphaël JS
06 Draw and forgetYou’ll notice that we didn’t create any reference
to our circle as we drew it. If you’re going to want to do
something to your drawn elements at some later stage,
you’ll need some way to refer to them. Change your
code to create a reference as shown. This will allow us to
animate the circle later.
001 thecircle = canvas.circle(200,300,100);
07 Drawing linesAs well as simple shapes, there is also the option
to draw paths. Paths are shapes that don’t necessarily
close and can be anything, eg a three-sided square. If a
path is not closed it will render as a simple line. To
overcome this issue we need to provide a fill and/or
stroke (outline attribute) to them. Lines are started with a
lowercase L, and are drawn relative to the previously
drawn point. Add the code shown below to try this out.
001 // M moves the starting point, l draws a line, z completes a path
002 // draw a line straight down 50px from starting point 100,100
003 var mypath = canvas
path(“M 100 100 l 0 50”);
08 A simple particle systemWe’re going to use the circle primitive to create a
simple particle system that throws lots of particles out
into our canvas over time. Remove your code for
drawing the path, and return to your simple circle. We
need a way to create many circles (or particles as we’ll
now refer to them). Let’s create an array to hold them.
001 // Create an array for our particles 002 particles = [];
003 function Particle() {
004 005 // the starting position of the
particle
006 this.posX = 300;
007 this.posY = 300;
008 this.size = 10;
009 this.red = 0;
010 this.green = 0;
011 this.blue = 0;
012 013 // the velocity
014 this.velX = 0;
015 this.velY = 0;
016 017 // Update method for the particle
object
018 this.update = function() {
019 020 }
021
<Above• Our final script creates a simple particle system where the particles are generated automatically and fly off in every direction. Each particle is a vector object generated by Raphaël, and has a random colour, direction and size
We’ve created our own animation loop in this tutorial,
but Raphaël actually has a handy built-in animation system. Check out the
documentation for more helpful information
and examples.
Raphaël’s built-in animation
52 ������������������������������������������������������������������� tutorials
<tutorials>Create vector graphics in the browser with Raphaël JS
022 // Draw method for the particle
object
023 this.render = function() {
024 thecircle = canvas.circle(this.
posX, this.posY, this.size);
025 }
026 }
09 Add to the arrayEach time we draw a particle, we’ll add it to the
array, allowing us to keep track of where on the canvas it
is, and what direction it’s moving in. We can use the
push() method to populate our array with the particles
as we create them. Try this with the code shown.
001 // add it to the array 002 particles.push(particle);
10 Random movementTo give our animation some life, we need our
particles to fire off in every direction. We can achieve this
by giving each particle a preset velocity expressed in
terms of X and Y variables. If the velocity on the X axis is
less than 0, the particle will move left, while if it’s positive
it will move right. Add the code shown to create random
velocity variables.
001 // give it a random x and y velocity 002 particle.velX = (Math.
random()*20)-10;
003 particle.velY = (Math.
random()*20)-10;
004 particle.size = parseInt(Math.
random()*40);
11 RedrawWe need to do several things before we can see
our particles animating. Firstly, we’re going to want to
redraw the scene every so often, and secondly we need
to update the position of our particles when we redraw
them. Let’s create the animation loop first. Add the code
shown to do this.
001 function loop() {
002 003 // clear the canvas
004 canvas.clear();
005
006 // iteratate through each particle
007 for (i=0; i<particles.length; i++) {
008 var particle = particles[i];
009
010 // render it
011 particle.render();
012
013 // and then update it ready for
the next loop
014 particle.update();
015 }
016 }
12 Calculate positionsNow we’ve got an animation loop running (and
be sure to note that we’ve used requestAnimationFrame
rather than the old-fashioned setInterval approach), we
can use our callback function to calculate the new
position of each particle and draw them on the canvas.
To do this, add in the code shown here.
001 // Update method for the particle object 002 this.update = function() {
003 // add the velocity to the current
position
004 this.posX += this.velX;
005 this.posY += this.velY;
006 }
13 Set the colourThere are several things that we can still do to
improve the look and feel of our particle system. We
need more particles to be generated, but first let’s make
the particles look a bit more attractive. We’ll set them to
have a random colour by generating random values for
R, G and B. The code for this uses the same approach as
for the velocity.
The traditional way to generate animations in the
browser window has been to use the setInterval() or
setTimeout() methods to set up a change that will
happen after a specified period of time. Do it often
enough, and you get the sense of movement
required to generate an animation.
The problem with this approach is that all
browsers render JavaScript at a different speed, so
you might ask for the function to be called every
100 milliseconds, but in some browsers it will take
120ms, leading to different speed of animation.
Additionally, both setInterval and setTimeout
continue to run, even if the browser tab isn’t active
– leading to battery drain and processor slowdown!
A better option is requestAnimationFrame, which
will only render when required, taking into account
the visibility of the tab, and the rendering
capabilities of the browser.
RequestAnimationFrame versus setInterval
<Left• You can generate as many different coloured particles as you like to create an endless stream on the canvas
<Above • The Raphaël website includes a collection of demos showing off the library’s capabilities
tutorials ___________________________________________________________________ 53
001 // create the Raphael element
002 canvas = Raphael("mycanvas");
003 // Create an array for our particles
004 particles = [];
005 (function animloop(){
006 // set this function to run periodically
007 requestAnimFrame(animloop);
008 // when the function runs, call the loop function
to update our particles
009 loop();
010 })();
011 012 //
013
014 function loop() {
015 // make some particles
016 makeParticle(4);
017
018 // clear the canvas
019 canvas.clear();
020
021 // iteratate through each particle
022 for (i=0; i<particles.length; i++) {
023 var particle = particles[i];
024
025 // render it
026 particle.render();
027
028 // and then update. We always render first so
particle appears in the starting point.
029 particle.update();
030 }
031 }
032
033 function makeParticle(particleCount) {
034 for(var i=0; i<particleCount;i++) {
035
036 // create a new particle in the middle of the stage
037 var particle = new Particle();
038
039 // give it a random x and y velocity
040 particle.velX = (Math.random()*20)-10;
041 particle.velY = (Math.random()*20)-10;
042 particle.size = parseInt(Math.random()*40);
043 particle.red = parseInt(Math.random()*255);
044 particle.green = parseInt(Math.random()*255);
045 particle.blue = parseInt(Math.random()*255);
046
047 // add it to the array
048 particles.push(particle);
049 }
050 }
051
Code libraryBreaking it downOur particle system is very simple, but uses some concepts that are very handy for generating advanced animations (the full code can be found on the disc)
Our main rendering loop generates some particles, then renders all existing particles before updating them ready for the next time.
Our create particle function generates a random velocity, colour and size for each particle before adding to the particle array.
We use Raphaël to create the canvas element, then create a simple repeating animation loop that’s called each time the browser is ready to render a frame.
<tutorials>
001 particle.red = parseInt(Math.random()*255);002 particle.green = parseInt(Math.
random()*255);
003 particle.blue = parseInt(Math.
random()*255);
14 More particles!Each time the animation callback is fired, we can
add some more particles into the mix. This will create
the effect of an endless stream of coloured particles
firing from the centre of the canvas. Add the code
shown to create the additional particles within the
animation callback function. Note that each particle is
pushed into our array.
001 // make some particles 002 makeParticle(4);
15 Browser slowdownYou may notice that your browser starts to get
sluggish pretty quickly as you run this code. This is
because we’re creating a massive array of particles, and
even when we can’t see the particles on the canvas any
more, we’re still calculating their position. Let’s deal with
that by removing particles we can’t see any more.
001 // remove particles we can't see any more
if (this.posX>600 || this.posX<0
|| this.posY>600 || this.posY<0)
002 particles.remove(this);
16 Strip the arrayNext we need to get rid of the empty references
in our array, so we’ve created a prototype function for
the array object that will parse an array and remove
empty references by splicing. If you don’t completely
understand this process, don’t worry – just copy the
code and trust that it works!
001 // remove the empty space from our array 002 Array.prototype.remove = function() {
003 var what, a = arguments, L =
a.length, ax;
004 while (L && this.length) {
005 what = a[--L];
006 while ((ax = this.indexOf(what))
!== -1) {
007 this.splice(ax, 1);
008 }
009 }
010 return this;
011 };
17 Test and perfectFinally, test in your browser to see the completed
effect. Now you can try extending the particle system by
using different primitive shapes from the Raphaël library,
or making the system respond to mouse input. You can
also use the built-in animation tools found within the
library to simplify basic animation.
Create vector graphics in the browser with Raphaël JS
54 ___________________________________________________________________ tutorials
<tutorials>Build a responsive WordPress theme with Reverie 4
Put together a responsive WordPress blog theme with the Reverie 4 HTML5 framework
Build a responsive WordPress theme with Reverie 4tools | tech | trends WordPress install files (available at wordpress.org/download/), Reverie4 Framework zip (available at themefortress.com/reverie/), Orbit Slider Plugin (available at wordpress.org/extend/plugins/wp-orbit-slider/) expert Richard Lamb
ordPress is one of the
most versatile and
user-friendly web
platforms currently
available. From the
budding blogger to the
business looking for a web
presence, WordPress and its many associated plug-ins and
themes can o� er even the most inexperienced web
designer easy entry into website creation.
However, for those looking to move beyond installing a
pre-built theme, there are a number of excellent, and free,
blank templates available that can be easily edited to create
something more personal. With the rise of responsive web
design, a lot of these templates o� er out-of-the-box
responsive layouts, including WordPress’s own Twenty
Twelve default theme.
Among the best of these blank templates is Reverie,
based on Zurb’s superlative Foundation framework. Reverie
4 is the most recent release of the fluid theme, and it
includes significant changes to both the structure and
syntax, embracing the mobile-first ethic for the first time.
Reverie makes building your very own responsive theme
simplicity itself.
This tutorial assumes the user has some basic
knowledge of WordPress installation and HTML editing.
Also, while Reverie 4 is built for ideal use with SASS, we will
keep the focus of this project on Vanilla CSS. So, let’s make
a responsive, colourful, movie blog!
W
On the CD• All step code
01 Install WordPressOnce you have installed your WordPress site, and
you have decided on the basic structure, such as the blog
title, pages, and menu items, it will display using the default
theme, Twenty Twelve. Not a bad template, but we want to
use the superior Reverie 4.
02 Install ReverieIn the site’s dashboard area, proceed to the
left-hand menu. Click on Appearance> Themes> Install
Themes. Select Upload and using the Choose File window,
locate your Reverie zip file. Hit Install Now and once that
has completed, click on Activate. Now refresh your site and
you will see the Reverie template take over.
03 Check the responsivenessReduce your screen size and see that the elements
are already responding. Sidebar elements stack themselves
below the main content, forming a single column. Pay
particular note to the menu which, under a screen width of
768 pixels (Reverie 4 has only this one cut-o� point),
converts to a drop-down. The basics are now in place.
04 Reverie file structureReverie 4’s structure di� ers from earlier releases,
which followed the standard WordPress structure. Now the
style.css located in the theme’s root is largely redundant,
replaced by a stylesheet of the same name in the CSS
folder. Also, whereas large portions of necessary styles
were in foundation.css, most of this has now been moved
to that same stylesheet.
05 Setting your backgroundYou have a choice of setting your background in
either the CSS (see below), or with the basic customisation
function which WordPress o� ers. From the Dashboard,
click on Appearance> Themes and Customize, next to the
theme thumbnail. From the left-hand menu select
Background Image and upload your image, or select
Colors. Then Save & Publish.
001 body { 002 background: url(../img/bg.jpg) fixed; 003 }
06 Understanding Reverie’s recent changes
Those familiar with earlier editions of Zurb’s framework will
notice a change in syntax for classes. Rather than declaring
<div>s as one number of columns, eg class=”twelve
columns”, Reverie 4 declares each <div> in small and large
column sizes, eg class=”small-12 large-7 columns”. This
allows more control in the markup between device sizes
and a more e� icient build.
001 <div class=”row”> 002 <div class=”small-2 large-4
columns”>...</ div>
003 <div class=”small-4 large-4
columns”>...</ div>
004 <div class=”small-6 large-4
tutorials ___________________________________________________________________ 55
<tutorials>Build a responsive WordPress theme with Reverie 4
columns”>...</ div>
005 </div>
07 Your blog logo It’s very simple to swap out the standard blog title
for a more personal logo image for your blog. Using the
new syntax, open up the header.php file (wp-content/
themes/reverie-master/header.php) and locate the title
declaration on line 77. Remove the <h1> tag and replace it
with a call to your logo image that you want to use.
Remember, you want the logo to sit at the left-hand side at
full-width, but fill the screen at mobile.
001 Replace: 002 <h1><a href=”<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>”><?php
bloginfo(‘name’); ?></a></h1>
003 With: 004 <div id=”logo” class=”small-12 large-7 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/logo.png”/></div>
08 Extra stylingYou will want to add in your personal CSS styles as
you go along. The easiest way to do this is to add any fresh
styles to style.css (wp-content/themes/reverie-master/css/
style.css). Scroll to the bottom and create a comment, ‘my
styles’. Place all your new styles under here so you can
easily keep track of your changes. Then give your new
logo some room to breathe.
001 /* my styles*/ 002 #logo {
003 margin:15px 0; 004 }
09 The header areaTo change your header background, locate line
4554 of style.css. Remove header.row from the row cluster
and place it alone in your new section with an opaque
black value. Remove the underline in the header by
deleting the <hr/> tag beneath the logo in header.php.
001 header.row { 002 background-color: rgba (0, 0, 0, 0.9); 003 }
10 Navigation barThe navigation bar needs to be highlighted. There
are several areas where changes to the background colour
must be made to encompass the blog title, <ul> elements
and the search bar (for full-width). Change the background
colour on lines 2736, 2859, 2953, 3008 and 3071 from the
dark-grey to the red of the logo.
001 .top-bar { 002 overflow: hidden; 003 height: 45px; 004 line-height: 45px; 005 position: relative; 006 background: #9a0510; 007 }
11 Custom home pageTo exert more control over how your front page
looks, you need to create a custom home page. Locate the
file page.php in the theme folder. Copy it and rename the
copy home.php. WordPress will automatically look for this
file name when loading the site. Now time for some editing.
And how about a few posts to show the results?
12 Installing Orbit SliderReverie comes with the responsive Orbit Slider
scripts pre-packed. You will need the Orbit Slider plug-in to
complete the circuit. Once you have this installed and
activated, open home.php and add a slider <div>
containing the orbit shortcode, just below the main content
<div>. You can set the slides in Orbit’s option page (from the
Dashboard left menu).
001 <div class=”small-12 large-8 columns”
002 role=”main”> 003 <div id=”slider”> 004 <?php echo do_shortcode(‘[orbit- slider]’) ?>
005 </div>
13 Orbit Slider optionsThe Orbit Slider comes with many options, which
can be accessed from the Dashboard menu under Slides.
From here you can set the transition speed, style, captions
and navigation elements. Slides can be added individually
or by category. Upload a few slides and test it. The default
width for the slides is 540px, but they will fit the <div> in
which they sit.
14 Creating post boxesThe latest posts listed on the homepage look better
boxed and with a thumbnail. On home.php, close the entire
loop in a ‘post_box’ <div>, which we will style later. In the
‘entry-content’ <div>, replace ‘the_content’ with ‘the_excerpt’.
This will display a snippet of each post. Then add a
thumbnail for each post at the start of the ‘post_box’ <div>.
001 <?php /* Start loop */ ?> 002 <?php while (have_posts()) : the_post();
?>
003 <div class=”post_box”>
004 <div
class=”thumbnail”><?php the_post_
thumbnail(‘post-thumbnails’); ?></div>
005 <article <?php post_class() ?> 006 id=”post-<?php the_ID(); ?>”> <header>
007 <h1 class=”entry-title”><a
href=”<?php the_permalink(); ?>”><?php the_
title(); ?></a></h1>
008 <div class=”meta”><?php reverie_
entry_meta(); ?></div>
009 </header>
010 <div class=”entry-content”>
011 <?php the_excerpt(); ?>
012 </div>
013 <footer>
014 <?php wp_link_pages(array(‘before’
=> ‘<nav id=”page-nav”><p>’ . __(‘Pages:’,
<Clockwise from top left> • Picture background or colour? Play around with the easy interface and see what you like
• It’s worth the extra effort to use a logo image instead of the standard text title
• Reverie makes it easy to give the header area a separate style, and give your site more colour
• The top navigation, perfect for mobile browsing, is a new addition to Reverie’s arsenal
56 ___________________________________________________________________ tutorials
<tutorials>
019 .thumbnail img { 020 margin:0; 021 } 022 .entry-title { 023 font-family: ‘Amatic SC’, cursive; 024 font-weight: 700; 025 margin-top: 0em; 026 margin-bottom: 0.2em; 027 text-rendering: optimizeLegibility; 028 line-height: 1.4; 029 font-size: 2.5em; 030 } 031 .entry-title a{ 032 color:#ffb016; 033 } 034 .entry-title a:hover { 035 color:#ef0b1b; 036 } 037 a { 038 color:#9a0510; 039 } 040 .entry-content { 041 font-size:0.80em; 042 } 043 .meta { 044 font-size:0.8em; 045 } 046 @media only screen and (max-width: 767px) { 047 .entry-title a {
048 font-size:1em;
049 }
050 }
16 Tidy upYou will need to add in a margin to create some
space between the content and the header. In header.php,
‘reverie’), ‘after’ => ‘</p></nav>’ )); ?>
015 <p><?php the_tags(); ?></p>
016 </footer>
017 <?php comments_template(); ?>
018 </article>
019 </div> 020 <?php endwhile; // End the loop ?>
15 Post box stylingGive the post box a black background, with a red
border, 10px padding and a 10px bottom margin. Change
the font for the entry-title h1 to, say, Amatic from Google
Fonts, and change the colour. Also reduce the size of the
meta and snippet text and make it white. Arrange the
thumbnail to sit left-side. Now it’s taking shape.
001 <head> 002 <link href=’http://fonts.googleapis.com/ css?family=Amatic+SC:400,700’ rel=’stylesheet’
type=’text/css’>
003 </head> 004 CSS 005 .post_box { 006 float:left; 007 padding:10px; 008 width:100%; 009 background: rgba(0, 0, 0, 0.9); 010 margin-bottom:10px; 011 color:#fff; 012 border:2px solid #9a0510; 013 } 014 .thumbnail { 015 width:150px; 016 float:left; 017 margin-right:10px; 018 }
Build a responsive WordPress theme with Reverie 4
give the main content section an id ‘site-content’ and then a
padding-top of 15px. Additionally, a matching border for the
slider itself would tie it all up very nicely indeed. Use the
code below to complete these steps and add a border to
your CSS, along with an extra media query so that the
thumbnail occupies the full-width at mobile landscape.
001 Header.php 002 <!-- Start the main container --> 003 <section id=”site-content” class=”container row” role=”document”>
004 CSS 005 #site-content { 006 padding-top:20px;
007 } 008 #slider { 009 border:2px solid #9a0510; 010 margin-bottom:10px; 011 } 012 @media only screen and (max-width: 380px) { 013 .thumbnail { 014 width:100%; 015 float:none; 016 margin-right:0; 017 } 018 .thumbnail img { 019 margin:0; 020 }
Getting adviceNeed extra help and can’t find it on
Reverie’s download page? Head over to foundation.zurb.com/. You may
find some handy advice there.
<Above, left to right> • The Orbit Slider is responsive, versatile and both Reverie and Foundation come Orbit-ready
• Blank WordPress templates, including Reverie, come without much styling for post listings. This can be easily fixed
• A little tidying goes a long way – with borders, a well-placed margin and attention to the sidebar it’s looking good
<Below, left to right> • The footer can be as versatile as you want it to be with WordPress. Add widgets or hardcode your elements
• Don’t get so obsessed with the front page that you forget there are inner pages needing your attention
Experiment with it
This tutorial has only scratched the surface. Play around with fonts and
column widths to see what else you can achieve!
Extending the post-listing box to other pagesThe amendments we made to the post listings on
the front page, adding the thumbnail image and
enclosing all the details in a box, will be limited to
that page. If you want to extend that design to other
lists, such as the search results, you will need to
repeat those changes in a file named content.php.
Open up the file and you will see that the code is
similar to that on home.php, before we added to and
styled it. Repeat steps 14 and 15, ensuring that you
change the post title <h2> tag to an <h1 class=”entry-
title”> tag. Also make sure that you wrap the meta
information in a ‘meta’ <div>, as on home.php. Close
it in a ‘post_box’ <div> and you’ll replicate the look.
tutorials ___________________________________________________________________ 57
<tutorials>Build a responsive WordPress theme with Reverie 4
17 The sidebarEverything so far has been put in a box so why not
the sidebar? Open sidebar.php in the theme root folder. The
sidebar is an <aside> with an id, open to some styling. Give
it a black background, with a 0.8 opacity, a border, 10px
padding-top, and colour the text. Now it fits in.
001 #sidebar { 002 background-color: rgba(0, 0, 0, 0.8); 003 padding-top:10px; 004 border: 2px solid #9a0510; 005 } 006 #sidebar p,ul,h1,h2,h3,h4,h5,h6 { 007 color:#fff; 008 } 009 #sidebar a { 010 color:#ffb016; 011 }
18 The footerOpen footer.php in the theme root folder. Any
changes made here first require the <footer> tag to be
assigned an id. You may also wish to remove the Reverie
credit here. The footer is widget-ready, or alternatively you
can add your content directly in the HTML. If you would
rather not have the menu items, they can also be removed
or restyled.
001 <div class=”row full-width”> 002 <?php dynamic_sidebar(“Footer”); ?> 003 </div> 004 <footer id=”foot” class=”row full-width” role=”contentinfo”>
005 <div class=”small-12 large-4 columns”> 006 <p>© <?php echo date(‘Y’); ?>.
Crafted on <a href=”http://themefortress.
com/reverie/” rel=”nofollow” title=”Reverie
Framework”>Reverie</a>.</p>
007 </div>
008 <div class=”small-12 large-8 columns”>
009 <?php wp_nav_menu(array(‘theme_location’
=> ‘utility’, ‘container’ => false, ‘menu_
class’ => ‘inline-list right’)); ?>
010 </div> 011 </footer> 012 <?php wp_footer(); ?>
19 Adding footer contentWidgets and custom menus are an effective way to
add content to your footer, but the Reverie syntax allows
you great control over hard-coded content. Create three
footer areas, each small-12 large-4 columns wide, for an
email, logo, and social icons. The social icon <div> can also
contain four small-3 large-3 columns for each icon.
001 <footer id=”foot” class=”row full-width” role=”contentinfo”>
002 <div id=”details” class=”small-12 large-4 columns”>
003 <h2>Insult us at<br />
004 [email protected]</h2> 005 </div> 006 <div id=”logo” class=”small-12 large-4 columns”>
007 <img src=”<?php echo get_template_
directory_uri(); ?>/img/logo.png”/>
008 </div> 009 <div id=”social” class=”small-12 large-4 columns”>
010 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/facebook.png”/></div>
011 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/twitter.png”/></div>
012 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/google.png”/></div>
013 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/rss.png”/></div>
014 </div> 015 </footer>
20 Social headerHaving placed the social icons into the footer, it
might look cool to place them in the spare area on the
right-hand side of the header. This time, however, we have
five columns to play with rather than the four in the footer,
since the logo occupies seven. The icons will automatically
appear slightly larger, but will remain the same for mobile.
001 <header class=”row” role=”banner”> 002 <div class=”small-12 columns”>
003 <div id=”logo” class=”small-12 large-7
columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/logo.png”/></div>
004 <h4 class=”subheader”><?php
bloginfo(‘description’); ?></h4>
005 <div id=”social” class=”small-12 large-4 columns”>
006 <div class=”small-3 large-3
columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/facebook.png”/></div>
007 <div class=”small-3 large-3
columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/twitter.png”/></div>
008 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/google.png”/></div>
009 <div class=”small-3 large-3 columns”><img src=”<?php echo get_template_
directory_uri(); ?>/img/rss.png”/></div>
010 </div> 011 </div> 012 </header>
21 Post pagesNow click on one of your blog posts and have a
good look about to see what needs refining in those inner
pages. Actually it doesn’t look bad at all. Just a few areas
need tidying up. The post title needs a colour change, but
you can take care of that with a colour addition to the
‘entry-title’ tag we worked on earlier.
001 .entry-title { 002 font-family: ‘Amatic SC’, cursive; 003 font-weight: 700; 004 margin-top: 0em; 005 margin-bottom: 0.2em; 006 text-rendering: optimizeLegibility; 007 line-height: 1.4; 008 font-size: 2.5em; 009 color:#9a0510; 010 }
22 Test your blogIt’s always very important to take the time to check
a responsive site at all device widths before sending it out
into the wide world. Use responsinator.com or another,
similar device simulator to see how it looks at all widths.
Don’t be afraid to add in further, more specific, media
queries if needs be. Chances are you won’t. Reverie
probably has it covered.
58 __________________________________________________________ web workshop
<tutorials>
web workshopNeed an inspirational site dissected? [email protected]
Create a cool sliding and scrollable mobile menuinspiration osbornbarr.com
sbornbarr.com is a digital agency that’s set in the very heart of rural USA. Your first impressions of the
site may lead you to believe
that it is in fact promoting
agriculture, and you would
be forgiven for thinking this.
However, as soon as you explore the
actual content it becomes obvious that
this digital agency specialises in telling
your story to your clients.
The site is beautifully designed with
clean sections of content, textured side
panels, and footers that provide good
contrast. The site is fully responsive and
loses only the textured sidebar
when scaling down, and the
only content found in the
said sidebar is the logo.
This really is a great
design experience for
mobile and desktop
browsers alike.
oThe navigation of osbornbarr.com is
hidden away behind the logo with a
suitable icon to let the user know it’s
there. Clicking on it reveals the menu,
which slides in from the left-hand side;
something which is getting more
popular with mobile and responsive
designs. Where osbornbarr.com di� ers
from other responsive menus is that they
have a scrollable section on their menu
allowing more content to be added
into it. This provides a good-sized
navigation when viewing the menu
on a small-sized screen such as a
phone, while still allowing the user
access to the same information.
A sticky logoThe osobornbarr.com logo
scrolls up the page as all content does when the user scrolls down, however it
sticks to the top when it gets there. This decorative side element is lost
when the device browser window gets too small on phones and tablets. On
the left the logo is written as text and also sticks to the top left.
MenuThe menu is hidden to the left of the screen. Clicking the menu icon causes it to slide onto the screen covering the left-hand edge of the content.
ScrollTo save space on smaller-screen devices the menu makes use of a scrollable section so that content can be reached even when the screen size is small.
LogoThe logo in the top-left corner (hidden by the menu in this image) is a shortcut link back to the homepage, which saves you having to use the menu.
1 INSPIRATIONCompact navigation
Sticky logoThe right-hand side features a sticky logo that sticks to the top right. This side panel is hidden with media queries when the display gets a bit too narrow.
ContentContent is housed in a clean display of light grey; the menu in dark grey. The right bar and footer use a pattern with a wooden texture, contrasting main content.
web workshop __________________________________________________________59
Create a cool sliding and scrollable mobile menu<tutorials>
2 TECHNIQUE Mobile-friendly navigation01 Link up to the libraries
Download the nano scroller and the CSS file from
http://jamesflorentino.github.com/nanoScrollerJS/.
Place these in your website root folder and then create
a new HTML5 page. In the head section, link up the
jQuery library, the nanoscroller plug-in file and the
nanoscroller CSS file as shown in the code below.
These will power part of the menu.
001 <script src="http://code.jquery. com/jquery-latest.min.js" 002 type="text/javascript"></script> 003 <script src="jquery.nanoscroller. min.js" type="text/javascript"></script> 004 <link rel="stylesheet"href="nanoscr oller.css">
02 Style up the content We will now add our CSS for the menu. We are
making the page black and creating a panel that will
slide on and o� from the left. This will contain the nano
scrolling section of the project. A button will hold the
controls to move the menu on and o� the page.
001 body, html{ background: #111; color: #fff; height: 100%; overflow: hidden; font-family: Helvetica, Arial, sans- serif;} 002 #panel {background-color: #555; width: 180px; height: 100%; padding: 10px; position:absolute; top: 0; left: -200px;} 003 #switch {background-color: #555; position: absolute; padding: 10px; top: 0; left: 0; cursor: pointer; font-size: 3em;} 004 .nano { width: 180px; height: 300px; } 005 </style>
03 Add the document content Now simply move your cursor to the body
section of the document and then add your content div
tags as shown in the code below. Here we have the
overall side panel menu and inside that is the nano
scroll section. Everything that can scroll goes into the
content class. Any other menu elements can go below
the scrolling section.
001 <div id="panel"><div id="about" class="nano"> 002 <div class="content"> 003 <img src="img/thumb1jpg" width="180" height="113" alt="thumb1"><br><br> 004 <img src="img/thumb2.jpg"width="180" height="113"alt="thumb2"><br><br> 005 <img src="img/thumb3.jpg"width="180" height="113" alt="thumb3"> 006 </div> </div> 007 Any other menu links </div><div id="switch">></div>
04 Make it work Under the last code add the JavaScript tag as
shown in the code below then the JavaScript code. It’s
here that we initialise the nano scroller and we then add
a click function to the switch, which will subsequently
allow the menu to slide on when it is pressed, thus
revealing the scrolling list and any other menu goodies
that might exist.
001 <script> 002 var onScreen = false; 003 $(".nano").nanoScroller(); 004 $("#switch").click(function() { 005 if (onScreen){ 006 $("#panel").animate({'left':'-200'}, 'easeOutSine'); 007 $('#switch').text('>'); 008 onScreen = false;
05 Finish the code Here we set the panel to animate in if it’s not on
the screen already, which is in fact the complete
opposite of the last step, which had it animate out. Now
you need to save your work and test it in your browser
to see the panel sliding in and out of the screen
revealing a scrollable section. And, mobile-friendly
navigation has been created.
001 } else { 002 $("#panel").animate({'left':'0'}, 'easeOutSine'); 003 $('#switch').text('<'); 004 onScreen = true; 005 } 006 });
Download woodUse a search engine to find a wood
texture. Download and take into Photoshop
where we’ll start the image-editing process.
If it’s too big, crop it and we’ll handle what to
do if it’s too small in the next step.
Backgrounds are useful for giving sections
of your site a change of meaning or to
subdivide content into sections for easier
reading. We’re going to create a wood panel
e� ect like in the footer of osbornbarr.com.
3 TECHNIQUECreate some wood panels
01
Increase the canvasGo to Image>Canvas Size and
increase the size of the image. Copy the
background layer and drag to a new
location to get the background to fill the size
of image you need for your background.
02
Add a gradientAdding a black to transparent
gradient in a new layer over the top can give
a shadow or vignette e� ect if you use the
radial gradient. Reduce the Opacity to 70%
and change the blend mode to Overlay.
03
Easy-to-use navigation“The site uses a simple off-screen navigation to cut down on the amount of content shown on the screen. Clicking on the menu causes the menu to slide in and makes excellent use of screen real estate when it’s at a premium. This is a great trick for all responsive designs and can be found as part of Zurb’s Foundation 4 Framework.”Mark Shufflebottom
<comment>What our
experts think of the site
60 _________________________________________________________ web workshop
Polygonal shapeson the webinspiration nasaprospect.com
he application of geometric shapes has become highly acceptable in web design. Metro
formats is one example, but
polygonal shapes seem to
be gathering just as much
pace, finding acceptance in
more creative corners of the web.
Polygonal styles appear in the guise
of backgrounds, banners and page
elements, especially with mobile
devices. However, these styles are
more decorative than interactive. This
doesn’t seem to diminish the impact
they have, bringing contour and depth
to a website and wowing visitors.
Web designer and developer of
nasaprospect.com, Collin Hover
(collinhover.com) agrees, using this
site as a prime example of how
polygons can create exciting aesthetics.
He was contacted by US space agency
NASA, who asked him and his students
to promote space exploration to
younger web users. He tells us: “We
focused the project to appeal to [this
web demographic], looking for
something fresh, approachable,
reusable and scalable. We agreed that a
pseudo-3D polygon style had both
simplicity and complexity, looking new
but not 1900s futuristic.”
Web designers such as Hover will
work with many types of software to
create similar interesting, advanced
and ambitious looks, like the ones at
nasaprospect.com. Illustrator,
Photoshop, Cinema 4D and even open
source plug-ins like Triangulator
(somestuff.ru/I) all come in to play.
In this web workshop we explore
styles you can create in Photoshop,
and explore alternative software and
how they can be integrated into your
Photoshop workflow.
T
Form through colourUse four colours to build contour.
Lightest colour shapes go at the top,
implying highlighted surfaces; darker
ones at the bottom or where they create
folds. Both react to create 3D contour.
Apply gradientsAdd Gradient Overlay layer styles
to shape layers. Choose a Black to
Transparent gradient style and set Blend
Mode to Overlay. Alter degree and
opacity. Position to simulate 3D angles.
Lay your shapesBuild polygonal shapes using the
Pen Shape tool, aligning edges with Free
Transform controls. Activate a shape
layer and press Cmd/Ctrl+T. Hold Cmd/
Ctrl and pull control points into place.
The origami style is a clear extension of
the polygonal style. Not just by the fact
that both use polygon shapes to form
structure, but by the fact that origami
styles can be seen to be modernising.
Forms are far more expressive; textures
are being replaced by plush gradients
and this creates a sense of elements that
are more concerned with being modish,
sharp and stylish than replicating
traditional styles. Logos and banners of
this style have never looked so digital.
Modular style“Whether we see more of the polygon style on the web depends on individual project needs. It was a great fit for something intended to be playful and light-hearted, but it’s a highly modular style so it can have many uses. All the source files, including the vector images, are available at github.com/collinhover/nasaprospect.”Collin Hover
<comment>What our
experts think of the site
Plush gradientsGradient colours are applied to the backdrop to obviously transfer the viewer between scene and setting. However, as a device, these cleverly ease the bolder forms and colours, and break up monotony.
Simple yet complexThe 3D polygon visual style applied to this website has a really beautiful balance of simplicity and complexity, which although looks fresh, is not entirely 1900s futuristic.
Bold coloursSimplified colour schemes correspond very well with rudimentary shapes used to form complex polygonal elements. This helps to create a paradoxical look that is both new looking yet not obviously modern.
1
1 TECHNIQUEOrigami logo
<tutorials>
web workshopNeed an inspirational site dissected? [email protected]
01 02 03
web workshop ___________________________________________________________61
To implement the style of
nasaprospect.com export all vector
images as SVG files then link through
<img> elements. If no SVG support was
found with Modernizr they were replaced
with PNGs. The SVG file format is good
for scalability, so there’s no worry about
a mobile site, but be careful with the
amount of overlapping SVG images.
Browsers struggle to composite it all
together in real-time, as you scroll.
Drawing inspirationCollin Hover and his team created a collection of triangles and constructed each object here using a vector drawing program. They were inspired by 3D artists including Timothy J Reynolds (www.turnislefthome.com) whose portfolio sports an amazing series of low-poly isometrics.
Vector workVector drawing programs such as Adobe Illustrator and Inkscape were used to create a collection of triangles for each object. Inspiration was drawn from many 3D artists, but one more than others: Timothy J Reynolds.
SVG � lesImplementing elements in this interactive web design was a matter of exporting all the vector images as SVG files, linking them directly through <img> elements.
23
2 FUNCTIONWhen working with SVG
Polygonal shapes on the web<tutorials>
Perspective shapesStart simple, by applying a series of
polygonal shapes, using the Pen Shape tool.
Draw this with perspective, as if they are
coming towards you; make the shapes
narrow the farther they are from you.
Here we show you how to create a bold
polygonal header for your website using
little more than polygon shapes, four colours
from your swatch and a pinch of the
Photoshop Noise filter. The results are fairly
simple but can be very e� ective.
3 TECHNIQUE
Polygonal header
01
3D planeAdd adjacent polygonal shapes in a
darker colour, creating the illusion of contour
thus a 3D form. Drop the layers behind your
originals; press Cmd/Ctrl+T; hold Cmd/Ctrl,
pulling control points and corners into place.
02
Full 3DAdd a foreground using an alternate
dark tone then a background using an
alternate light tone. You now have a full 3D
polygonal header. Convert layers into a
Smart Object; add a low-value Noise filter.
03
Create a responsive design with the first preview of Edge Reflow
Design a responsive site with Edge Reflowtools | tech | trends Adobe Edge Reflow PreviewExpert Mark Shufflebottom
dobe’s new push on
HTML tools are small
applications that
integrate together or can
be used separately. These
have been branded the
Edge tools and so far
contain Edge Animate,
Edge Preview and Edge
Code, which is also
confusingly available open source as Brackets.
Previous tools focus on animation, viewing your site
simultaneously on multiple devices and a lightweight
but powerful code editor. The latest o� ering is Edge
Reflow and this focuses purely on creating responsive
designs. At present there are no code-editing facilities
within the package, and this is good for a designer who
doesn’t know HTML, javascript and CSS but needs to
put the basic site template together ready to pass o� to
a front-end developer. You cannot even put unordered
lists in for your menu or specify div names yet, but this
is likely to be a later addition.
A
Edge Reflow creates responsive designs
<Above> • The latest offering focuses purely on creating responsive designs, which will please many web designers
Install ReflowHead over to the reflow site (http://html.adobe.
com/edge/reflow/) and click the ‘Get started’ button.
You will need to create a free Creative Cloud account
and then you can download Edge Reflow Preview. After
download is completed, install the software and start it
up, ready to begin the tutorial.
Create the background
When Reflow starts, click
on the white background,
then on the styling tab.
Add a background by
clicking Backgrounds. Add
a light grey to dark grey
gradient background. Click
on the columns in the
preview window.
62 ___________________________________________________________________ tutorials
<tutorials>Design a responsive site with Edge Reflow
On the CD• Start folder• Finished folder
01
02
tutorials ___________________________________________________________________63
<tutorials>Design a responsive site with Edge Reflow
Changing view size
Once you have added breakpoints, all you
need to do is click on the purple, blue or grey
area that you’ll find on the very top bar in order
to resize the preview window to that size.
Set up the columnsIn the layout tab give the columns a max width
of 960px. Set the size to 90% again. You can also
change the size and number of columns here as well.
Save the project to your hard drive. From the cover CD
copy the ‘img’ folder over the default ‘img’ folder that
was created when you saved the Reflow document.
Draw a textboxOver to the right of the logo, draw a text box and add the text
as shown. Make sure the box floats to the right and the text aligns to
the right. In the styling tab, click on the ‘T+’ icon. Find the font ‘Abel’ and
click on it. Close this window and you will be able to add Abel from the
font drop-menu. Change the colour and add a drop shadow to the text.
Draw a boxSwitch to the draw box tool and
draw a box inside the grid for the full
width header. Hit the image tool, insert
the ‘header.jpg’ and drop it into the box.
Add another image, choosing ‘logo.png’
and position it as shown. If you click on
the document stack, it should resemble
the screenshot.
Hero textAdd another text box over the
image, position as shown and add the
text as shown. Just like the last step add
‘Patua One’ as the typeface and make its
size 2ems. Use the same colour and drop
shadow as the previous step. Save the
document and choose View>Preview in
Chrome. Resize your browser to see
when the design breaks.
Reflow the designAt 600 pixels select the hero text and turn the
visibility to hidden. Now grab the box that the logo and
menu are in and extend it downwards. Move the menu
below the logo and, in the layout panel, centre both. Set
the height of the outer box to 100% and change the
margin to 0, 0, 0, -100%. Make sure the menu text is set
to centre as well. You can preview this in Chrome now.
Add another boxExtend the document to fit full width and select
the box tool. Add a box the full width of the container
and place it directly under the hero image. Now click on
styling and add the ‘navy-blue.png’ as the background
image. Switch to the text tool and add a text box with
the text as shown above. Change the typeface to ‘Abel’
and the text colour to white.
Create a design breakpoint
Back in Reflow, drag in the design using
the slider on the right. When you get to
800px click the plus icon to add a
breakpoint. Make sure this is positioned
on 800 pixels. Now change the size of
the text that is starting to leave the
image to 1.5 and move the text box up.
Create another breakpoint at 600 pixels.
03
04
05
06 07
08
09
The interface
01 _____________Tabbed sectionsThere are two tabs on the left that denote layout and styling. The colours highlighted on the settings refer to colours for the different break points in the design.
02 _____________Four toolsThe tool bar consists of four tools: the move tool, the box rectangle tool, the type tool and the image tool. Use these minimal tools to add content to the design space.
03 _____________Media queriesAdd media queries by dragging in the slider to resize the design space. Then the plus icon in the top right is used to add a media query and break the design.
64 ������������������������������������������������������������������ tutorials
<tutorials>Design a responsive site with Edge Reflow
Floating rightTo the right of both the text and image box add
another box. Make this float to the right in the layout tab.
Then change all the margins to 0 except the top margin
which will be set to 40px. Add the image ‘tablet.png’ into
this box and make this centered. Select the outer box
and set its height to ‘auto’. Save and test this in Chrome.
Add an iconAdd a 20-pixel margin bottom to the text then add an image to
the document, selecting the icon.png image. Place it as shown here.
You may need to scale it down. Select the box behind this and change
the height to ‘auto’. Save and preview in Chrome.
White content areaMove the display back to the default full browser
width. Add a box under the last one in the display. In the
styling make the background of this white. Now add
another box, about two thirds of this box inside the first.
Now add a text box inside the last box, making it 95%
wide and 5% from the left. Add the text to this box, as
shown in the screenshot.
Remove the iconTake the design to 800 pixels and change the
font size of the text added in step 9 to be a little smaller.
Move down to 600 pixels and change the text to align
to centre in the layout tab. Make the width 90%, then
select the icon and make the visibility ‘hidden’ with the
display set to ‘none’.
Image under the textAdd the image ‘response.jpg’ and place it into
the box under the text. Resize it to 95% width and give it
a 5% left margin. Select the box around this and set the
height to auto, then select the white box holding
everything, and set the height to auto as well.
Make it scaleAfter testing in Chrome, you’ll see it
scales down pretty well. We’ll add to it by
changing how it works. Move the design
into the 600 pixel marker and move the
box floating right, down and below the first
box. Grab the first box and resize to 95%,
so it almost fills the full width.
Accessing the DOMThe Document Object Model is available at the bottom of the Reflow interface where a hierarchy structure of your current selection is displayed.
Analysing the outputAs this software is only a first preview,
the output it produces will only work
properly with Chrome, but expect that
to be resolved as further releases
become available. Think of Edge
Animate, which went through around
seven releases before version one
became available and gave the
community the ability to give
feedback and shape the future
web-design tools. The files that are
output are based upon the HTML5
Boilerplate templates (http://
html5boilerplate.com). All files are
saved in the assets folder inside the
project folder. Here you’ll find your
html file that uses the boilerplate.css
file for the boilerplate template. The
other css file is labelled ‘reflow.css’
and these are the styles generated by
Edge Reflow. The ‘img’ folder contains
your images as you’d expect. If you
want to look at CSS in Edge, click on
any element and then click on the <>
icon in the bottom of the interface.
10 11
12
13
14
15
Display in orderNow look at the box that we moved below. We want this to float
left, be 100% wide, with a 20 pixel margin top and 0 pixels for all other
margins. Save the file and preview the design in Chrome. You will see
that it seems to be working pretty well at the moment with the design
reflowing nicely as the display gets smaller.
Making the menu stand outNow nudge the menu down by selecting it and
using the cursor keys to move it down 1 pixel at a time
until it fits into the space. The yellow text doesn’t stand
out that well against the grey so we’ll add a black colour
or something suitable to the text now as well. We don’t
have to worry about too much less than 320 pixels as
there are not that many phones.
320 pixel breakTo add another break point to the design for 320
pixels, move the left slider in and click the plus icon in
the top right of the interface. Adjust it to fit to 320 pixels.
The problems are the menu and moving the content
down to create room for the menu. Choose the dark
grey box under the menu and give it a 20px margin top.
Add paddingSelect the white box in the background of the
content. In the layout tab add a 20 pixel padding to the
bottom. Select the grey box. Go to the edit menu and
choose duplicate. A copy will follow your mouse until
you click again, place this under the white box.
Add a footerDelete the icon of the arrow from
the box and change the text to a
copyright message you would expect to
see in a footer. Place the text box to the
left and add a 2% left margin and a 20
pixel top margin to the text box. This
shouldn’t need any adjustment for the
smaller screens, but just check.
Save and finishWe have now finished the design, so save it for the last time and preview it again in Chrome. You should see
your design shrink to fit the width of your browser over a variety of sizes and you’ve been able to do this in an
intuitive visual manner that makes design easy. The design and page are built on the HTML5 Boilerplate.
tutorials ___________________________________________________________________65
<tutorials>Design a responsive site with Edge Reflow
16 17
18
19
20
21
66 __________________________________________________________________ tutorials
<tutorials>Create stylish, responsive HTML5 forms
Add validation, style and an all-screen solution with HTML5 input types, attributes and CSS3
Create stylish, responsive HTML5 forms
tools | tech | trends Dreamweaver Expert Steven Jenkins
he form is a simple but
e� ective method for
feedback and
communication. HTML5
introduced a selection of
new input types and
attributes that make the
creation and validation of
forms far easier than
previous methods. Instead
of just input type=text, users can now can add url, date,
telephone and email to add instant validation to a field.
Adding an input type such as email means that the user
needs to write an email address in the correct format.
Adding the ‘required’ element means that a form cannot
be submitted until the required field has been
populated. Another interesting addition is placeholder,
which allows the inclusion of text, until the field comes
into focus, which is ideal for search fields.
Forms are typically bland, but with some CSS3 e� ects
and a little imagination, we will demonstrate how to
make them both attractive and responsive.
T
01 Basic pageThe first step is to create the basic HTML needed
for the page. We are going to assume that the initial
HTML page is already in place with HTML doctype
already defined ie, <!doctype html>. We are going to
build the form as a standalone component that can be
dropped into an existing page, pretty much ready to use.
001 <!doctype html> 002 <html> 003 <head> 004 <title>HTML5 Forms</title>
003 <input type=”text”> 004 <input type=”text”> 005 <input type=”text”> 006 <input type=”submit”> 007 </form>
05 Input typeThe first two fields are going to be names, so
they remain as text. The third is going to be an email
address, so this is changed to email, the fourth a date,
so text becomes date and the final field will be a web
address, so this needs to be made url.
001 <form> 002 <input type=”text”> 003 <input type=”text”> 004 <input type=”email”> 005 <input type=”date”> 006 <input type=”url”> 007 <input type=”submit”> 008 </form>
06 Naming fieldsForm fields need a unique name to identify
them. For instance, the first two fields are both names
but will be called firstname and surname. The email field
will simply be email, date will be startdate and url will be
webaddress. The names can be modified to whatever
you wish to call them.
001 <form> 002 <input type=”text” name=”firstname”> 003 <input type=”text” name=”surname”> 004 <input type=”email” name=”email”> 005 <input type=”date” name=”startdate”>
On the CD• HTML5Forms
folder
005 </head> 006 <body> 007 </body> 008 </html>
02 Include web fonts The form is going to be placed inside a generic
container which can be styled to suit the page. For the
purposes of this tutorial, we’ll use a background image
and a Google web font. Get the Google Web Font code
(eg Open Sans), and place in the head of the page.
03 Create a containerIt is standard practice to create a container for a
single column of fields. Create a <div> tag and name it
accordingly ie #newform. Set the width to 470px, height
to auto, add 5px padding left and right and set the
margins to auto. These can be adjusted to suit.
001 #newform { 002 width:470px; 003 padding: 0px 5px; 004 margin: 0 auto; 005 }
04 Add input fieldsThe form is going to include a selection of
HTML5-supported fields to demonstrate how they
operate. The first step is to add an opening and closing
set of form tags. We are going to use five fields and a
submit button. Start by adding five fields with input type
as text and the sixth as submit.
001 <form> 002 <input type=”text”>
<Above> • Forms can now be anything but boring and dull
It’s a date!The date input type is
currently displayed di� erently in various
browsers. Open in Firefox, Chrome, Internet Explorer,
Safari and Opera to view it in action. Chrome o� ers
the best option.
tutorials ___________________________________________________________________67
<tutorials>Create stylish, responsive HTML5 forms
006 <input type=”url” name=”webaddress”> 007 <input type=”submit”> 008 </form>
07 LabelsCurrently all the fields do not have an identity, so
a label is going to be added to each field. Add a set of
opening and closing labels above each field and name
accordingly eg, First name, Surname, Email etc. Next
add the required attribute to the fields that have to have
data to complete the form, eg email.
001 <label>First name</label> 002 <input type=”text” name=”firstname”
required> 003 <label>Surname</label> 004 <input type=”text” name=”surname” required> 005 <label>Email</label> 006 <input type=”email” name=”email” required>
08 Text stylingThe basis of the form is now in place, so it is time
to start styling. The first step is to style the text. Add the
body tag to the CSS and choose a size, weight and
colour for global text styling. This will style up the labels,
but these can be modified later on if desired.
001 font-family: “Open Sans”, Arial, sans-serif; 002 font-size: 14px; 003 font-weight: 300; 004 color: #000; 005 }
09 Full widthTo make the form more responsive, the input
fields are going to be given a percentage width. The
obvious choice is 100%, but this could be 95% if needed.
Add the input selector in the CSS and set the width to
100%, or your chosen width. This will immediately place
the labels above its accompanying field.
001 input { 002 width: 100%; 003 }
10 Input styleTo add more a bit more panache to the input
field, the text is going to be styled up and the height
fixed. We have set the height to 40px and then added
the desired font weight and size. Next it’s a good idea to
save and preview to make sure that the font and height
complement each other. Add a background colour, if
you like, to emphasise each field.
001 input { 002 width: 100%; 003 height: 40px; 004 width: 100%; 005 font: 300 24px “Open Sans”, Arial, sans-serif; 006 }
<Above> • Style the form with any font to suit its purpose
11 Make some spaceThe labels and fields currently sit right on top of
one another. So in order to give the form some space,
first add a bottom margin of 10px to the input attribute.
To add space between the text and the field, add a top
margin of 5px.
001 input {width: 100%; 002 height: 40px; 003 font: 300 24px “Open Sans”, Arial, sans-serif;004 margin: 5px 0px 10px 0px;}
12 Placeholder textThe placeholder attribute allows text to be
added to a field while the field is empty. When the field
comes into focus – ie it is clicked – and the user starts
typing then the placeholder text disappears. To add
placeholder text to any field in the form, simply add
placeholder=”your text here“.
001 <label>First name</label> 002 <input type=”text” name=”firstname” 003 placeholder=”your text here” required>
13 Date inputThe input type date renders di� erently in
di� erent browsers. Chrome users will see an arrow that
opens a complete datepicker while other browsers will
display nothing or other a simplified date picker. For this
reason the placeholder text can be called into action to
inform the user the format to input a date.
14 Value to URLThe url field allows users to add a web address
and to ensure that the field works correctly, http://
needs to precede the web address. To ensure there is
no ambiguity in how a url is added, http:// prefix is to be
included by adding value=”http://” to the input field.
001 <label>Web address</label 002 <input type=”url” value=”http://” 003 name=”webaddress”>
15 Style button The default submit button displays di� erently in
di� erent browsers. To overcome this issue, and style the
button to match the form, a selection of CSS needs to
be added. Add the following syntax input[type=submit] {
} and add any CSS styling between the brackets. Note
that a border is added to a button; to create a flat e� ect
add border: none.
001 input[type=submit] { 002 background-color: #C13A40; 003 height: 50px; 004 width: 100%; 005 border: none; 006 font-weight: 400; 007 font-style: italic; 008 letter-spacing: 2px;
009 color: #FFFFFF; 010 background-color: #FF9900;}
16 Add a title To state the purpose of a form a title can be
added, or alternatively a logo. To add a title, add a set of
<h2> tags (this could be h3), now style up the text. In our
example the text has a fixed size, a bottom border,
di� erent font to the standard text and a text shadow.
001 h2 { 002 font-size: 90px; 003 color: #FF9900; 004 text-shadow: 2px 2px #222; 005 font-family: “Oleo Script”; 006 border-bottom: 2px solid #FFF; 007 text-align: center; 008 margin: 0px 0px 5px 0px;}
17 Finish upTo give the form some interest an opaque
background has been added to the form containing tag,
plus a box shadow and a border-radius to finish. To
make the form responsive, simply resize the #newform
<div> tag and the fields will resize automatically. The
height of the form is set to auto to compensate.
001 #newform { 002 width: 470px; 003 height: auto; 004 background-image: url(images/sand02.jpg); 005 margin: 0 auto; 006 padding: 0px 1%; 007 box-shadow: 5px 5px 0px #AAA; 008 border-radius: 5px;}
AutocompleteThe autocomplete attribute is used to specify if a form
or field should autocomplete based on previous entries. By default, autocomplete is switched on. To add a level
of security, switch it o� by adding <form
autocomplete=o� >
001 #newform { 002 width: 470px; 003 height: auto; 004 background-image: url(images/sand02.jpg); 005 margin: 0 auto; 006 padding: 0px 1%; 007 box-shadow: 5px 5px 0px #AAA; 008 border-radius: 5px;}
001 input[type=submit] { 002 background-color: #C13A40; 003 height: 50px; 004 width: 100%; 005 border: none; 006 font-weight: 400; 007 color: #FFFFFF; 008 font-style: italic; 009 background-color: #FF9900; 010 letter-spacing: 2px;}
001 <div id=”newform”> 002 <form> 003 <h2>SAY HELLO</h2> 004 <label>First name</label> 005 <input type=”text” name=”firstname” 006 placeholder=”your text here” required> 007 <label>Surname</label> 008 <input type=”text” name=”surname” required> 009 <label>Email</label> 010 <input type=”email” name=”email” required> 011 <label>Start date</label> 012 <input type=”date” name=”startdate” 013 placeholder=”dd/mm/yyyy”> 014 <label>Web address</label> 015 <input type=”url” value=”http://” 016 name=”webaddress”> 017 <input type=”submit” value=”Send us your 018 request” id=”submit”> 019 </form> 020 </div><!-- //#newform -->
Code libraryStyling and validating HTML5 Creating and validating an HTML5 form is only one part of the process. CSS is used to style the form and form elements and make it responsive
The form container has a fixed width of 470px. This can be modified via media queries to fit any type of screen
Form validation can be provided by the input type. Adding the required element means that users will need to add a value before the form can be submitted. The browser will automatically display a message if no value is added
Adding the [type=submit] syntax to the input tag allows the individual field to be styled in any way as desired
68 __________________________________________________________________ tutorials
Going responsive
The input fields of a form are subject to styling the same
as other form elements. To help make the input fields
responsive, a percentage measurement is used instead of
a fixed width. Typically, this is set to 100%, but there is
scope for adjustments eg if left and right margins are 1%,
then the width could be 98% to compensate. This will
mean that the input fields will grow or shrink according to
the width of the form. The form can be a fixed width and
modified via media queries to fit the selected breakpoints
with very little code modification. Alternatively, the
width can be set to 100% making the width liquid. This
allows for the form to fit in any parent element and
theoretically any screen resolution.
<top to bottom> • Some browsers will allow a complete datepicker for your form to aid the input of specific dates
•Placeholder text is helpful to show the user what type of information is required and in which format
<tutorials>Create stylish, responsive HTML5 forms
70 _________________________________________________________ web workshop
<tutorials>
web workshopNeed an inspirational site dissected? [email protected]
Create a pop-up tooltip with fade effectsinspiration visit.uc.pt/en
ooltips can be used to provide a richer and deeper user experience. At
its simplest, the link Title
attribute is used to add
information about the
nature of a link and will
appear by default as a
standard browser tooltip. With a little
jQuery, you can transform tooltips into
an extra layer of content with which the
user can engage. As with any
refinements you make to the user
interface, you want to make sure they
do actually add value to the user
experience and that the results are
compatible across a range of
browsers and versions. You’ll
also want to ensure that your
refinements don’t interfere
with the site functionality
when accessed on a
different device, for
example a tablet.
tThis Portuguese university’s award-
winning tourist site uses image-based
tooltips to provide visitors with pictures
of the points of interest on their Tourist
Circuit map. The clean, modern and
e� ective interface encourages users to
virtually explore the campus. Hovering
over the animated location pins results in
a pop-up image and a link for more info.
Developed by Coimbra-based
Bürocratik (burocratik.com), whose
lists of awards are nearly as
impressive as their client list, you
won’t have to explore very far to
find more interesting projects.
Easiest vs bestThe workshop tooltip is based
on CSS Globe’s Easiest Tooltip and Image Preview Using jQuery (http://bit.
ly/RtCeYN). Features have been removed to make the workshop easier to follow but on a production site you’d
want to include some extra features like ensuring the tooltip always appeared within the viewport.
Clean linesThe modern appearance is helped by avoiding the now- dated look of big, round corners and drop shadows. It’s colourful and engaging with a lightness of touch.
No marginsThere is no margin around the picture that’s delineated from the illustration. The notch that points to the location pin is part of the image mask so no extra elements are needed.
AnnotationsHand-drawn annotations guide the user to the navigation options. ‘All at once’ for immediate access or ‘discover as your explore’ for the more leisurely tourist.
1 INSPIRATIONUniversity of Coimbra
A little bounceThe tooltips feature a fade in/out combined with a small bounce. They provide a pleasing experience that makes you want to keep hovering over each of them.
Explore at willThe layout leaves the visitor free to explore each of the Points of Interest in any order and is a whole world away from a boring linear list of things to see.
web workshop ___________________________________________________________71
Create a pop-up tooltip with fade effects<tutorials>
2 TECHNIQUE First the HTML and CSS01 Set up your links
The HTML for this particular tutorial is really
simple. Set up a link to your jQuery library, with either a
local-server copy or loaded from a CDN. Remember
that you will always want to use the minified version of
the jQuery library in a production environment. This will
save kilobytes (and potentially seconds) when your site
is accessed. The next step is to link to your tooltip code
and your stylesheet.
001 <title>Image Tooltip with jQuery</ title> 002 <script src="jquery-1.9.1.min.js"></script> 003 <script src="imagetooltip.js" type="text/javascript"></script> 004 <link rel="stylesheet" type="text/ css" href="screen.css">
02 Content and link The tooltip content is provided by several link
attributes. First the class is set to the value
(“imagetooltip”) that the script will be listening out for.
The rel attribute is used here to specify the image that
will appear as part of the tooltip and the title is set with
the caption content.
001 <p>We can <a href="#" class="imagetooltip" rel="demo- image.png" title="Demo image with caption">provide a link </a> to demonstrate an image tooltip with jQuery.</p>
03 Style the page In the stylesheet an ID is created for the tooltip.
It’s possible to style the tooltip extensively to create a
particular look and match the needs of your project.
Here things are kept simple with a dark-grey caption
area to appear underneath the image area with white,
centred text for the caption.
001 #imagetooltip{ 002 position:absolute; 003 background:#333; 004 padding:0px 0px 8px 0px; 005 display:none; 006 color:#fff;
007 text-align:center; 008 }
04 Finally the jQuery First the document-ready function is used to
ensure the DOM is fully loaded before the remaining
functions are executed. The .hover() function is then set
to listen out for a mouse entering or leaving the link
area. The title attribute is passed into a variable and set
to “” to prevent the browser tooltip from showing based
on the Title attribute.
001 $(document).ready(function(){ 002 $("a.imagetooltip"). hover(function(e){ 003 this.t = this.title; 004 this.title = "";
05 Building an appendage Another variable called caption has a <br/> added
to it to force the caption to appear beneath the image. A
paragraph is added to the body of the HTML built to
display with the properties declared in the #imagetooltip
ID selector and with the link attributes specified in the
HTML. An <img> is built using the rel attribute as the
image path.
001 var caption = "<br/>" + this.t; 002 $("body").append("<p id='imagetooltip'><img src='"+ this. rel +"' alt='image tooltip' />"+ caption +"</p>"); 003 $("#imagetooltip") 004 .css("top",(e.pageY - 100) + "px") 005 .css("left",(e.pageX + 50) + "px") 006 .fadeIn(500);
You can adjust the .fadeIn and .fadeOut values to suit
Selectable positioningWithin the imagetootip.js file there
are a few digits you can change. Eg the
numbers after e.pageY and e.pageX can be
adjusted to position the tooltip where you
want relative to the link.
If you have grander ambitions for your
tooltips there are huge range of resources
available that will add further improvements
and refinements to them. You may like to
take a look at several di� erent published
examples and choose the parts you like
from more than one.
3 TECHNIQUETaking it further
01
Imageless notchYou might like to add a notch to your
tooltip so that it shows which text or image
it’s related to. CSS border triangles are a
popular way of achieving this without
resorting to images.
02
Special effectsWhy stop with a simple fade-in or
fade-out? You can experiment with other
animated e� ects like little slides and
bounces, or even spins if you must, to create
more visual impact on-screen.
03
Use it or lose it“It’s remarkable how often something learned in a workshop or tutorial can be useful in some way or another on a live project. Just as encouraging a website visitor to engage with the site content provides them with a more rewarding experience, you will get the most of out tutorials and workshops by getting hands-on.”Jayson Winters
<comment>What our
experts think of the site
72 __________________________________________________________ web workshop
<tutorials>
web workshopNeed an inspirational site dissected? [email protected]
Props to CodropsThis slider technique is based on the excellent simple multi-item sliderfrom Codrops (bit.ly/UgVRTj). Some very useful functionality, including responsiveness, have been removed to keepthe workshop to a manageablesize. The addition of CSS image replacement helps re-create some of the look and feel of the Neopolitan Clothing sliders.
Create your own slider with hover effectsinspiration www.neopolitanclothing.com
ou will see sliders being utilised absolutely everywhere online, because they are a really great way to display engaging content and consequently draw people into a website. There is a
huge choice of free and premium slider
plugins, however, these will invariably
not give you the degree of control that
you need and that a custom slider will
give you. You will also find that an off-
the-shelf slider will normally cost you a
larger code ‘overhead’ than a custom
slider which only includes the features
that you need.
Understanding the building blocks
of a slider will ultimately help you to
identify where similar coding
techniques may be useful in other
situations. This workshop will show you
how you can make a slider by using
hover effects.
YSliders can be great for selling products or
services. Marketers know if we engage with
something, we’re often halfway towards
making a purchase. This is why many
online stores use sliders for displaying
products. It re-creates the real-world
experience of browsing clothes rails or
shelves. Neopolitan Clothing (www.
neopolitanclothing.com) invites customers
to explore its product range and
production process with two sliders. Its
unique look, delivered by its custom sliders
and underlying naivety, means it doesn’t
look like a retail giant so you can
experience the brand’s own personality.
Slider oneSlider one uses a ‘scrubber’, reminiscent of the interfaces commonly used for online video and allows users to move quickly or slowly to any point along the timeline.
Slider twoSlider two uses radio buttons and navigation arrows that feature in many sliders, and introduces an animation delay between each element within the slider.
FooterThe footer area cleverly suggests the continuity that an infinitely scrolling slider provides by mimicking the patchwork e� ect in panoramic montages before Photoshop.
1 INSPIRATIONSell me something
1
2
3
4
web workshop __________________________________________________________ 73
Create your own slider with hover effects<tutorials>
Hover e� ects can be a great way of providing visual
feedback and help to provide a great user experience,
but don’t go and spoil that by throwing in every hover
e� ect you can lay your hands on.
3 TECHNIQUEBe subtle
Browser checkMordernizr is loaded first to provide
JavaScript fallback for non-compatible
browsers. This simplified version of the
browser doesn’t implement the compatibility
benefits it can deliver so please refer to the
more fully featured Codrops slider to see
how Modernizr should be integrated with
the slider.
001 <link rel="stylesheet" type="text/ css" href="css/ style.css" /> 002 <script src="js/ modernizr.custom.63321.js"></ script>
Favoured by designers everywhere for
creating navigation menus, the unordered
list (<ul>) is pressed into action again here in
order to provide a rather convenient
method for listing the contents of the slider.
This method is extremely e� ective. Who
would have thought that the humble
bulleted list would provide such an
important service to the HTML world?
4 TECHNIQUEList lesson
01
Slider contentEach page of the slider is a separate
unordered list, and you’ll find that each
element of content is represented by one
line of that list. The class that is created in
the stylesheet (cssmouseover) provides the
two hover e� ects that can be seen in use
here – the image replacement and the
opacity shift.
001 ul> 002 <li><ahref="#"class="cs smouseover" style="background- image: url('images/men-tshirt. jpg');"></a></li> 003 <li><a href="#" class="cssmouseover"style="ba ckground-image: url('images/ ladies-tshirt.jpg');"></a></li> 004 </ul>
02
Slider navigationThe slider navigation is simply
provided by a ‘nav’ class that is set up in the
CSS. As was intended by the introduction of
CSS and the separation of styling and
content, these lists enable you to trigger
some rather impressive results while still
being able to easily change the content,
which is good news.
03
2 TECHNIQUE Work up the slider01 Scripts in place
The CD provides workshop files that include the
JavaScript used by the slider. You’ll need to ensure your
HTML file includes the correct paths to these files for
the slider. This workshop will focus on how CSS and
HTML is used to create and customise the slider
functionality. Check the provided files for the complete
code as only the highlights are covered below.
001 X5-files.tif
02 Hover effects The first noteworthy code in the style.css
executes an image replacement (a vertical shift) when
the user hovers over the image. Examine one of the
JPEGs and you will see that a variation of the image
appears below the original and this code is simply
swapping in this variation. The opacity of the image is
also reduced to 70% using CSS.
001 a.cssmouseover { 002 display:block; 003 width:200px; 004 height:250px; 005 background-position:0px 0px; 006 } 007
008 a.cssmouseover:hover { 009 background-position:0px -255px; 010 opacity: 0.7; 011 }
03 Slider styling Style the unordered list to display the slider
content. Note the pseudo classes that provide the V
shaped slide page ‘pointer’. The following section
‘hollows out’ the V shape using a white block.
001 .mi-slider nav a.mi- selected:after { 002 border-color: transparent; 003 border-top-color: #fff; 004 border-width: 20px; 005 left: 50%; 006 margin-left: -20px; 007 }
04 Scale up Several elements to the animation include ‘easing
in’ and ‘easing out’ to provide more realistic acceleration
and deceleration e� ects. Content is scaled up from 0%
to 100% size when first loaded. Timings are set for the
length of each animation and the gap between moving
the elements from left to right and vice versa. This is the
scale up code (without vendor prefixes):
001 @keyframes scaleUp { 002 0% { transform: translateX(0) scale(0); } 003 100% { transform: translateX(0) scale(1); } 004 }
05 Lost in translation Content is translated o� page; @keyframes
created to set start/end points. A slider item can move
from right, from left, to right, to left. Vendor prefixes are
required so eight blocks of code in total.
001 @keyframes moveFromRight { 002 0% { transform: translateX(1200%); } 003 100% { transform: translateX(0); } 004 }
The other side of sliders“Many usability experts, including the legendary Jakob Nielsen, have concluded that the ubiquity of sliders has led to ‘banner blindness’, which is rather interesting. Nielsen’s team ran a usability study in which users were given the task of identifying special offers promoted, and it produced some fascinating observations”Jayson Winters
<comment>What our
experts think of the site
t is now four years since web typography
exploded into the consciousness of the
web-design community. The choice and
variety of different typefaces that are available
to incorporate into websites continues to grow.
With this comes a selection of services both
paid-for and free that provide a platform for
the extensive choice, services such as typekit
(released September 2009 ) and the Google font
directory (released May 2010 ) makes embedding
fonts a simple process. Very easy-to-use API services
get you up and running with beautiful fonts on your
website in a matter of minutes.
Web design is said to be 95 per cent typography,
the importance of readability, brand communication
and comfort for the end user cannot be ignored
when so many options are available. Here we will
show you exactly what is available, along with
resources and techniques that you can employ in
your future projects.
IStyling text for instant impact
typography
webABCDEFGHIJKLMNOPQRSTUVWEBXYZ
abcd
efghin
sprat
ionalj
klmno
pqrst
uvwxy
z
InspirationalABCDEFGHIJKLMNOPQRSTYPOGRAPHYUVXYZ
abcd
efghij
klmno
pqrst
uvwxy
z012
3456
7890
74 �������������������������������������������������������������������� feature
feature ____________________________________________________________________ 75
typography
This digital-experience company from Toronto recently
relaunched its website with a heavy focus on typography
and, while navigating through, it becomes clear just how
heavy an emphasis they have put on it. As you dig deeper
into the site and start to read the content it provides a very
pleasant experience. However, the key to this website is not
with any specific typographic treatments or brave new
web fonts – it’s about doing the basics to web typography
very well.
On first glance you would be forgiven for thinking that
they haven’t pushed the web-typography boat out very
much at all; initially it looks like they have stuck with the
classic pairing of Arial/Helvetica and Georgia: one for the
headings, the other for the body text. This traditional
combination has served the web well throughout its
lifetime, but on closer inspection that’s not strictly the case.
Although there has never been anything wrong with
using these two well-used and well-loved system fonts, it is
Teehan + Laxa combination that can be seen on the web almost
everywhere that you go. Teehan + Lax draw on this but
they have upgraded these two bread-and-button style
typefaces to fonts that have very similar attributes but are
di� erent enough to make a visual impact.
Take a look at the font-stack for the headlines and body
text of the website:
001 p { 002 font-family: "ff-meta-serif-web-
pro",Georgia,Times,"Times New Roman",serif;
003 } 004 h2 { 005 font-family: "Helvetica
Neue",Helvetica,"pragmatica-web",Arial,sans-
serif;
006 }
As you can see the classic combination of Georgia and
Arial lie within, but what precedes is what is
experienced. FF Meta Serif, a modern classic from
well-practiced pen of typographic master Erik
Spiekermann is the core experience to the reading of
the site, making up the paragraphs. It's a welcome
change from Georgia.
Helvetica Neue is used for the headlines and while
it's certainly not new to the web-typography world, it is
used e� ectively with large type making for excellent
clarity. Pragmatica Web (a Helvetica clone) tries to
counter when the site is viewed by a windows machine
not running Helvetica to provide a close experience.
The site is a testament to the use of lots of wordy
content without ever feeling like a drawn out a� air. With
the ever-increasing screen sizes, the use of larger type
should not be shied away from, just by doing the basics
of typography well and with some smart font choices, it
can provide a nicer experience for users.
FF Meta Serif
The recently redesigned Teehan + Lax website
Helvetica Neue
Classic Helvetica with a twist
Case study
www.teehanlax.com
INSPIRATIONAL WEB TYPOGRPAHY
The website for popular magazine The New Yorker is an
excellent example of keeping a brand relevant when it is
moved to the web. The staple font for the website is the
magazine's custom-designed NY Irvin, which is named
after the designer of the original New Yorker Typeface, Rea
Irvin. The web pages are served by Typekit, a service which
o� ers fonts outside it’s existing library, and provides a
unified web experience for users that doesn’t move the
organisation's web identity too far away from the roots of
the long-standing magazine.
The main headline font is paired with another of the
most commonly used fonts on the web, Times New
Roman. It does it’s job very well by successfully bringing
across the editorial feel and at the same time it works to
keep the brand communication in place.
A secondary headline font appears around the website
called Neutraface from House Industries. This typeface is a
modern, classic, geometric sans-serif, which both provides
impact and prevents the website from looking too
corporate or overly editorial. It'a great font choice for some
of the publication's feature sections, where the tone
changes from serious to more jovial opinion pieces.
With a website like a newspaper's which contains high
volumes of content stacked on top of each other it is
important to have the typography to break the sections
up. The New Yorker does this very well with it’s boldness in
Neutraface and uniqueness in NY Irvin.
The New Yorker Old school and new school style
Case study
www.newyorker.com
001.feature-header { 002 font-family: "neutra-2-display- n9","neutra-2-display-1",serif;
003 font-weight: 900; 004 line-height: 26px; 005 }
#087CC3 #E1E1E1 #000000 C92027 #FFFFFF
The feature header uses the heaviest font weight available making it ultra bold
The New Yorker magazine's inspirational homepage
NY IrvinNeutraface
76 ____________________________________________________________________ feature
The web is moving to more responsive ways, and having to develop
a website for just your browser window is a thing of the past.
Designers and developers alike need to carefully adjust and monitor
their paragraphs and headlines to assure that they remain readable
at di� erent variations of screen sizes and resolutions.
When it comes to responsive design, there are choices to be
made based on the entirety of the design. You need to choose
whether you go for an adaptive approach, where the design tweaks
itself at a variety of di� erent sizes, or a fluid approach where the
design is elastic and adjusts to any possible width. Either way your
text needs to be readable and not distracting.
The way to achieve this is by setting breakpoints to which the
type shifts when the dimensions get smaller by lowering or
enlarging the font size so it becomes comfortable. An obvious
example is that when you have a headline set in large type which
you then load up on a mobile device, the headline doesn't then take
up the entirety of the screen and that it scales with
your design respectively.
A basic example of a breakpoint for smaller devices where you
may want to knock down the line-height on the h1 headline.
001 h1 { 002 @media only screen and (max-device- width: 960px) {
003 h1 { 004 font-size: 36px
005 } 006 } 007 @media only screen and (max-device- width: 480px) { 008 h1 { 009 font-size: 24px;
010 } 011 }
As you can see, when going down to a lower maximum screen
width, you can reduce the headline font from it’s quite-large size of
36px by a factor of 1.5 to 24px. This will help readability at that size,
while maintaining the headline's presence. This is a very basic
example and you would want to set breakpoints between those two
dimensions for other devices and widths, it’s also more to do with
where your design starts to break down when moving to these
smaller sizes, rather than any set rules or dimensions.
Responsive typography
Keeping fonts legible at various screen dimensions is crucial for responsive web design
The title font and body font work well even in close proximity to similar elements
feature ____________________________________________________________________ 77
INSPIRATIONAL WEB TYPOGRPAHY
78 ____________________________________________________________________ feature
A unique design for the yearly summer festival
www.isleofwightfestival.com
Isle of Wight Festival 2013Case study
The yearly summer music festival which is held on the Isle
of Wight has some very distinctive typographical needs.
They have positioned the style and design of the website
as a homage to the hippie movement, and while this
makes for a great-looking website, it also requires the
typography to be sharp and on point too.
Several years ago, doing something like this would have
fallen apart at the seams due to the inevitability of having
to use Arial or Times New Roman. However, with the
modern age of Web Fonts it is now completely possible to
work with the typography creatively in order to stick to a
site's visual style and keep users firmly within the brand's
experience.
The site uses the left-field font Hollywood Deco SG,
which is very much in-keeping with the vibrant
Seventies-style branding. The developers of the site have
embedded the font within the CSS rather than using a
hosted service like Typekit or Google font directory. This
can be done quite simply using the webfont generator on
the Font Squirrel website and referencing it within the CSS:
www.fontsquirrel.com/tools/webfont-generator.
The Isle of Wight Festival website is currently using
images for some areas were the type is still very
specialised and di� icult to implement.
Psychedelic style
78 ____________________________________________________________________ feature
feature ____________________________________________________________________79
CSS3 has provided web designers with an arsenal
of tools and the opportunity to get creative with
certain font properties. Using a clever mixture of
these properties it is possible to achieve some
very interesting e� ects.
We can replicate the style of the Isle of Wight
Festival's website typography using a
combination of text shadows and CSS3 Masking.
Applying a stroke behind the text and a noise
overlay, plus keeping with text and avoiding the
use of images will make it much more accessible.
Start the process by referencing the Google
font e� ects library (this can be found by heading
to https://developers.google.com/webfonts/
docs/getting_started#E� ects ) and then pick out
a font from the Google fonts directory. You can
use this e� ects library to make some interesting
and truly creative typography in your own
designs as simple as possible. Utilise a
combination of embedded fonts, text shadow
and image masking to achieve the festival-style
typography look.
As you can see from the code listed to the
right, the text is first set in the Isle of Wight
Festival's typeface Hollywood Deco SG. Following
on from this, the multiple text shadows are then
applied in each direction to get the appearance of
a stroke behind the text. Then the webkit image
mask is applied to create the noise e� ect.
It's good to keep in mind that image masking
only works on webkit browsers (Chrome, Safari,
iOS ). Non-webkit browsers will only miss out on
the noise e� ect as text shadow is well supported.
001 <h2 style=”font- family:''hollywooddeco
sgmediumregular'; color:#fff;text-
shadow:0 2px 1px #470567, 0 -2px 1px
#470567, 2px 0 1px #470567, -2px 0
1px #470567; -webkit- mask-
image:url('HYPERLINK "http://themes.
googleusercontent.com/static/patterns/
putting- green.png" \hhttp://themes.
googleusercontent. com/static/patterns/
putting-green. png');">LINE-UP</h2>
Font effects
Using text shadow to give the appearance of a stroke makes this headline stand out
Hollywood Deco SGwww.myfonts.com/fonts/spiecegraphics/hollywood-deco-sg/
feature ____________________________________________________________________79
INSPIRATIONAL WEB TYPOGRPAHY
#4EBAC5 #BE6AAA #462061 #1BB471 #E96A50
The Google font directory has given many web authors the quick solution to getting away from the default options and
improving their designs in a very streamlined process. You start by browsing the library (currently 624 strong) using filters
to narrow down your search to exactly what you may need. You then add these fonts to a Collection. Once you're happy
with your choices, you click Use which allows you to copy CSS/font-face declarations or use a Javascript link to paste into
your web project, as well as examples of how to integrate the fonts into your CSS. It couldn’t be simpler. The motto for the
service is a great attitude to take when using fonts on the web: “A web with web fonts is more beautiful, readable,
accessible and open.”
Hot free fonts Open Sans
A gorgeous humanist sans-serif made available
from typeface designer Steve Matteson. Open
Sans was designed with an upright stress, open
forms and a neutral-yet-friendly appearance. The
family contains five di� erent weights, with a
condensed version also available. This font should
be one of the top picks for any web project you
embark on.
EB Garamond
Although the regular Garamond is almost a
web-safe font, it does not have enough coverage
so that it is possible to use it without fear. EB
Garamond is a very suitable stand-in for when
users may not have Garamond installed on their
system.
Lato
Lato is a useful sans-serif, with a collection of thin
weights which look great at large sizes paired with
a dark background, but can be risky when used
for smaller body copy. It's best to stick to the
regular weights on those paragraphs.
Crete Round
There is unfortunately not too much choice within
the font library when it comes to
professional-grade slab serifs, but Crete Round fits
the bill beautifully. It can be used for your body
text, but recommended use is as an impact font
for an oversized headline.
Amaranth
A cursive serif, Amaranth has it’s distinctive uses.
The font is so well designed that when used at
larger headlines the curves of the font remain
smooth and structured. Enough contrast at
smaller sizes means that this could also be used as
a nice body font.
Playfair Display
A stylistic transitional serif, this font is best used in
headlines and for display functions, it has a nice
italic set and comes with a recommended use of
Georgia for accompanying body text, plus it also
contains a lovely Baskerville-inspired ampersand.
PT Sans
With a full Latin and Cyrillic character set, PT Sans
is a great humanist sans-serif to use on headline
or body text. A completely open license backed by
the Russian government, this font is suitably
reliable. It can also be paired with it’s sibling PT
Serif for a nice harmony.
Google font directoryThe ultimate collection of free web fonts
Web fonts
Gravitas One adds body and a retro style
Open Sans and Gentium Book make a great combination Old StandardTT offers a historical feel
Lato provides a clean and contemporary look
80 ___________________________________________________________________ feature
HARDWARE REVIEWS ANDROID HACKING HELP & ADVICE APP REVIEWS
UNLOCK THE POWER OF ANDROID
ON SALE NOW> Galaxy S4 fi rst look > HTC One review > 35 Android secrets revealed
w w w . l i t t l e g r e e n r o b o t . c o . u k
Available from all good
newsagents and supermarkets
TIPS & TRICKS
BUY YOUR ISSUE TODAYPrint edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
facebook.com/littlegreenrobot twitter.com/lgrobot
Available on the following platforms
EASIER TESTINGWITH MOCKERY
Dedicated to the code-heavy side of modern online design
AIR ColdFusion FlexRuby PHP Google Dart JavaScript AS3
contents __________________________________________________________________83
Employ the Google-maintained framework to extend HTML for fasterapp development Page 94
Streamline the development process by automating the creation of new web apps on your web server Page 90
Build a web app with AngularJS
Make your own web server (part 2)
Simple and flexible unit testing with the PHP mock object framework Page 84
EASIER TESTING WITH MOCKERY
84____________________________________________________________________ feature
MOCKING DECODEDA mock object is nothing more than a bit of test jargon
that refers to simulating the behaviour of real objects.
Often, when testing, you won’t want to execute a
particular method. Instead, you simply need to ensure
that it was called.
For example, imagine your code triggers a method
that will log a bit of data to a file. When testing this logic,
you don’t want to physically touch the file system, as
this has the potential to drastically decrease the speed
of your tests. In these situations, it’s best to mock your
file system class and – rather than manually read the file
to prove that it was updated – ensure the applicable
method on the class was called: this is mocking!
There’s nothing more to it than that; it simulates the
behaviour of objects.
As your development process matures – including
embracing the single responsibility principle and
leveraging dependency injection – a familiarity with
mocking will quickly become essential.
MOCKS VS STUBSChances are high that you’ll often hear the terms,
‘mock’ and ‘stub’, thrown about interchangeably. In fact,
the two serve di� erent purposes. The former refers to
Mockery may be installed with Composer
the process of defining expectations and ensuring
desired behaviour. In other words, a mock can
potentially lead to a failed test. A stub, on the other
hand, is simply a dummy set of data that can be passed
around to meet certain criteria.
The de facto testing library for PHP, PHPUnit, ships
with its own API for mocking objects, but unfortunately
it can prove cumbersome to work with. As you’re surely
aware, the more di� icult testing is, the more likely it is
that the developer simply (and sadly) won’t do it.
Luckily, a variety of third-party solutions are available
through Packagist (Composer’s package repository),
which allow for increased readability and, more
importantly, writeability. Among these solutions – and
most notable of the set – is Mockery, a framework-
agnostic mock object framework.
Designed as a drop-in alternative for those who are
somewhat overwhelmed by PHPUnit’s mocking
verbosity, Mockery is a simple but powerful utility. As
you’ll surely find, it is in fact the industry standard for
modern PHP development.
INSTALLATIONLike most PHP tools these days, the recommended
method to install Mockery is through Composer
(though it’s available through Pear too).
Composer (getcomposer.org) is the PHP
community’s preferred tool for dependency
management. It provides an easy way to declare a
project’s dependencies, and pull them in with a single
command. As a modern PHP developer, it’s vital that
you have a basic understanding of what Composer is,
and how to use it.
If working along, for learning purposes, add a new
‘composer.json’ file to an empty project and append:
001 ```js 002 { 003 “require-dev”: { 004 “mockery/mockery”: “dev-master”
t is a rather unfortunate truth that, although the basic principle behind
testing is somewhat simple, fully introducing this process into your
day-to-day coding workflow is slightly more di� icult than you might hope it
would be. The various jargon alone can sometimes prove overwhelming!
Luckily, a variety of tools have your back, and help to make the process as
simple as it can be. Mockery, the premier mock object framework for PHP, is one such
tool that can assist.
In this article, we will discover exactly what mocking is, why you will find it useful in
your projects, and how you can integrate Mockery into your testing workflow. By the
end, you’ll wonder why you’ve not called upon it sooner.
Save yourself both time and hassle when developing and testing code with this in-depth guide to mocking
EASIER TESTINGWITH MOCKERYI
feature ____________________________________________________________________85
009 protected function getContent() 010 { 011 // simplified for demo 012 return ‘foo bar’; 013 }
014 public function fire() 015 { 016 $content = $this->getContent(); 017 $this->file->put(‘foo.txt’, $content); 018 } 019 } 020 ```
DEPENDENCY INJECTIONThis code leverages what we refer to as dependency
injection. Once again, this is simply developer jargon for
injecting a class’s dependencies through its constructor
method, rather than hard-coding them.
Why is this beneficial? Because otherwise, we
wouldn’t be able to mock the ‘File’ class! Sure, we could
mock it, but if its instantiation is hard-coded into the
class that we’re testing, there’s no easy way to replace
that instance with the mocked version.
001 ```php 002 public function __construct() 003 { 004 // anti-pattern 005 $this->file = new File; 006 } 007 ```
The best way to build testable application is to
approach each new method call with the question,
“How might I test this?” While there are certain tricks for
getting around this hard-coding, doing so is widely
considered to be bad practice. Instead, always inject a
class’s dependencies through the constructor, or via
setter injection.
Setter injection is more or less identical to
constructor injection. The principle is exactly the same;
the only di� erence is that, rather than injecting the
class’s dependencies through its constructor method,
they’re instead done so through a setter method:
001 ```php 002 public function setFile(File $file) 003 { 004 $this->file = $file; 005 } 006 ```
A common criticism of dependency injection is that it
introduces additional complexity into an application, all
for the sake of making it more testable. Though the
complexity argument is debatable in this author’s
opinion, if you should prefer, you can allow for
dependency injection, while still specifying fallback
defaults. Here’s an example:
001 ```php 002 class Generator { 003 public function __construct(File $file = null)
004 { 005 $this->file = $file ?: new File; 006 } 007 } 008 ```
Now, if an instance of ‘File’ is passed through to the
constructor, that object will be used in the class. On the
other hand, if nothing is passed, the ‘Generator’ will fall
back to manually instantiating the applicable class. This
allows for such variations as:
001 ```php 002 # Class instantiates File 003 new Generator; 004 # Inject File 005 new Generator(new File); 006 # Inject a mock of File for testing 007 new Generator($mockedFile); 008 ```
Continuing on, for the purposes of this tutorial, the ‘File’
class will be nothing more than a simple wrapper
around PHP’s ‘file_put_contents’ function.
001 ```php 002 <?php // src/File.php 003 class File 004 { 005 /** 006 * Write data to a given file 007 * 008 * @param string $path 009 * @param string $content 010 * @return mixed 011 */ 012 public function put($path, $content) 013 { 014 return file_put_contents($path, $content);
015 } 016 } 017 ```
Rather simple, eh? Let’s write a test to see, first-hand,
what the problem is.
001 ```php 002 <?php // tests/GeneratorTest.php 003 004 class GeneratorTest extends PHPUnit_ Framework_ TestCase {
005 public function testItWorks() 006 { 007 $file = new File; 008 $generator = new Generator($file);
005 } 006 } 007 ```
This bit of JSON specifies that, for development, your
application requires the Mockery library. From the
command-line, a ‘composer install --dev’ will pull in
the package.
001 ```bash 002 $ composer install --dev 003 Loading composer repositories with package information
004 Installing dependencies (including require-dev)
005 - Installing mockery/mockery (dev-master 5a71299)
006 Cloning 5a712994e1e3ee604b0d355d1af342172c 6f475f
007 008 Writing lock file 009 Generating autoload files 010 ```
As an added bonus, Composer ships with its own
autoloader for free! Either specify a classmap of
directories and ‘composer dump-autoload’, or follow the
PSR-0 standard and adjust your directory structure to
match. Refer to Nettuts+ (net.tutsplus.com/tutorials/
php/psr-huh/) to learn more. If you’re still manually
requiring countless files in each PHP file, well, you just
might be doing it wrong.
THE DILEMMABefore we can implement a solution, it’s best to first
review the problem. Imagine that you need to
implement a system for handling the process of
generating content and writing it to a file. Perhaps the
generator compiles various data, either from local file
stubs, or a web service, and then that data is written to
the file system.
If following the single responsibility principle – which
dictates that each class should be responsible for
exactly one thing – then it stands to reason that we
should split this logic into two classes: one for
generating the necessary content, and another for
physically writing the data to a file. A ‘Generator’ and
‘File’ class, respectively, should do the trick.
Here’s a basic structure (with a healthy dose of pseudo
code) for our ‘Generator’ class.
001 ```php 002 <?php // src/Generator.php 003 class Generator { 004 protected $file; 005 public function __construct(File $file) 006 { 007 $this->file = $file; 008 }
86 ___________________________________________________________________ feature ___________________________________________________________________ ___________________________________________________________________
009 $generator->fire(); 010 } 011 } 012 ```
Please note that these examples assume that the
necessary classes are being autoloaded with Composer.
Your ‘composer.json’ file optionally accepts an ‘autoload’
object, where you may specify which directories or
classes to autoload. Thankfully this means no more
messy ‘require’ statements!
If working along, running `phpunit̀ will return:
001 ```bash 002 OK (1 test, 0 assertions) 003 ```
It’s green; that means we can move on to the next task,
right? Well, not exactly. While it’s true that the code
does indeed work, each time this test is run, a ‘foo.txt’
file will be created on the file system. What about when
you’ve written dozens more tests? As you can imagine,
very quickly, your test’s speed of execution will stutter.
Still not convinced? If reduced testing speed isn’t
enough to sway you, then consider plain old common
sense. Think about it: we’re testing the ‘Generator’ class;
why do we have any interest in executing code from
the ‘File’ class? It should have its own tests! Why the
heck would we double up?
THE SOLUTIONHopefully, the previous section provided the perfect
illustration for why mocking is essential. As was noted
earlier, though we could make use of PHPUnit native
API to serve our mocking requirements, it’s not overly
enjoyable to work with. To illustrate this truth, here’s an
example for asserting that a mocked object should
receive a method, ‘getName’ and return ‘John Doe’.
001 ```php 002 003 public function testNativeMocks() 004 { 005 $mock = $this->getMock(‘SomeClass’); 006 $mock->expects($this->once()) 007 ->method(‘getName’) 008 ->will($this->returnValue(‘John Doe’));
009 } 010 ```
While it gets the job done – asserting that a ‘getName’
method is called once, and returns ‘John Doe’ –
PHPUnit’s implementation is confusing and verbose.
With Mockery, we can drastically improve its readability.
001 ```php 002 public function testMockery()
003 { 004 $mock = Mockery::mock(‘SomeClass’); 005 $mock->shouldReceive(‘getName’) 006 ->once() 007 ->andReturn(‘John Doe’); 008 } 009 ```
Notice how the latter example reads (and in fact
speaks) better.
Continuing with the example from the previous
“Dilemma” section, this time, within the ‘GeneratorTest’
class, let’s instead mock – or simulate the behaviour of
– the ‘File’ class with Mockery. Here’s the updated code:
001 ```php 002 <?php 003 class GeneratorTest extends PHPUnit_ Framework_ TestCase {
004 public function tearDown() 005 { 006 Mockery::close(); 007 } 008 public function testItWorks() 009 { 010 $mockedFile = Mockery::mock(‘File’); 011 $mockedFile->shouldReceive(‘put’) 012 ->with(‘foo.txt’, ‘foo bar’) 013 ->once(); 014 $generator = new
015 Generator($mockedFile); 016 $generator->fire(); 017 } 018 } 019 ```
Confused by the ‘Mockery::close()’ reference within the
‘tearDown’ method? This static call cleans up the
Mockery container used by the current test, and runs
any verification tasks needed for your expectations.
A class may be mocked using the readable
‘Mockery::mock()’ method. Next, you’ll typically need to
specify which methods on this mock object that you
expect to be called, along with any applicable
arguments. This may be accomplished, via the
‘shouldReceive(METHOD)’ and ‘with(ARG)’ methods.
In this case, when we call ‘$generate->fire()’, we’re
asserting that it should call the ‘put’ method on the ‘File’
instance, and then send it the path, ‘foo.txt’, and the
data, ‘foo bar’.
001 ```php 002 // libraries/Generator.php 003 public function fire() 004 { 005 $content = $this->getContent(); 006 $this->file->put(‘foo.txt’, $content); 007 } 008 ```
Because we’re using dependency injection, it’s now a
cinch to instead inject the mocked ‘File’ object.
001 ```php 002 $generator = new Generator($mockedFile); 003 ```
If we run the tests again, they’ll still return green,
however, the ‘File’ class – and, consequently, the file
system – will never be touched. Again, there’s no need
to touch ‘File’ – it should have its own tests. Mocking
for the win!
SIMPLE MOCK OBJECTSMock objects needn’t always reference a class. If you
only require a simple object, perhaps for a user, you
might pass an array to the ‘mock’ method – where, for
each item, the key and value correspond to the method
name and return value, respectively.
001 ```php 002 public function testSimpleMocks() 003 { 004 $user = Mockery::mock([‘getFullName’ => ‘Jeffrey Way’]);
005 $user->getFullName(); // Jeffrey Way 006 } 007 ```
RETURN VALUES FROM MOCKED METHODSThere will surely be times, when a mocked class
method needs to return a value. Continuing on with our
Generator/File example, what if we need to ensure that,
if the file already exists, it isn’t overwritten? How might
we accomplish that?
The key is to use the ‘andReturn()’ method on your
mocked object to simulate di� erent ‘states’. Here’s an
updated example:
001 ```php 002 public function testDoesNotOverwriteFile() 003 { 004 $mockedFile = Mockery::mock(‘File’); 005 $mockedFile->shouldReceive(‘exists’) 006 ->once() 007 ->andReturn(true); 008 $mockedFile->shouldReceive(‘put’) 009 ->never(); 010 $generator = new Generator($mockedFile);
EASIER TESTING WITH MOCKERY
Though the tests pass, they’re incorrectly touching the filesystem
feature ____________________________________________________________________87 ____________________________________________________________________ ____________________________________________________________________
011 $generator->fire(); 012 } 013 ```
This updated code now asserts that an ‘exists’ method
should be triggered on the mocked ‘File’ class, and it
should, for the purposes of this test’s path, return ‘true’,
signalling that the file already exists and shouldn’t be
overwritten. We next ensure that, in situations such as
this, the ‘put’ method on the ‘File’ class is never
triggered. With Mockery, this is easy, thanks to the
‘never()’ expectation.
001 ```php 002 $mockedFile->shouldReceive(‘put’) 003 ->never(); 004 ```
Should we run the tests again, an error will be returned:
001 ```bash 002 Method exists() from File should be called exactly 1 times but called 0 times.
003 ```
Aha; so the test expected that ‘$this->file->exists()’
should be called, but that never happened. As such, it
failed. Let’s fix it!
001 ```php 002 <?php 003 class Generator { 004 protected $file; 005 public function __construct(File $file) 006 { 007 $this->file = $file; 008 } 009 protected function getContent() 010 { 011 // simplified for demo 012 return ‘foo bar’; 013 } 014 public function fire() 015 { 016 $content = $this->getContent(); 017 $file = ‘foo.txt’; 018 if (! $this->file->exists($file)) 019 { 020 $this->file->put($file, $content); 021 } 022 } 023 } 024 ```
That’s all there is to it! Not only have we followed a TDD
(test-driven development) cycle, but the tests are back
to green!
It’s important to remember that this style of testing is
only e� ective if you do, in fact, test the dependencies of
your class as well. Otherwise, though the tests may
show green for production, the code will break. Our
demo this far has only ensured that ‘Generator’ works
as expected. Don’t forget to test ‘File’ as well.
EXPECTATIONSNow let’s dig a bit more deeply into Mockery’s
expectation declarations. You’re already familiar with
‘shouldReceive’. Be careful with this, however, because
its name is potentially a little misleading. When left on
its own, it does not require that the method should be
triggered; the default is zero or more times
(‘zeroOrMoreTimes()’). To assert that you require the
method to be called once – or potentially more times
– a handful of options are available:
001 ```php 002 $mock->shouldReceive(‘method’)->once(); 003 $mock->shouldReceive(‘method’)->times(1); 004 $mock->shouldReceive(‘method’)->atLeast()- >times(1);
005 ```
There will be times when additional constraints are
necessary. As demonstrated earlier, this can be
particularly helpful when you need to ensure that a
certain method is triggered with the necessary
arguments. It’s important to keep in mind that the
expectation will only apply if a method is called with
these exact arguments.
Here are a few examples:
001 ```php 002 $mock->shouldReceive(‘get’)->withAnyArgs()- >once(); // the default
003 $mock->shouldReceive(‘get’)->with(‘foo. txt’)- >once();
004 $mock->shouldReceive(‘put’)->with(‘foo. txt’, ‘foo bar’)->once();
005 ```
This can be extended even further to allow for the
argument values to be dynamic in nature, as long as
they meet a certain criteria. Perhaps we only wish to
ensure that a string is passed to a method:
001 ```php 002 $mock->shouldReceive(‘get’)-
003 >with(Mockery::type(‘string’))->once();
004 ```
Or, maybe the argument needs to match a regular
expression. Let’s assert that any file name that ends
with ‘.txt’ should be matched.
001 ```php 002 $mockedFile->shouldReceive(‘put’) 003 ->with(‘/\.txt$/’, Mockery::any()) 004 ->once(); 005 ```
And as a final (but by no means limited to) example,
let’s allow for an array of acceptable values, using the
‘anyOf’ matcher.
001 ```php 002 $mockedFile->shouldReceive(‘get’) 003 ->with(Mockery::anyOf(‘log.txt’, ‘cache.txt’))
004 ->once(); 005 ```
With this code, the expectation will only apply if the first
argument to the ‘get’ method is ‘log.txt’ or ‘cache.txt’.
Otherwise, a Mockery exception will be thrown when
the tests are run.
001 ```bash 002 Mockery\Exception\
NoMatchingExpectationException: No matching
handler found...
003 ```
Lastly, we have a variety of options for specifying what
the mocked method should do or return. Perhaps we
only need it to return a boolean. Easy:
001 ```php 002 $mock->shouldReceive(‘method’) 003 ->once() 004 ->andReturn(false); 005 ```
PARTIAL MOCKSYou may find that there are situations when you only
need to mock a single method, rather than the entire
object. So let’s imagine, for the purposes of this
example, that a method on your class references a
custom global function (gasp) to fetch a value from a
configuration file.
001 `` 002 <?php 003 class MyClass { 004 public function getOption($option) 005 { 006 return config($option); 007 } 008 public function fire() 009 { 010 $timeout = $this-
>getOption(‘timeout’);
011 // do something with $timeout 012 } 013 } 014 ```
While there are a few di� erent techniques for mocking
global functions, nonetheless, it’s best to avoid this
method call altogether. This is precisely when partial
mocks come into play.
88 ___________________________________________________________________ feature
001 ```php 002 public function testPartialMockExample() 003 { 004 $mock = Mockery::mock(‘MyClass[getOption] ’);
005 $mock->shouldReceive(‘getOption’) 006 ->once() 007 ->andReturn(10000); 008 $mock->fire(); 009 } 010 ```
Notice how we’ve placed the method to mock within
brackets. Should you have multiple methods, simply
separate them by a comma, like so:
001 ```php 002 $mock = Mockery::mock(‘MyClass[method1, method2]’);
003 ``
With this technique, the remainder of the methods on
the object will trigger and behave as they normally
would. Try to keep in mind that you must always
declare the behaviour of your mocked methods, as we
have done above. In this case, when ‘getOption’ is
called, rather than executing the code within it, we
simply return ‘10000’.
An alternative option is to make use of passive partial
mocks, which you can think of as setting a default state
for the mock object: all methods defer to the main
parent class, unless an expectation is specified.
The previous code snippet may be rewritten as:
001 ```php 002 public function testPassiveMockExample() 003 { 004 $mock = Mockery::mock(‘MyClass’)- 005 >makePartial();
006 $mock->shouldReceive(‘getOption’) 007 ->once() 008 ->andReturn(10000); 009 $mock->fire(); 010 } 011 ```
In this example, all methods on ‘MyClass’ will behave as
they normally would, excluding ‘getOption’, which will
be mocked and return ‘10000’.
HAMCRESTOnce you’ve familiarised yourself with the Mockery API,
it’s recommended that you also leverage the Hamcrest
library, which provides an additional set of matchers for
defining readable expectations. Like Mockery, it may be
installed through Composer.
001 ```js 002 “require-dev”: {
003 “mockery/mockery”: “dev-master”, 004 “davedevelopment/hamcrest-php”: “dev- master”
005 } 006 ```
Once installed, you may use a more human-readable
notation to define your tests. Below are a handful of
examples, including slight variations that achieve the
same end result.
001 ```php 002 <?php 003 class HamCrestTest extends PHPUnit_ Framework_ TestCase {
004 public function testHamcrestMatchers() 005 { 006 $name = ‘Jeffrey’; 007 $age = 28; 008 $hobbies = [‘coding’, ‘guitar’, ‘chess’];
009 assertThat($name, is(‘Jeffrey’)); 010 assertThat($name, is(not(‘Joe’))); 011 assertThat($age, is(greaterThan(20))); 012 assertThat($age, greaterThan(20)); 013 assertThat($age, is(integerValue())); 014 assertThat(new Foo,
is(anInstanceOf(‘Foo’)));
015 assertThat($hobbies, is(arrayValue())); 016 assertThat($hobbies, arrayValue()); 017 assertThat($hobbies, hasKey(‘coding’)); 018 } 019 } 020 ```
Notice how Hamcrest allows you to write your
assertions in as readable or terse a way as you desire.
The use of the ‘is()’ function is nothing more than
syntactic sugar to aid in readability.
You will find that Mockery blends quite nicely with
Hamcrest. For instance, with Mockery alone, to specify
that a mocked method should be called with a single
argument of type, ‘string’, you might write the
following code:
001 ```php 002 $mock->shouldReceive(‘method’)
003 ->with(Mockery::type(‘string’)) 004 ->once(); 005 ```
If using Hamcrest, ‘Mockery::type’ may be replaced with
‘stringValue()’, like so:
001 ```php 002 $mock->shouldReceive(‘method’) 003 ->with(stringValue()) 004 ->once(); 005 ```
Hamcrest follows the resource value naming
convention for matching the type of a value.
- nullValue
- integerValue
- arrayValue
- rinse and repeat
Alternatively, to match any argument, ‘Mockery::any()’
may become ‘anything()’.
001 ```php 002 $file->shouldReceive(‘put’) 003 ->with(‘foo.txt’, anything()) 004 ->once(); 005 ```
SUMMARYThe biggest hurdle to using Mockery is, ironically, not
the API itself, but understanding why and when to use
mocks in your testing.
The key to overcoming this is to learn and respect
the single responsibility principle (SRP) in your coding
workflow. Coined by Bob Martin, the SRP dictates that a
class “should have one, and only one, reason to
change.” In other words, a class shouldn’t need to be
updated in response to multiple, unrelated changes to
your application, such as modifying business logic, or
how output is formatted, or how data may be persisted.
In its simplest form, just like a method, a class should do
one thing.
The ‘File’ class manages file system interactions. A
‘MysqlDb’ repository persists data. An ‘Email’ class
prepares and sends emails. You might find it rather
useful to notice how, in none of these examples the
word ‘and’ was used.
Once this is understood, you will find that testing
becomes considerably easier. Dependency injection
should be used for all operations that do not fall under
the class ‘umbrella’. When testing, make sure you focus
on one class at a time, and mock all of its
dependencies. You’re not interested in testing them
anyway; they have their own tests!
Though nothing prevents you from making use of
PHPUnit’s native mocking implementation, why bother
when Mockery’s improved readability is only a
‘composer update’ away?
EASIER TESTING WITH MOCKERY
The Hamcrest library provides an additional set of matchers for defining expectations
Streamline your development process by automating the creation of new web apps on your Ubuntu server
Build a Linux server with open-source software
tools | tech | trends Ubuntu serverexpert Matt Gifford
n last month’s tutorial we repurposed
an old or unused PC and turned it into
a fully functional web server, complete
with Apache, MySQL and PHP and SSH
access via terminal or command line.
The intention was to use this server as a
development or staging environment
that we can access locally and pass
subdomains to clients or users to share the progress of
their website as you build it.
In this month’s concluding instalment, we’ll build a
Bash script that we can run from the server to
generate a new subdomain to the Apache web server,
create the necessary directory structures and
permissions, and download the latest version of
WordPress into the desired location on the web server.
By creating a simple script to handle this for us,
we can greatly reduce any repetitive tasks, optimise
our precious time and enhance our development
workflow in the process. You’ll be amazed by how
much time this will save you and how quickly you can
generate a new subdomain on your web server for
testing purposes.
I
90 __________________________________________________________________ tutorials
On the CD• Step_code• Finished_code
<tutorials>Build a Linux server with open-source software (part 2)
01 Virtual host templateCreate a new template file that we can use within our Bash script to
generate each virtual host for our WordPress sites. Log into your server using
SSH from the command line or terminal. Once inside, we’ll create a new blank
document which will live inside the default Apache installation directories.
001 > sudo nano /etc/apache2/sites-available/template.http
02 Host configThe Virtual Host definition will make use of placeholders for the
domainname and subdomain values. We’ll replace these defaults from within the
Bash script. In this template, we’ll be placing all of our subdomains within a new root
folder called ‘websites’. We’ll also define the log files and directory index values.
(Code for this step is on this month’s disc.)
03 Create Bash scriptLet’s now create the Bash script. Create a new empty file called
wphosts within the /usr/bin directory. This directory allows us to separate
user-specific utilities and terminal commands from any system commands
that live in the root directory structures. This file will contain the script to
handle the virtual host generation for us.
001 > sudo nano /usr/bin/wphosts
04 Default definitionsWe firstly tell the system that this file is a Bash script, and then clear any
output currently in the console window. We then set up the default values for
the Apache directory locations, and assign the sent parameters to variables for
later use. If you want to use more than one domain name, you can set this as a
parameter with the value $2 to match the second argument you send through.
001 #!/bin/bash 002clear 003 subdomain=$1;
004 domainname=”myserver.local”; 005 ava=”/etc/apache2/sites-available”; 006 ena=”/etc/apache2/sites-enabled”;
05 Checking argumentsTo provide some helpful documentation or to catch the possibility of any
missing arguments when running the script, the first block of code will determine
that both the subdomain and domainname values have been populated. If not, a
message is returned and the script will halt further processing.
001 if [[ ${subdomain} == “” || ${domainname} == “” ]]; then 002 echo “Usage: wphosts <subdomain>”; 003 echo “Example: wphosts www2”; 004 echo “ will install Wordpress and create the virtual host for www2.${domainname}”; 005 exit 0; 006 else 007 echo “I am going to make Wordpress installs really easy for you!”; 008 echo “.....................” 009 echo “.....................” 010 vhost=”${subdomain}.${domainname}”; 011 fi
06 Create host fileThe next part of the script will ensure the template.http file exists, and
replace all occurrences of subdomain and domainname within that file with
the values of the matching properties within the script itself, before writing the
file to the specified location within the Apache directory for all available sites.
001 if [[ ! -e ${ava}/template.http ]]; then 002 echo “${ava}/template.http does not exist. Cannot create ${ena}/${vhost}.”; else 003 cat ${ava}/template.http |sed “s/ subdomain/${subdomain}/g” | sed “s
/domainname/${domainname}/g” > ${ava}/${vhost} 004 fi
07 Website directoryHaving created the virtual host file, we now need the script to create
the directory structure for the new website and assign the correct permissions
to the directory. The vhost variable is the concatenation of both the
subdomain and domainname values, which form the new site host address.
001 if [[ ! -e /websites/${vhost} ]]; then 002 sudo mkdir -p /websites/${vhost}; 003 sudo chown -R www-data / websites/${vhost}; 005 sudo chmod -R 755 /websites/${vhost}; 006 echo -e “/websites/${vhost} has been created for you.\r\n”; 007 fi
08 Latest WordPress versionWe’ll then make sure we have the latest version of WordPress
downloaded and installed into the freshly created directory structure for our
site. Here we download the latest version, unzip the archive and move it into
the required folder, rename the unpacked folder to ‘htdocs’ and then delete
the downloaded archive file.
09 Database optionsNext we can set up the database for each new WordPress install. In
this instance, we want to be able to provide specific details when asked by the
script, as opposed to sending through from the very beginning as
parameters. Here, the script will assign the received input to the variable
names for later use.
001 echo -e “Time to set up the database for Wordpress\r\n”; 002 echo -e “Enter the name for the database:\r\n”
tutorials ____________________________________________________________________91
Build a Linux server with open-source software (part 2)
Webmin administration
Webmin provides a fantastic interface to help manage, update and administer the
server and installed packages without having to delve into
complex command-line processes.
003 read dbname 004 echo “Enter the username for the database:”; 005 read dbuser 006 echo “Enter the password for the user:”; 007 read dbpassword
10 Generate SQLUsing the values received from the user input, we can now create the
SQL strings necessary to perform the database creation commands. We’ll
create the database, assign the user full privileges on that database and
combine the three SQL commands into one string. The ‘which mysql’
command will provide us with the correct path to the service on the server.
001 EXPECTED_ARGS=3 002 E_BADARGS=65 003 MYSQL=`which mysql` 004 Q1=”CREATE DATABASE IF NOT EXISTS $dbname;” 005 Q2=”GRANT ALL PRIVILEGES ON $dbname.* TO ‘$dbuser’@’localhost’ IDENTIFIED BY ‘$dbpassword’;” 006 Q3=”FLUSH PRIVILEGES”; 007 SQL=”${Q1}${Q2}${Q3}”
<Clockwise from top left> • Running the script and not passing in any parameters will result in the help reminder / command usage prompt
• The script will download and install the latest version of WordPress into the required web directory for the subdomain
• To set up the WordPress database, the script will ask for user input to specify the database connectivity details
11 Execute transactionTo perform the actions against the database server, we’ll force the
script to ask for the root MySQL user’s password. We’ll send through the
generated SQL script string and output a user-friendly message once the
database has been created.
001 echo -e “\r\nYou will need to enter your MySQL root user password to complete this process...\r\n”; 002 $MYSQL -u root -p -e “$SQL” 003 echo -e “The ${vhost} database has been created for you\r\n”; 004 echo “.....................” 005 echo -e “.....................\r\n”
12 Enabling hostsAll created host files are stored in Apache’s ‘sites-available’ directory.
The Bash script can ask the user if the host should be enabled immediately. If
Default installation
The script assumes you are using the default directory
paths within the Apache installation. You can change
these if needed at the beginning of
the code.
92 ___________________________________________________________________ tutorials
<tutorials>Build a Linux server with open-source software (part 2)
yes, it will first ensure it hasn’t already been enabled and that the file exists
before running the necessary command to copy the host to the ‘sites-enabled’
directory. (This step‘s code can be found on the disc.)
13 Reminder textIf the user chooses not to enable the site through the script, we’ll
generate a user-friendly message to provide them with the correct command-
line script to run to enable it as and when required. This forms the second part
of the if statement started in the previous code sample.
001 else 002 echo “ “; 003 echo “You will need to enable the virtual host manually (when you’re ready)..”; 004 echo “sudo a2ensite ${vhost}”; 005 echo “ “; 006 fi
14 Apache restartWith any configuration changes to the Apache config files, or the
available or enabled hosts, Apache will need to be restarted to pick up the
altered values and properties. Here the Bash script once more asks the user
for a yes/no answer and if a positive is received, it will restart the Apache
service automatically.
001 bool=”n”; 002 echo -n “Should I restart Apache? (y/n)”;
<Clockwise from top left> • Logging in to the Webmin interface, we can see that the new Virtual Host has been added to the Apache server
• Webmin can also confirm the creation and existence of the database, set up and created by the Bash script
• Viewing the enabled subdomain on the server will display the fresh install of WordPress, ready to be configured
• The database details, specified during the script process, can now be entered into the setup wizard for WordPress
• The new site is now complete, installed and ready to develop on and enhance – on your very own web server
Suit your requirements
You can, of course, create as many scripts as you need
that can download and install specific code applications
to fulfil your requirements.
tutorials ___________________________________________________________________93
Build a Linux server with open-source software (part 2)
003 echo “ “; 004 read bool; 005 if [[ ${bool} == “y” || ${bool} == “Y” || ${bool} == “yes” || ${bool} == “YES” || ${bool} == “Yes” ]]; then 006 echo “Running: service apache2 restart”; 007 sudo service apache2 restart;
15 Apache reminder Once more, the user has the option to choose not to restart the
Apache service within this script, so we’ll generate another friendly message
to provide them with a reminder of the correct command-line script to run
whenever they choose to restart and reload the configuration.
001 else 002 echo “Remember you will need to restart Apache for the new virtual host to take effect.”; 003 echo “sudo service apache2 restart”; 004 fi
16 Closing remarksWhether the script will only be accessible by one person or a number
of people within a time, it’s always nice to leave with a positive message and a
confirmation of the work achieved through the process. The following code
closes o� the scripting within the Bash file and informs the user that the work
is complete.
001 echo “OK, you’re all set with the latest Wordpress installed on the new virtual host!”; 002 echo “Bye!”; 003 echo “.....................” 004 echo “.....................”
17 File permissionsWith the Bash script complete and stored in the /usr/bin directory, we
need to assign the correct permissions to ensure we can run the file as an
executable. We also need to set the correct permissions on the Apache site
directories so that the script can perform file operations within them to
generate the new host files.
001 > sudo chmod 755 /usr/bin/wphosts 002 > sudo chmod -R 777 /etc/apache2/sites enabled/ 003 > sudo chmod -R 777 /etc/apache2/sites-available/
18 Run scriptWith the script complete, we can now run it to generate a new
WordPress site on our local server. As the script was placed in the /usr/bin
directory, we should be able to execute it by typing the script name into the
terminal window. Create a new site by passing in the subdomain value.
001 > wphosts newinstall
19 Confirm hostsWe can double-check that the script ran as expected by confirming
the existence of the virtual host entry for Apache. We can log into the
Webmin interface on the server and select Servers>Apache Webserver from
the left menu. The new host entry should be visible in the list.
001 # Webmin address (your IP may differ) 002 http://192.168.119.128:10000
20 Database createdLet’s also confirm that the script created the database, as we would
expect. You can also check this from within the Webmin interface via the
Servers>MySQL Database Server menu, or query MySQL directly from the
command line and obtain a list of all databases available on the server.
001 > mysql -u root -p 002 mysql> show databases; 003 mysql> exit;
21 Web codeFinally, let’s confirm that the WordPress code was successfully
unpacked into the right location on the web server. We can browse to the
/websites directory on the server and view the individual site directories, inside
of which should be an htdocs folder containing the WordPress installation.
001 > cd /websites/ && ls -l 002 > cd /websites/newinstall.myserver. local/htdocs/ && ls -l
22 Configure WordPress With the virtual host created, added to Apache and enabled, following
a restart of the Apache services you will be able to view your freshly created
subdomain and complete the installation process by entering the database
details provided during the scripting process into the WordPress setup pages.
Understanding Bash scripting – the helpful command-line codeThis entire tutorial was rather
intensive in terms of writing the
Bash script and the code that
formed the many steps in the
process. The majority of these
steps would typically have to
be run manually to achieve the
desired result, whereas creating a
single executable script file wraps
the entire process into one general code block, saving time in the long run.
Bash scripting is incredibly powerful and relatively simple to learn, and
while a good portion of Ubuntu (or indeed any Linux/UNIX-based) server
management can be achieved through graphical interfaces such as Webmin,
nothing can truly replace the power of the command line and the speed
of using Bash through the CLI. A great resource to get started with Bash
scripting is available on the Ubuntu community wiki pages:
https://help.ubuntu.com/community/Beginners/BashScripting
tools | tech | trends HTML, CSS, JavaScript, AJAX, PHP, MySQLexpert Tim Stone
94___________________________________________________________________ tutorials
<tutorials>Build a web app with AngularJS
On the CD• AngularJS
Tutorial
01 Bootstrap appEven when building super-whizzy JavaScript apps, we still start with the
foundation of all sites: a nice bit of HTML with some Angular directives. A
directive is essentially an HTML attribute that tells Angular what to do, or in
their words ‘a way to teach HTML new tricks’. ng-app sets the document to be
an Angular app (or in other words, bootstraps it).
001<!DOCTYPE html> 002<html> 003 <head>
004 <title>Book Reserver</title>
005 </head>
006 <body ng-app="bookReservationApp">
007 </body>
008</html>
02 Model-View-ControllerAngular encourages you to structure your app using the MVC
(Model-View-Controller) paradigm. To put it briefly, this separates your
logic from the view, and communication between the model and view is
achieved through a controller. To make a controller with Angular, we can
write the following.
001bookReservationApp.controller('MainCtrl', function($scope, $http) {
002 //do stuff
003});
03 Setting a viewBefore we write any more JavaScript we need to tell our app where it
should render the content; this is done with the directive ng-view. If you don’t
like the idea of custom attributes in HTML, you can also write them in a
number of alternate syntaxes including using the custom data- attribute; for
example: data-ng-view.
001<div class="container">
002 <h1><a href="/">My Library</a></h1> 003 <div ng-view> 004 </div>
005</div>
04 Making a moduleAngular apps don’t have a central initialisation structure – instead,
they’re constructed as a series of modules with the view that this should
decouple the application, make it considerably easier to test, and also allow
modules to be loaded in any order. Our application is going to be extremely
simple so it will only have one module. In a new file named ‘app.js’, you need
to insert the following:
001 var bookReservationApp = angular.module('bookReservationApp', []);
05 Set up routesAngular has built-in routing which we’ll take advantage of to show two
main views: the listing view and the detail view (called main and detail,
respectively). Boilerplate code aside, routing is pretty simple; it basically says
‘when we go to this path in our app, render the template at this location and
use this controller’.
001 var bookReservationApp = angular.module('bookReservationApp', [])
002.config(['$routeProvider', function($routeProvider) { 003 $routeProvider
004 .when('/', {
005 templateUrl: 'views/main.html',
006 controller: 'MainCtrl'
007 })
008}]);
Amaze yourself by how easilyyou can rapidly prototype web applications using the AngularJSopen-source framework
Build a web app with AngularJS
odern web app development
can quickly become messy.
This no longer needs to be the
case, however. AngularJS is a
JavaScript framework built and
maintained by Google whose main selling point is ‘Write
less code, get beer sooner’. One of Angular’s core
strengths is that it’s good at handling data and
displaying changes in real-time.
Angular has a strong emphasis on writing testable
code. It encourages both unit testing of individual
pieces of functionality and end-to-end (aka e2e) testing
(docs.angularjs.org/guide/dev_guide.e2e-testing). In
theory, if you write tests while writing your application,
you should very quickly pick up any regressions and
maintain a very stable app.
To demonstrate Angular’s ‘superheroic’ abilities, in
this tutorial we’re going to build a simple reservation
system. We will essentially be pretending that we are
tidy librarians with a neat, fastidiously curated selection
of books. This will cover Angular’s routing, built-in AJAX
functionality, scoping and a whole host of other things
you don’t even know you need yet.
M
Calling on YeomanThe Yeoman (yeoman.io)
client-side development stack has built-in support for
sca� olding Angular apps. Once installed, simply enter ‘$ yo angular’ and then ‘$ grunt
server’ and you’re set.
06 When and otherwiseWe’ll go ahead and add two other routes to our app. The :xyz syntax
means that this is a route parameter. This means that we can go to
/books/1234 and it’ll pass 1234 as bookId. ‘Otherwise’ means that if none of
these routes were matched, the user is redirected to the index page.
001.when('/books/:bookId', {
002 templateUrl: 'views/detail.html',
003 controller: 'DetailCtrl'
004 })> 005.otherwise({ 006 redirectTo: '/'
007});
07 ng-repeat directiveNow that our routes are set up, we want to make two things for each
route: an HTML template file and corresponding controller with JavaScript.
We’ll start with the main.html file in a folder called views. We’re using the
directive ng-repeat, which will iterate over the books and display a link to each
one using a for … in syntax.
001<div class="hero-unit"> 002 <h2>Available Books</h2> 003 <ul class="unstyled">
004 <li ng-repeat="book in books">
005 <!-- step 8 here -->
006 </li>
007 </ul>
008 </div>
08 {{object.property}} Within the scope of ng-repeat we can call each item as ‘book’. This
means that we can write very readable code and access properties from the
book object. The double curly brace denotes an Angular expression or
variable which it’ll parse and replace with the correct value (similar to other
template languages) script in which it resides.
001<a href="#/books/{{book.id}}">{{book.title}}</a>
09 JSON structureThe sample data that we have compiled is a very simple array of books
that has a unique ID and other relevant metadata. The only parts of the code
that really require any explanation are the dueDate (line 8), which is a UNIX
timestamp, and reservedBy (line 9), which is the ID of a fictitious user who has
already reserved some books.
001{ 002 "items": [{ 003 "id": 100,
004 "title": "Peter Pan",
005 "author": "J.M.Barrie",
006 "description": "Follow the story of the boy who doesn't
grow up...",
007 "cover": "http://d.gr-assets.com/books/1337714526l/34268
008 "dueDate": 1363811510058,
009 "reservedBy": [34546]
010 }]
011 }
10 Basic controllerWith our view written, we can concentrate on the controller that will
get the data from a server and display it. Special Angular variables are
prefaced with a dollar sign ($). Everything that is added to $scope (such as
$scope.books) is made available to the view. This could be variables, methods,
just about anything you want!
tutorials ___________________________________________________________________95
Build a web app with AngularJS
<Above>• The AngularJS website contains an in-depth tutorial, guides on all aspects of AngularJS and a useful developer reference
<Left >• The first glimpse of Angular at work: a listof books automatically generated from our data
001 bookReservationApp.controller('MainCtrl', function($scope,
$http) {
002 $http.get('scripts/data/books.json').success(function(data)
{
003 $scope.books = data.items;
004 }); 005 });
11 Model/view relationshipThat’s all there is to it. Once the view knows what ‘books’ is, it’ll iterate
through it, even if this changes later down the line. For example, if you were to
poll the server and update the data in real-time, the changes would be
reflected in the view without you having to write anything.
12 Q’s promiseBefore we go any further, we’ll refactor how the books are retrieved. If
we overwrote the data on each page view then it wouldn’t remember
reservations when navigating the app. $http makes the AJAX call and $q is
Angler’s cut-down version of the Q promises library (Q: https://github.com/
kriskowal/q, $q: http://docs.angularjs.org/api/ng.$q).
001var getBooks = function($http, $q) { 002 var deferred = $q.defer();
003 //step 13 here
004 return deferred.promise;
005 };
13 Keep your promisesBy setting the list of books as a variable within the scope of the entire
application, we can check if it exists and, if it does, just resolve the deferred
object with that. If it doesn’t then it makes the AJAX request to the server.
001 if (!books) 002 $http.get('scripts/data/books.json').success(function(data)
003 books = data.items;
004 deferred.resolve(data.items);
005 });
006 } else deferred.resolve(books);
14 Refactored controllerWith our getBooks function in place, we need to make a small change
to the main controller. We need to pass $q as an argument and replace $http
with getBooks. Because it’s a promise, we keep the .then callback and because
it returns the same as the AJAX call, we keep the rest as is.
001 bookReservationApp.controller('MainCtrl', function($scope,
$http, $q) {
002 getBooks($http, $q).then(function(books) {
003 $scope.books = books;
004 });
005 });
15 A new controllerWith our list view complete, next we’re going to add the detail view. To
do this we need a new controller and a new view. We’re going to pass it
another argument, $routeParams. This means we’ll be able to read the route
parameters that are sent through via the route (in this case the book’s ID).
001bookReservationApp.controller('DetailCtrl', function($scope,
$routeParams, $location, $http, $q) {
002 });
16 Route parametersNow we’re going to iterate through the list of books and find the one
that matches the route parameter. We do this using a JavaScript 1.6 method
96 __________________________________________________________________ tutorials
<tutorials>Build a web app with AngularJS
<Above>• After filtering out the ID from the list of books, we can easily set the scope and display the metadata
Be awesome – debug Angular applications with BatarangFor easy debugging and profiling of Angular apps, the developers
have made a Chrome plug-in called Batarang (https://
chrome.google.com/webstore/detail/angularjs-batarang/
ighdmehidhipcmcojjgiloacoafjmpfk).
It’s fascinating – not to mention very useful – seeing the bottlenecks
of the application that are viewable within the Performance tab. From
there we can see that employing $location to listen for a location change
will incur a performance hit of 0.123 milliseconds as $locationWatch is
invoked. Under this tab, you can also see the properties and methods
used as the scope cascades down.
Under the Options tab, you can toggle an outline of the application,
bindings and scopes. Within the Models tab, meanwhile, you can view
each scope and the model behind it. This allows us to view the JavaScript
object interpreted from the JSON – which, again, will update in real-time
as you interact with the application.
tutorials ___________________________________________________________________97
called filter(), which will create a new array from any items that return true
from a passed function. We then choose the first match from the array.
001getBooks($http, $q).then(function(books) {
002 $scope.books = books;
003 $scope.book = books.filter(function(book) {
004 return (parseInt($routeParams.bookId, 10) === book.
.id);
005 })[0];
17 ReroutingIf no book is found, instead of displaying no information whatsoever
we’ll redirect them to a di� erent route. This is simply accomplished by setting
the path to the new route. Make sure to include new routes in your main.js file,
too. Note that not all routes need a controller if they are simply HTML.
001//app.js 002if (!$scope.book) $location.path('/404'); 003//main.js 004.when('/404', { 005 templateUrl: 'views/error.html' 006 })
18 Displaying propertiesHaving filtered out the book, we can tell our view to look within its
scope and find the object called ‘book’. Within ‘book’ we can access each of its
properties and display them wrapped between semantic HTML. It really is that
simple. If you have real-time info here, it’d update when the data is updated.
001<article class="hero-unit clearfix"> 002 <img class="cover" src="{{book.cover}}">
003 <h2>{{book.title}}</h2>
004 <h3>{{book.author}}</h3>
005 <p>{{book.description}}</p>
006 </article>
19 Reserve methodWe can also add methods to our view model. To reserve a book we’ll
add a reserve method which will simply see if someone else has ordered it.
We can also extend objects by adding new properties. (Sample code on disc.)
20 Added to queueIf someone else has already ordered a book, we’ll add seven days to
the result. At the end, we’ll add our user’s ID to the list of people waiting for it.
001 } else { 002 var oldDate = new Date($scope.book.dueDate);
003 var newDate = new Date(oldDate);
004 newDate.setDate(newDate.getDate() + 7);
005 var nd = new Date(newDate);
006 $scope.book.formattedFromDate = oldDate.toDateString();
007 $scope.book.formattedDueDate = nd.toDateString();
008 }
009 $scope.book.formattedDueDate = nd.toDateString();
010 };
21 Check if reservedWe’ve seen we can add methods. If they return truthy/falsey values,
this can control the visibility of certain elements. We want to know if you’ve
already reserved a book and if so, disable the button. The view controls
visibility, but this function will let it know the status of the data. (Code on disc.)
22 Tying it togetherNow to add the HTML that ties the model and view together. ng-click
triggers the reserve method; ng-class triggers the class of disabled on the
button depending on if youReserved() is true or false. If formattedFromDate is
set, ng-show will show the date from which you can reserve the book.
001 <button class="btn" ng-click="reserve($event)" ng-class="{ disabled:
002 youReserved($event) }">Reserve book</button> 003 <p ng-show="youReserved($event)">Your book has been reserved <span ng-
004 show="book.formattedFromDate">from {{book. formattedFromDate}}</span> until
005 {{book.formattedDueDate}}.</p> 006 $scope.book.formattedFromDate = oldDate.toDateString();
007 $scope.book.formattedDueDate = nd.toDateString();
008 }
009 $scope.book.formattedDueDate = nd.toDateString();
010 };
Build a web app with AngularJS
<Above>• Now that we’ve added the functionality for the button, we can add the button itself with the bound ng-click
<Right >• With a little tweaking we can now add dates to reservations and display some more advanced information
Championing the talents of independent web designers
01 Tim’s portfolio has a strong focus on user experience and social- network integration. The responsive site even has a bespoke smartphone version.
Tim Smith is a graphic designer, web designer and illustrator based in London. He
has always liked to work in a variety of creative
forms and the opportunity for a varied creative
life soon exploded when he discovered his
brother’s Amiga 500+, his first brush with digital
creativity, creating pixel art. Tim progressed to
designing and building his first website at age
14. He recalls the time the site launched, “To me,
it was magic – I designed something from my
computer that could be seen all over the world.
I was tremendously excited.”
Tim has since designed websites and other
digital pieces for clients such as PlayStation,
Nokia, Ikea and many others. The variety in his
client base is second only to his diversity in
visual styles and platforms, having worked on
Flash games, smartphone and tablet apps,
augmented reality and Facebook apps as well
as a broad range of print projects. For these he
has received recognition from the Webby
awards, Design Week, FWA, Gestalten and YCN.
Of the diverse range of areas Tim is
experienced in, one of his favourites is still web
design: “When it comes to a challenge, design
for web can certainly provide that, especially in
recent times. Responsive design, designing for
multiple browsers, screen resolutions, devices,
etc, can be tricky, but is extremely rewarding
when it works well.”
01 www.mypoorbrain.com
Tim Smith (aka My Poor Brain)
Current role Senior designer Education BA (Hons) in Graphic Design & Professional Media Expertise Graphic design, brand design, digital design,
illustration, concept, animation, Flash and Adobe CS Clients Ikea, PlayStation, V&A, Orange, Computer Arts,
Evian, The British Museum Twitter @mypoorbrain
02 This website unfolds and builds in an innovative way, just like how CenterPlan architects work. The layout responds to user input, so looks different on each visit.
03 Partnering with Urban Outfitters, fashion brand Hide required a website that positioned them in the high-end high-street fashion realm.
04 AR interactive for the Science Museum. You use physical blocks depicting carbon sources to create your island and try to keep it carbon neutral.
05 Platform brings many talents together to form a solution. The branding is ever evolving, eg the coloured squares rearrange from letterhead to website.
03 www.hide-label.com
05 www.platformiv.com
04 N/A
02 N/A
<portfolio>
web www.mypoorbrain.com
98 ������������������������������������������������������������������portfolio
RETOUCHING DIGITAL PAINTING EXPERT TRICKS GRAPHICAL ART
IMAGE IS EVERYTHING
ON SALE NOW> Lighting eff ects > 20 digital painting tips > Pro photo editing
www.advancedphotoshop.co.uk
Available from all good
newsagents and supermarkets
PHOTOMANIPULATION
BUY YOUR ISSUE TODAYPrint edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
facebook.com/AdvancedPhotoshop twitter.com/advancedpshop
Available on the following platforms
100 ����������������������������������������������������������������portfolio
<portfolio> Web talent showcase
01Working with Paul Lowe, editor-in-chief and the team at Sweet Paul Magazine tinymill developed a responsive website to show off pictures and recipes.
Born and raised in the United Kingdom, Tim McLoone was surrounded by computers from an early age. His interest in technology
quickly developed and soon he was building
websites from just 15 years old. During this time,
he developed skills in web development and
programming languages such as C++.
Tim joined the tinymill team in early 2012 and
brings his programming skill set to every
project he codes for the company. Some of his
most recent programming projects (as lead
developer) for tinymill include Sweet Paul
Magazine, Reddymade Design, Models and
Images, Heart of Brooklyn and many more.
With an addiction to simple, clean and
effective designs, he gets the bulk of his
inspiration from enjoying the work of others in
the field and connecting with his clients to find
out what they really want. With the assistance of
his partner, Brandon Smith (co-founder and
head of design), Tim has been turning out hit
after hit with tinymill. Creating device-agnostic
websites using the latest responsive tools, Tim
loves to keep their designs up-to-date and
looking fresh.
With 2013 in full swing, Tim continues to
hone his mobile-app development skills and
enjoys pushing tinymill’s scope and capabilities
further than ever before. With his expertise,
tinymill will soon enter the mobile application
development and interactive book publishing
industries as well.
01 www.sweetpaulmag.com
Tim McLooneweb www.tinymill.com
Current role Co-founder/lead developer Education Self-taught and proud! Expertise Adobe Business Catalyst, HTML5, CSS3, jQuery,
JavaScript, Objective C, Photoshop, Illustrator Clients Sweet Paul Magazine, Reddymade Design, Beefbox,
Riverpark NYC Twitter @tinymill.com
02Reddymade Design is an award-winning boutique-style design firm founded by Suchi Reddy. Tim recently gave their website a revamp.
03The hub of info for Brooklyn, NYC. Tim recently developed a fully integrated calendar into their CMS enabling their staff to keep people up to date.
04Run by himself, Beefbox features dance-music podcasts from top DJs around the world. Tim is currently working on the Beefbox mobile app.
05Models and Images is a renowned modelling agency located in Wichita, Kansas. Tim worked closely with owner Alleigh Allen to produce a chic and sexy website.
02 www.reddymadedesign.com
03 www.heartofbrooklyn.org
04 www.beefbox.com
05 www.modelsandimages.com
Established for over 25 years
WHY SHOULD YOU CHOOSE OUR UNIQUE FLEXI LEASE?
iMAC 21.5” i5 2.7 GHZ
ONLY £1.45 PER DAY
CHEAPER THAN YOUR
DAILY COFFEE
RETURN
RETAIN
RENEW
after only 2 years you canreturn your equipment or...
your equipment until the end of the 3 year lease and own it for just £39 or...
your lease, get new equipment at a similar cost PLUS keep the equipment from your original Flexi-Lease
We don’t keep secrets
Learn the truth about iPhone, iPad, Android, Photoshop andmore with the Tips & Tricks series’ expert advice and tutorials
TM
BUY YOUR COPY TODAYPrint edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
facebook.com/ImagineBookazines twitter.com/Books_Imagine
Available on the following platforms
Subject Responsive WordPress themes From Jack Sanders
I want to build a website using
WordPress, but I want it to be
responsive as well. I thought
about building my own theme,
but decided that was probably
too difficult and time-
consuming. So I am on the
lookout for a responsive
WordPress theme that will do
the job for me. Preferably it
would be free, but I don’t mind
paying. Any suggestions?
There are literally thousands of WordPress themes on the market; free and premium ones, good and bad ones. Typically, the better themes will be those that you pay for, however you can find good free ones. These are often
harder to find though. Try www.dessign.net as this has premium and free, and static and responsive themes. Other sites worth checking out include Obox (www.obox-design.com), WooThemes (www.woothemes.com), Make Design Not War (mdnw.net) and Graph Paper Press (graphpaperpress.com).
Subject Sticky subjectFrom Nicholas Brooks
I’ve bought a few copies of your
magazine recently and have
been disappointed with the way
the CD is glued into the
magazine. It is impossible to
remove the wallet from the
magazine without ripping a
large hole in the page and
having a lump of the page
permanently stuck on the back
of the CD wallet.
I was considering a
subscription but this has put me
off really. Are the CDs in the
subscriber copies attached in
the same way? I subscribe to
Linux User and the DVDs are
attached with a gel-like
substance which makes it fairly
easy to remove without
damaging either the magazine
or the wallet.
This is an issue that will certainly be resolved. We do not want to put readers off the magazine, so we strive to do everything we can to ensure the right experience. Until the issue is resolved we suggest that you simply take out the disc and download all the content you want to use to your desktop.
crowd source<letters>
Your emails, tweets, forum comments. The social network, but in printJoin the conversation as it happens on Twitter @WebDesignerMagComment on the news and opinion www.webdesignermag.co.ukEmail the editorial team at [email protected]
Crowd source
TutorialsDiscover the techniques to create inspirational and interactive webpages
Building for desktops, tablets and mobile devices means that a website needs to work on a lot of levels. I have been trying out a few different responsive frameworks: Bootstrap, Foundation and Responsive Grid Systems (as recommended by you). I find that all of the frameworks have so much to offer; more, in fact, than I will ever need. The one issue I have is the default menus that each of the frameworks offer. Frankly, they are not very exciting and I want to add a menu that is interesting, looks good and is, of course, functional on mobile screens. Any suggestions where I can find some great–looking mobile menus would be most welcome.
Bootstrap, Foundation and Responsive Grid System are great frameworks. The issue with any framework is that it caters for everyone. It is not a custom framework, so the content is a basis to work with and the same currently applies to menus. The solutions available are basic, but work well. To get a more imaginative menu,
take the one that you find easiest to work with and experiment. It’s worth remembering that the site design will dictate to a certain extent the type of menu used. Take a look at the following sites (on all devices) to get some inspiration: Our Name is Mud (www.ournameismud.co.uk), Caribou Coffee (m.cariboucoffee.com) and Osborn Barr (osbornbarr.com).
Create stunning timelines with TimelineJS http://bit.ly/YlpvdW
Create touch-responsive web content http://bit.ly/ZXVbnP
A beginner’s guide to Git for Designers pt 1 http://bit.ly/101Htln
Subject Mobile menusFrom Jane Vexel
header __________________________________________________________________ 103
Bravo14 (http://bravo14.co.uk) Starter Linux N/A £130 2,000MB 2,000MB 10 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Bravo14 (http://bravo14.co.uk) Starter Windows N/A £20 2,000MB 2,000MB 10 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Bravo14 (http://bravo14.co.uk) Business Linux N/A £45 4,000MB 4,000MB 4,000 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Bravo14 (http://bravo14.co.uk) Business Windows N/A £45 4,000MB 4,000MB 4,000 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Bravo14 (http://bravo14.co.uk) Ultimate Linux N/A £60 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Bravo14 (http://bravo14.co.uk) Ultimate Windows N/A £60 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
catalyst2 (www.catalyst2.com/web-hosting) Mega Deal 0800 107 79 79 11.99 250MB 2GB 1 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
catalyst2 (www.catalyst2.com/web-hosting) Mega Plus 0800 107 79 79 29.99 400MB 10GB 10 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
catalyst2 (www.catalyst2.com/web-hosting) Power 0800 107 79 79 49.99 750MB 20GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
catalyst2 (www.catalyst2.com/web-hosting) Power Plus 0800 107 79 79 89.99 1000MB 40GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
catalyst2 (www.catalyst2.com/web-hosting) Power Xtra 0800 107 79 79 129.99 1500MB 80GB 150 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
Designwasp (http://designwasp.com) Starter 0844 372 9848 £30 3GB 20GB 1,000 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✗
Designwasp (http://designwasp.com) Home 0844 372 9848 £40 10GB 50GB 10,000 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✗
Get your listing highlighted! Contact Rhian [email protected] +44 (0)1202 586421
123-reg (www.123-reg.co.uk) Starter 0845 859 0018 £29.88 1GB 5GB 20 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Plus 0845 859 0018 £59.88 5GB 50GB 500 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Pro 0845 859 0018 £107.88 10GB 100GB 750 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Bus Pro 0845 859 0018 £179.88 20GB Unlimited 1,000 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Plus (MS) 0845 859 0018 £59.88 2GB 25GB 100 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Pro (MS) 0845 859 0018 £107.88 5GB 50GB 500 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Bus Pro (MS) 0845 859 0018 £179.88 10GB 150GB 1,000 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) Light User 0870 321 2020 £45 20MB 1GB 3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) Everyday 0870 321 2020 £100 200MB 10GB 15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) Business/Pro 0870 321 2020 £275 500MB 20GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) JAVA Tomcat 0870 321 2020 £300 100MB 3GB 15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) ASP.Net 0870 321 2020 £275 100MB 3GB 15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
4D Data Centres (www.4dhosting.com) Bronze Package 0845 166 8386 £40 10MB 500MB 2 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D Data Centres (www.4dhosting.com) Silver Package 0845 166 8386 £64.99 20MB 2GB 10 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D Data Centres (www.4dhosting.com) Gold Package 0845 166 8386 £79.99 50MB 2GB 50 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D Data Centres (www.4dhosting.com) Titanium Package 0845 166 8386 £149.99 500MB 5GB 500 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
4D Data Centres (www.4dhosting.com) Reseller Package 0845 166 8386 £299.99 1GB 10GB 1,000 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Blackfoot Hosting Ltd (www.blackfoot.co.uk) Home N/A £40 500MB 5GB 5 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
Blackfoot Hosting Ltd (www.blackfoot.co.uk) Business N/A £50 1GB 20GB 100 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
Blackfoot Hosting Ltd (www.blackfoot.co.uk) eCommerce N/A £100 2GB 40GB 200 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
Blackfoot Hosting Ltd (www.blackfoot.co.uk) Professional N/A £150 3GB 60GB 300 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
SHO
PP
ING
CA
RT
NAME AND URL PAC
KA
GE
DA
TAB
ASE
SU
PP
OR
T
PH
ON
E N
UM
BE
R
CO
ST P
ER
YE
AR
WE
B S
PAC
E
MO
NT
HLY
BA
ND
WID
TH
PO
P3
AC
CO
UN
TS
VIR
US
FIL
TE
R
FIR
EW
ALL
PH
ON
E S
UP
PO
RT
EM
AIL
SU
PP
OR
T
WE
B C
ON
TR
OL
PAN
EL
SER
VIC
E L
EV
EL
AG
RE
EM
EN
T
Whether you’re a hosting firm keen to promote your products or a happy customer who wants a favourite provider to be listed, drop us a line with the details!
Got a dealyou think we
should list?
Hosting listingsKeep an eye on the latest packages and deals with our comprehensive list of service providers
104 ________________________________________________________hosting listings
Unlimited Web Hosting PackStarter Web Hosting PackBudget Web Hosting PackWordPress Web Hosting Pack
Drupal Web Hosting PackJoomla! Web Hosting Pack osCommerce Web Hosting Pack
ZenCart Web Hosting PackPrestaShop Web Hosting Pack
N/AN/AN/AN/AN/AN/AN/AN/AN/A
£60£30£12£24£24£24£24£24£24
Unlimited5GB1GB5GB5GB5GB5GB5GB5GB
Unlimited2GB1GB2GB2GB2GB2GB2GB2GB
Unlimited100
5100100100100100100
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✗ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
111WebHost .com
111webhost.com111WebHost
Minimus Linux / WindowsMinimus Linux / WindowsMinimus Linux / Windows
0845 528 02420845 528 02420845 528 0242
€49.95€89.95€149.95
10GB20GB30GB
200GB400B600B
UnlimitedUnlimitedUnlimited
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗www.blacknight.comBlacknight
1&1 Starter (Linux) 0844 335 12 11 £29.88 5GB Unlimited 1,000 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Standard (Linux) 0844 335 12 11 £59.88 50GB Unlimited 3,000 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Standard (Windows) 0844 335 12 11 £71.88 50GB Unlimited 3,000 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Unlimited (Linux) 0844 335 12 11 £83.88 Unlimited Unlimited 5,000 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Unlimited (Windows) 0844 335 12 11 £107.88 Unlimited Unlimited 5,000 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Business (Linux) 0844 335 12 11 £119.88 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
1&1 Business (Windows) 0844 335 12 11 £155.88 Unlimited Unlimited Unlimited ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
www.1and1.co.uk1 & 1 Internet Ltd
To advertise here contact Rhian [email protected]+44 (0)1202 586421
Designwasp (http://designwasp.com) Business 0844 372 9848 £60 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✗
Designwasp (http://designwasp.com) Windows Unlimited 0844 372 9848 £60 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✗
Designwasp (http://designwasp.com) Windows Home 0844 372 9848 £40 10GB 50GB 1,000 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✗
Designwasp (http://designwasp.com) CheapHost 0844 372 9848 £10 300MB 100MB 5 ✗ ✗ ✗ ✓ ✗ ✗ ✓ ✗
Digital Gibbon Ltd (http://digitalgibbon.com) Personal 01865 589 990 £12 1GB Unlimited 10 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
Digital Gibbon Ltd (http://digitalgibbon.com) Personal Plus 01865 589 990 £48 Unlimited Unlimited 50 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✗
Digital Gibbon Ltd (http://digitalgibbon.com) Business 01865 589 990 £108 5GB Unlimited 1000 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
Digital Gibbon Ltd (http://digitalgibbon.com) Business Professional 01865 589 990 £132 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
Domaincheck (www.domaincheck.co.uk) Bronze Linux 0191 261 2252 £30 100MB 1GB 5 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Domaincheck (www.domaincheck.co.uk) Gold Linux 0191 261 2252 £100 500MB 5GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Domaincheck (www.domaincheck.co.uk) Bronze Windows 0191 261 2252 £30 100MB 1GB 5 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Domaincheck (www.domaincheck.co.uk) Gold Windows 0191 261 2252 £100 500MB 5GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Donhost (www.donhost.co.uk) Reseller Unix 0845 226 5566 £399.99 Unlimited Unlimited Unlimited ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Reseller Windows 0845 226 5566 £499.99 Unlimited Unlimited Unlimited ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Enterprise 0845 226 5566 £89.99 1GB 2GB 250 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Commerce 0845 226 5566 £179.99 2GB 5GB 500 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Designer 0845 226 5566 £119.99 1GB 2GB 250 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Developer 0845 226 5566 £259.99 2GB 5GB 500 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
eHosting (www.ehosting.com) Starter 0844 999 4100 £23.88 1GB 25GB 10 ✗ ✗ ✗ ✗ ✗ ✓ ✓ ✓
eHosting (www.ehosting.com) Personal 0844 999 4100 £59.88 2.5GB Unlimited 50 ✓ ✗ ✗ ✗ ✗ ✓ ✓ ✓
eHosting (www.ehosting.com) Expert 0844 999 4100 £95.88 5GB Unlimited 250 ✓ ✗ ✗ ✗ ✗ ✓ ✓ ✓
eHosting (www.ehosting.com) Virtual 0844 999 4100 £227.88 50GB Unlimited Unlimited ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
Equiphase (www.equiphase.net) Bronze 0121 314 4865 £30 200MB 2GB 10 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Equiphase (www.equiphase.net) Silver 0121 314 4865 £42 400MB 5GB 20 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Equiphase (www.equiphase.net) Gold 0121 314 4865 £72 800MB 10GB 100 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Equiphase (www.equiphase.net) Platinum 0121 314 4865 £114 1,200MB 40GB 200 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Eurofasthost.com (www.eurofasthost.com) Email Only 02380 249 823 £40 1GB 2GB 10 ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Eurofasthost.com (www.eurofasthost.com) Essential 02380 249 823 £75 2GB 5GB 10 ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Eurofasthost.com (www.eurofasthost.com) Superior 02380 249 823 £140 5GB 10GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Eurofasthost.com (www.eurofasthost.com) Premium 02380 249 823 £250 10GB 25GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Evohosting (www.evohosting.co.uk) Starter N/A £29.99 500MB 1GB 3 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Evohosting (www.evohosting.co.uk) Home N/A £54.99 2.5GB 30GB 50 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Evohosting (www.evohosting.co.uk) Business N/A £79.99 6.5GB Unlimited Unlimited ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Evohosting (www.evohosting.co.uk) eCommerce N/A £159.99 30GB Unlimited Unlimited ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Get your listing highlighted! Contact Rhian [email protected] +44 (0)1202 586421
Featured host of the month: Netcetera www.netcetera.co.ukGetting more out of one of our quality listed hosting providersNetcetera is a long-established and experienced hosting provider which has been around since 1996. It provides solutions with managed web hosting services, dedicated servers and cloud hosting services. The award-winning company boasts a 16,000-square-foot, ISO 27001-certified data centre facility located
in the Isle of Man. They offer a £1 Hosting trial for those who want to try before they buy. Developer packages are powered by the latest Microsoft ASP.NET 4.5 platform, and include 1GB of web space for just £2.99 a month. Ideal for newbies, designers and developers who want a quick, simple and cheap hosting solution.
hosting listings _______________________________________________________ 105
hosting listings
SHO
PP
ING
CA
RT
NAME AND URL PAC
KA
GE
DA
TAB
ASE
SU
PP
OR
T
PH
ON
E N
UM
BE
R
CO
ST P
ER
YE
AR
WE
B S
PAC
E
MO
NT
HLY
BA
ND
WID
TH
PO
P3
AC
CO
UN
TS
VIR
US
FIL
TE
R
FIR
EW
ALL
PH
ON
E S
UP
PO
RT
EM
AIL
SU
PP
OR
T
WE
B C
ON
TR
OL
PAN
EL
SER
VIC
E L
EV
EL
AG
RE
EM
EN
TPersonalBusiness BronzeBusiness SilverBusiness GoldWD StarterWD Advanced
0808 168 67770808 168 67770808 168 67770808 168 67770808 168 67770808 168 6777
£32.87£58.38£76.39£101.89£149.99£199.99
5GB50GB
UnlimitedUnlimited
20GBUnlimited
UnlimitedUnlimitedUnlimitedUnlimitedUnlimitedUnlimited
50500
UnlimitedUnlimitedUnlimitedUnlimited
✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
✓ Option ✓ ✓ ✓ ✓ ✓ ✗
✓ Option ✓ ✓ ✓ ✓ ✓ ✗
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
✓ Option Option ✓ ✓ ✓ ✓ ✗
✓ Option Option ✓ ✓ ✓ ✓ ✗
Fasthostswww.fasthosts.co.uk
Giacom (www.giacom.com) Business Pro 0800 542 7500 £199 100MB 2GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Starter Professional 0845 644 7750 £29.80 2.5GB 10GB 1,000 ✗ ✗ ✗ ✓ ✗ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Home Professional 0845 644 7750 £89.99 Unlimited Unlimited 10,000 ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Business Professional 0845 644 7750 £129.99 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Reseller Professional 0845 644 7750 £349.99 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Hostway (www.hostway.co.uk) Silver 0808 180 1880 £79.50 150MG 3GB 5 ✗ Option ✓ ✓ ✗ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Gold 0808 180 1880 £139.50 300MB 5GB 10 ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Gold Plus 0808 180 1880 £189.50 450MB 10GB 30 ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Platinum 0808 180 1880 £359.50 600MB 20GB 50 ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Platinum Plus 0808 180 1880 £599.50 1.2GB 40GB 10 ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Email Plus 0808 180 1880 £49.95 50MB N/A 5 N/A N/A N/A ✓ ✗ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Professional 0845 009 9175 £30 250MB 1GB 50 ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Advanced 0845 009 9175 £50 2GB 2.5GB 150 ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Enterprise 0845 009 9175 £80 2GB 500MB Unlimited ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Professional Plus 0845 009 9175 £90 500MB 5GB 100 ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Premium Plus 0845 009 9175 £150 1GB 12.5GB 500 ✓ ✓ option ✓ ✓ ✓ ✓ ✗
To advertise here contact Rhian [email protected]+44 (0)1202 586421
ICUK www.icukhosting.co.uk Enterprise Plus 0845 009 9175 £300 2GB 20GB Unlimited ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Reseller Windows 0845 009 9175 £200 Unlimited Unlimited Unlimited ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Reseller Linux 0845 009 9175 £200 Unlimited Unlimited Unlimited ✓ ✓ option ✓ ✓ ✓ ✓ ✗
ICUK www.icukhosting.co.uk Reseller Enterprise 0845 009 9175 £500 Unlimited Unlimited Unlimited ✓ ✓ option ✓ ✓ ✓ ✓ ✗
JAB Web Hosting (www.jabwebhosting.com) Mail – M105 0800 043 0153 £15.17 256MB 3GB 50 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓
JAB Web Hosting (www.jabwebhosting.com) Home – H25 0800 043 0153 £24.47 1GB 8GB 50 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓
JAB Web Hosting (www.jabwebhosting.com) Professional - P55 0800 043 0153 £45 2GB 15GB 75 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
JAB Web Hosting (www.jabwebhosting.com) Reseller – R25 0800 043 0153 £97.88 2GB 30GB 250 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
JAB Web Hosting (www.jabwebhosting.com) Reseller – R105 0800 043 0153 £271.60 4GB Unlimited Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Blog 01438 342 490 £20 100MB 1GB 5 ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Starter 01438 342 490 £30 1GB 1GB 10 ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Starter 01438 342 490 £30 1GB 1GB 10 ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Dynamic 01438 342 490 £50 2GB 2GB 20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Premium 01438 342 490 £80 5GB 5GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
LCN (www.lcn.com) Unlimited 01438 342 490 £120 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
LD Hosts (http://ldhosts.co.uk) LD Budget (Linux) 07891 235858 £11.88 1GB 1GB 500 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
LD Hosts (http://ldhosts.co.uk) LD Home (Linux) 07891 235858 £23.88 10GB 10GB 5,000 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
LD Hosts (http://ldhosts.co.uk) LD Pro (Linux) 07891 235858 £41.88 50GB 50GB 20,000 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
LD Hosts (http://ldhosts.co.uk) LD Unlimited (Linux) 07891 235858 £60 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
LD Hosts (http://ldhosts.co.uk) Windows Home 07891 235858 £17.88 2GB 2GB 1,000 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
LD Hosts (http://ldhosts.co.uk) Windows Unlimited 07891 235858 £60 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗
Continued…
Hosting listingsKeep an eye on the latest packages and deals with our comprehensive list of service providers
The best resources for youSelecting your ideal package is largely
determined by the kinds of resources and quantity of features you require from your hosting solution. Key criteria like web space and monthly bandwidth are important for those services likely to be subjected to heavy amounts of traffic, which is why package solutions for enterprise applications are typically much more expensive. The general rule of thumb is not to buy more than you need or underestimate potential requirements…
1Competitive and reliableThe hosting market is big business and
hosting providers do try to drive prices down in a bid to entice your custom. Use our chart to compare costs, but be sure to visit the vendor websites to keep track of the latest deals, as they change. Remember that low price should not always be a deciding factor and that paying a premium for a more reliable, trusted and experienced vendor can offer you much better value for money in the long term.
2Putting you in controlModern hosting is all about giving
customers the power to set up, monitor and maintain their web space with minimal fuss. Most commercial vendors offer access to award-winning and intuitive control panels that enable you to log in remotely and intuitively tweak your account, without the need to relay complicated instructions down the phone. Be sure to find out from your potential host as much as you can about the control panel and request a demo.
3Fantastic customer supportIf all else fails and you need some
extra help to get your hosting back online, then a commitment to future customer support is key. Many vendors offer a service-level agreement which outlines what you can expect here, however most will be more explicit about whether phone support is included or email contact is preferred. Think about what you need for peace of mind and factor good, comprehensive technical support against the price.
4Golden rules to top hosting We identify and explain the key criteria for success…
SHo
PP
ING
CA
Rt
NAME AND URL PAC
KA
GE
DA
tAB
ASE
SU
PP
oR
t
PH
oN
E N
UM
BE
R
Co
St P
ER
yE
AR
WE
B S
PAC
E
Mo
Nt
HLy
BA
ND
WID
tH
Po
P3
AC
Co
UN
tS
VIR
US
fIL
tE
R
fIR
EW
ALL
PH
oN
E S
UP
Po
Rt
EM
AIL
SU
PP
oR
t
WE
B C
oN
tR
oL
PAN
EL
SER
VIC
E L
EV
EL
AG
RE
EM
EN
t
106 ��������������������������������������������������������hosting listings
DEVELoPERoNERESELLERVM500 Server2200DC Server3000DC Server2600QC Server
0800 061 28010800 061 28010800 061 28010800 061 28010800 061 28010800 061 28010800 061 2801
£32.89£109.99£274.89
£300£720
£1,200£1,800
1GB5GB
Unlimited20GB160GB
2x500GB2x500GB
UnlimitedUnlimitedUnlimitedUnlimitedUnlimitedUnlimitedUnlimited
50010001000
UnlimitedUnlimitedUnlimitedUnlimited
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Netcetera www.netcetera.co.uk
Discover what an enhanced listing can do for your business. Contact Rhian on: +44 (0)1202 586421
EMAIL oNLyStARtERHoME PRoBUSINESS
01604 212 90401604 212 90401604 212 90401604 212 904
£11.99£36.99£59.99
£109.99
2.5GB10GB25GB
Unlimited
15GB150GB
UnlimitedUnlimited
10UnlimitedUnlimitedUnlimited
✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓NameHOG www.namehog.net
Lite Hosting (Linux)Standard Hosting (Linux & MS)Pro Hosting (Linux & MS)Ultimate Hosting (Linux & MS)Ultimate Reseller (Linux & MS)
0800 024 29310800 024 29310800 024 29310800 024 29310800 024 2931
£14.99£34.99£49.99£199.99£299.98
500MB2.5GB10GB100GB100GB
5 GB20GB150GB1000GB1000GB
1025
100UnlimitedUnlimited
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Tsohostwww.tsohost.com
Get your listing highlighted! Contact Rhian [email protected] +44 (0)1202 586421
To advertise here contact Rhian [email protected]+44 (0)1202 586421
FREE & INSTANT SETUP NO HIDDEN FEES EXCLUSIVE RESELLER DISCOUNTS
Call us now 0845 644 7750Find out more www.heartinternet.co.uk/reseller-hosting
w w w . h e a r t i n t e r n e t . c o . u kW e b h o s t i n g | R e s e l l e r h o s t i n g | V P S | S e r v e r s
The UK’s most advanced
RESELLER HOSTINGYOUR CLIENTS DESERVE
GREAT HOSTINGOur award-winning Reseller Hosting package has been developed for web designers, developers, freelancers, agencies and web professionals to provide clients with high performance, stable and secure hosting.
£34.99 per month
Increase your income and develop long lasting relationships with your clients.
100% YOUR BRANDCustomise every aspect of your reseller hosting with fully white label features
EXCLUSIVE RESELLER DISCOUNTS
Dedicated Servers andVirtual Private Servers
CREATE CUSTOM PLANSControl everything from web space and bandwidth to prices and features
UNLIMITED EVERYTHINGUnlimited web space and bandwidth to let you host as many sites as you want
CUSTOMER SUPPORT100% UK Support, 24 hours a day from our in-house customer support team
Hosted Exchange and Premium Email
Bulk Domain Names
25%OFF
50%OFF
30%OFF
Fromonly
100% UK SUPPORT 24/7
TERMS & CONDITIONS
Subscribe now and get
The only magazine you need to design and develop stunning websites
5 ISSUES FREE*
SPECIAL
OFFER
USA readers
OnlineOrder by visiting:
www.imaginesubs.co.uk/wedand enter USA to get this exclusive offer!
TelephoneOrder by phone, just call:
+44 (0) 1795 592 878and quote USA
Subscribe now
Telephone+44 (0) 1795 592 878
www.imaginesubs.co.uk/wed
Subscribe now
TERMS & CONDITIONS
www.imaginesubs.co.uk/wed
*This is a US subscription o� er; please don’t forget to quote USA when ordering. You will actually be charged £80 sterling for an annual subscription. This is equivalent to $120 at the time of writing, althoughthe exchange rate may vary. Five free issues refers to the newsstandprice of $14.99 for 13 issues totalling $194.87, compared with $120 for a subscription. Your subscription will start from the next available issue. Latest o� er is based on newsstand price of $14.99 per issue comparedwith $9.23 through this o� er.This offer expires 31 August 2013.
Classif ied Adver t is ing 01202 586421
INSPIRINGBETTER
BUSINESSFlexible & Reliable
Virtual Private ServersScale up and down to meet
your business needs.
“For FISCAL Technologies to provide our world-class
software, we require an IT solutions partner to provide secure hosted access for our global client base.
To ensure we deliver the best possible experience, it’s
critical we use fast and responsive servers. We chose Fasthosts virtual private servers for the high performance and secure infrastructure – the excellent support and low
monthly cost is an added benefit.
Since using Fasthosts, we’ve reported a four-fold increase
in cost savings and improved client satisfaction. It’s fair to say, we trust Fasthosts to help us grow our business.”
Howard Durdle. CTOFISCAL Technologies
The professional’s choice for hosted IT solutions
DEDICATED SERVERS • VIRTUAL PRIVATE SERVERS • WEB HOSTING
DOMAIN NAMES • EXCHANGE EMAIL • RESELLER HOSTING
The professional’s choice for hosted IT solutions
®
Find out more at:
fasthosts.co.ukor call 0808 1686 777
• Fully customisable solutions
• Snapshot backup
• Up to 11TB HDD & 16GB RAM
• 99.99% uptime guarantee
• Wholly owned data centres
• 24/7 UK expert support
With Fasthosts Virtual Private Serversyou get all this and more:
Classif ied Adver t is ing
Capture+Optimise your checkout process with Capture+, the next generation of International Address Finder.
The de-facto choice for address look-up, second to none.
Graze.com
• Auto predicts addresses
• Supports over 240 countries
• Find addresses on your mobile
Call us: 0800 047 0495 or visit: www.postcodeanywhere.com/capture01202 586421
Contact Rhian On
To Advertise In
THE LATEST NEWS ESSENTIAL GUIDES EXPERT OPINIONINDUSTRY INSIGHT
FOR THE GNU GENERATIONwww.linuxuser.co.uk
Available from all good
newsagents & supermarkets
today
DEFINITIVE REVIEWS
BUY YOUR ISSUE TODAYPrint edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
facebook.com/LinuxUserUK twitter.com/LinuxUserMag
ON SALE NOW:» Build a Linux Server » 20 Amazing RasPi apps and tools
Available on the following platforms
Your One-Stop Image Solution
Find the best creatives for your advertising campaigns by browsing Depositphotos library of over 12,000,000 photographs, vector images and video files.
CS1223619To get a 15% discount on your next purchase, visit www.depositphotos.com and apply the promotion code:
,
Depositphotos Inc. | Website: www.depositphotos.com | Customer Service: +44-870-8200052
Shopping Cart and Internet Marketing System www.romancart.com01225 588000
Order FulfilmentSend your stock to our warehouse and we’llsend it out to your customers for you.
Get Paid EasilyIntegration with all major payment methods, including PayPal and Amazon.
24/7 SupportIf you need help setting up your RomanCartaccount or online store, contact our dedicatedand helpful UK support team.
RomanCart PaymentsAccept card payments with built in payment gateway. From only 9p/transaction. No monthly or annual fees.
Mobile Shopping CartMobile cart and checkout process pages includedwith all RomanCart merchant packages.
Deliver Your OrdersBook courier collection and delivery directly from your RomanCart Control Panel.
Marketing ToolsBuilt in email marketing and affiliate marketing software.
Use RomanCart For...Websites. Telephone Sales.Mail Order. Invoices.Proformas. Quotes.
eBayList items on eBay remotely from your RomanCart Control Panel. Manage all of your eBay and website sales from one place.
Drop-down Floating CartYour customers stay on your site as they additems to their carts via a drop-down floating cart fixed in the top-right corner of their screens.
RomanCart turns any websiteinto an online store in
less than 5 minutes
Increase number of sales
Increase the amount yourcustomers spend on each order
Increase the number of times your customersreturn to your website to buy from you again
Try RomanCart FREE for 6 monthsSign up at www.romancart.com using promotional code SELLMORE2013