Another bumper-packed issue includes:

FEATURE | HTML 5 – An in-depth guide to the next generation mark-up language

BEHIND THE SCENES | Web Designer talks to award-winning North-East agency Orange Bus about being a successful agency.

TUTORIALS:

Creative CSS3 linear gradients

Create a custom Tumblr theme

Dynamic text layouts with CS5

Improve CSS workflow with the Blueprint framework

Convert Flash video to HTML 5

Get your copy from the Imagine Shop from Thursday 29th July 2010.

With HTML5 big news in the trade right now, we’ve decided to kick off a bit of a debate to coincide with our forthcoming issue. So we asked a bunch of developers for their thoughts on whether the new specification can become the next-gen standard everyone is hyping it up to be. First up is KMP Digitata’s Rich Clark, but we’d like his words to be a catalyst for your own comments – so be sure to have your say below!

Name: Rich Clark
Head of Interactive, KMP Digitata
URL: http://richclarkdesign.com

“If we’re talking about the buzzword ‘HTML5′ which I’d class as ‘HTML5 & related technologies’ or ‘open web standards’ then the answer is resolutely yes. But perhaps not for a good few years. Some of the perceived decline in Flash is down to Apple’s stern refusal to implement it for iPhone or iPad but also down to clients being more savvy with regard to accessibility and SEO. The web is now a fundamental part of our daily lives and therefore we need open, accessible standards, not proprietary technology that requires plug-ins.
Having said that, Flash’s penetration on the desktop is going to keep it around for a while. For example, IE9 is going to implement HTML5 <video> but as developers we’re still offering some level of support for IE6, a browser that is 10 years old meaning that we’re going to keep falling back to Flash in order to keep supporting IE6, 7 & 8 for a while longer. Other advantages that Flash has over HTML5 is how it’s so easy to access devices like a webcam or microphone. Yes, HTML5 has the <device> element but it’s a long way from being implemented cross browser. Flash developers shouldn’t think that there skills are wasted though, a lot of ActionScript code can be ported to JavaScript without much difficulty, allowing them to experiment with HTML5 <canvas>. In theory (and I’m sure it’s in the works) Adobe could clean up by creating a great authoring tool (like Flash) for canvas, SVG and other open standards.
Conversely, the beauty of open standards is the shallow learning curve and all you need to get started is a text editor and a browser. Add some of the exciting HTML5 API’s to the mix and HTML5 can deliver rich interactive experiences across a range of devices. With browser vendors now working together to develop standards, issues with interoperability are on a downturn. There’s no reason for you not to start using it now, in the long term open standards will win out over Flash”

You can get more info on HTML5 and more opinions from the industry in our next big cover feature within issue 173, which is available on sale July 29th…

PNG24 IS A MULTITALENTED FORMAT GIVING DESIGNERS THE OPTION TO ADD HIGH QUALITY TRANSPARENCY TO AN IMAGE. HERE WE SHOW YOU HOW TO PUT THE FORMAT TO GOOD USE

IMAGE FORMATS FOR the web have been long been dominated by GIF and JPEG. However, with universal browser support for the PNG format now standard, web designers have an exciting and flexible alternative. The PNG (Portable Network Graphics) format is effectively available in two guises, PNG-8 and PNG-24. The PNG-8 option is the alternative to the GIF format but with the added advantage of providing better compression. This means that the format, in most cases, provides a smaller file size. The PNG-24 format brings transparency to images allowing web designers to be more creative and productive. File sizes are bigger but the finished product is well worth the compromise. The introduction of transparency immediately allows designers to become more productive. For example, designers can overlay an image on top of another without the need to resave every instance of an image. Here we demonstrate a number of techniques showing how to manage the PNG format and introduce it into webpages using HTML and CSS.

Originally appeared in Web Designer Issue 167 | Author: Steven Jenkins

01 Transparent text

Creating text on a transparent canvas allows it to be used in a variety of guises. In Photoshop create a new file, File>New, using the appropriate dimensions. Now select the Text tool, add text and style with a chosen font, colour, size etc. Now head to File>Save for Web and save the file using the PNG-24 format.

02 Position anywhere

The transparent text can now be used across a number of different scenarios. To use as a standalone element the image can be added inside an absolute positioned div tag. Go to Insert>Layout Objects>AP Div and drag into position. Now click inside the tag and add the transparent text (Insert>Image). Drag the div tag to position.

03 Overlay a background

Transparent text can be positioned over a background image, allowing you to add different background images while retaining the text. Create, or select, a current div tag, add an image, double-click Tag in the CSS Styles panel, select Background, click Browse and select the image. Insert the transparent text image into the tag.

04 Custom shape

To make text more prominent, a custom shape can be added as a background to the text. Create a new file with the appropriate dimensions and select the Custom Shape tool from the toolbar and select Custom Shape tool from the sub-menu. Now choose a custom shape, ie Stamp, and draw across the canvas to create the basic shape.

05 Style shape

Now go to Layer>Layer Style>Drop Shadow and modify the various options to create the desired shadow. Now select the Text tool and add any text to the custom shape. Alternatively, leave the shape blank to use as a background image. Now head to File>Save for Web & Devices and save with the PNG-24 format.

06 Insert shape

Now select the previously created AP Div tag and head to Insert>Image, select the newly created shape and insert. Now save the page and press F12 or go to File>Preview in Browser to see the PNG in action. Double-click the AP Div title in the CSS Panel and add the blank version as the background image.

07 Custom text

Now click inside the div tag and type in the appropriate text. This will be added with the default settings. Doubleclick the div tag in the CSS Panel and under Type select the desired font, size, colour and style. Now head to the Box category and add the necessary amount of padding to position the text correctly and resize the tag.

08 Corner ribbon

A popular graphic technique is to add a ribbon or flag, typically in a corner, often used for sites that are award winners. To create a ribbon open a new file with equal height and width dimensions. Select the Polygonal Lasso tool, create the basic shape and then add the background colour using the Paint Bucket or Gradient tool.

09 Ribbon text

To add the text to the ribbon the canvas needs to be shifted so it is horizontal. Go to Image>RotateCanvas>Arbitrary and add 45 and press OK. Adjust to get the exact angle. Now add in the text and select Image>Rotate Canvas>Arbitrary again and add the same angle but select CCW to get back.

10 Crop to size

The next step is to select the Horizontal Marquee tool and draw around the ribbon, making sure that there are no gaps at the edges of the image. You then need to go to Image>Crop to resize ready to add. Now go to File>Save for Web & Devices and save the image in the PNG-24 format.

11 Ribbon placement

To place in the top-left corner add an AP Div tag, Insert>Layout Objects>AP Div, and make sure that the L and T measurements in the Properties are both set to zero. Click inside the tag and insert the image just created. Adjust the tag to match the image using the resize handles and save.

12 Translucent overlay

Another popular technique is to create a translucent overlay that allows the image underneath to be seen. The first step is to create the image for the overlay. Create a new file, make this around ten by ten pixels as it will be repeated. Choose the base colour, add, set the Opacity to around 80% and save as a PNG-24.

13 Overlay tag

To create the overlay a standard Div tag or AP Div tag can be used. We have used an AP Div tag. Drag the tag into the desired position on the page and make sure that the L field in Properties is set to zero. Now set the Width to 100% to ensure that the tag stretches the entire width of the screen.

14 Opaque background

Locate the title of the div tag just created in the CSS Panel and then double-click it to open. Select the Background category and click the Browse button to locate the image that was created back in step 12. By default, the background image will repeat, filling the div tag. Save and Preview in Browser.

15 Add text

First type in the desired text, create a new class, Text>CSS Style>New, to style the text. Select the text and apply the new class. Add in any necessary padding. Alternatively, create a new PNG-24 file, add text and save. Now insert the image just created in the tag to create a two-layer transparency image.

Blog star Matt Mullenweg offers an exclusive insight into the motivations and origins behind web publishing’s most prominent force.

In a modern society obsessed with celebrity, there becomes very few actual stars blessed with the power to light up our lives. It seems that just about anyone can ascend to iconic status by merely appearing on TV as themselves or by being written into the tabloid headlines for all sorts of scurrilous misdemeanors. When Andy Warhol uttered his famous quote in the early 1960’s, “In the future, everyone will be famous for 15 minutes” – he surely couldn’t have known how prophetic this would become. Although television shows such as Big Brother and earlier examples of ‘docusoaps’ like BBC’s Airport have been hugely influential, we now find that the web is just as furtive for establishing real-world personalities on a global scale. A lethal combination of freedom, a perceived lack of control and an ability to define new rules for reaching an audience has yielded a YouTube generation with the potential to become an overnight sensation. Probably the most powerful tool on the modern web is blogging and in terms of redefining content publishing online it has opened the floodgates for those who were once inhibited by the complexities associated with building the necessary infrastructures. Those with something to say can simple type it out and post it without first becoming a master in HTML, CSS, PHP etc. Current darling of the geek glitterati Twitter is derived directly from this culture, in the same way Facebook’s wall and status updates can make you a legend within your own friendship network. If full-blown blogging was defined by market share however, then the undisputed star would surely be WordPress. Propelled by an open approach to the platform that anyone with a hosting account can setup, coupled with a devoted developer community and you have a decent formula for success that others have indeed followed.

An Open Approach

The real story behind WordPress begins with a young man named Matthew Charles Mullenweg. He was born January 11, 1984 in Houston Texas – which eerily enough makes him exactly 26 on the day this piece was written. He then went on to work for CNET Networks in San Francisco before founding the startup firm Automattic in August 2005. It was from here that WordPress evolved, along with projects such as the spam-killing Akismet, universal avatar creation tool Gravatar and a few more initiatives that all support the Open Source philosophy so integral to Matt’s initial vision. “The website says WordPress is “a state-of-the-art semantic personal publishing platform” but more importantly WordPress is a part of who I am”, as his official blog at http://ma.tt explains. “Like eating, breathing, music, I can’t not work on WordPress. The project touches a lot of people, something I’ve recently begun to appreciate. I consider myself very lucky to be able to work on something I love so much.”

Although it’s worth underlining that Mullenweg didn’t create the blueprint for WordPress alone, credit must also go to co-developer Mike Little, he has been recognised since as one of the web’s most influential people operating today. So we see it as something of a coup to present an exclusive Q&A session with the man who made web publishing go pop – offering his own view of the past, present and future on blogging’s rise to superstardom…

MATT MULLENWEG TALKS TO WEB DESIGNER…

Q. First off, there can be very few web designers that haven’t heard of WordPress. But how and when did it all come about?

WordPress started about 6 years ago because I wanted a simple blogging tool that was easy to install, easy to modify, and friendly with web standards. I teamed up with a fellow Open Source contributor Mike Little (in England) and we started hacking on the first version. It’s come a long way since then, with some key improvements being the creation of the plugin and theme systems. We got the current logo about4.5 years ago when Jason Santa Maria got involved to work on a redesign and rebranding.  I’ve considered changing the logo before, but earlier this year a very dedicated WordPress user in Hawaii actually got it permanently tattooed on his arm, so we’ll probably stick with the current logo for the foreseeable future.

Q. What was the original vision for WordPress and were you/are you surprised at how successful the platform has become?

As growth started to pick up and it began to look like this thing had legs, we started to think more about vision and possible impact. “Wouldn’t it be cool if we could democratize publishing and make it available to a wider audience?” That idea of making it easy and hassle-free for anybody to publish online has stuck with us.

The first time I was really surprised by the community was when some users in Japan downloaded the software and then replaced every English string with a Japanese translation. I installed it and it was surreal, all of the layout and buttons looked the same but there was this beautiful, exotic script gracing everything. It was like a dream where everything is familiar but all your friends are speaking a language you don’t understand. The idea that someone halfway across the world would contribute so much time and thought to the project was very humbling.

Q. If you had a crystal ball would you have given more thought to the commercial aspects that WordPress has to offer?

No, I wouldn’t change a thing. The GPL license that WordPress is under enables a large amount of commercial innovation while still protecting the rights and freedoms of users.

Q. Automattic began life as small startup and has grown into a massive online presence. What have you learnt along the way and what advice would you give to anyone thinking of starting up their own online enterprise?

On the commercial side Automattic has definitely been a learning experience as our sites have grown to more than 260 million unique visitors and our team has grown to over 50 people located around the world. With a distributed company model like Automattic has you rely a lot on your colleagues, so hiring is paramount. The most important thing one does as founder is hire the right people and set the company culture.

The best method I’ve found for hiring is to avoid fancy interview-type questions or put people under a lot of pressure, instead I just to get to know them and see if they are someone I would want to be in the trenches with. I check out their work to see if it is the level I am looking for and if it is we do a trial project (paid, of course) where I can actually see what it’s like to work with them over the course of a few weeks. There is no better barometer of what someone is actually like, how they communicate, collaborate, and manage their time.

Q. After nearly 15 years of service GeoCities was finally closed down this year by Yahoo. Do you see any similarities between WordPress and GeoCities? Do you think WordPress is the modern day equivalent of GeoCities?

I actually had a GeoCities site back in the day. In fact I just paid the ransom to have it redirected to a domain so the old links don’t break. I think they did a fantastic job at whetting people’s appetites for having a web presence but much like early social networking sites, once you set it up there really wasn’t any reason to go back and the pages weren’t terribly engaging for visitors. Blogging added a little bit of structure in a format that has proved resilient for a decade.

Q. What is your current involvement with WordPress?

This year a lot of my time has been spent bouncing around the globe to attend WordCamps, which are one- and two-day conferences organized by the WordPress community. I love meeting WordPress users and when come to a WordCamp I typically do a town hall-style Q & A session to try to answer as many questions as possible and spread the gospel of Open Source, open standards, GPL, and WordPress.

On the product side I try to take what I have learned back to the rest of the development team and that influences the direction we take the product in. I don’t need to personally write code much these days because we have so many talented folks involved but I am jumping back in on bbPress and will be hacking around in there.

Q. As WordPress reaches the web masses new markets and opportunities i.e. Themes, have been created around the platform. Is this something you encourage and do themes have to go through a vetting process.

Themes are incredibly important and I think the diversity of themes available for WordPress has been part of the success of the platform. In the past we had some trouble with the quality of themes available on different directories and such, so when we decided to make an official one on WordPress.org we decided there would be a vetting and mentorship process. We check themes for the obvious stuff like malicious code but also for WP feature support, browser compatibility, and even API compatibility so if you get a theme from our directory you can be sure that it will be safe now and in the future.

Q. The WordPress developer community plays a huge part in the WordPress lifecycle. How does the community work and how can designers get involved?

The community is very collaborative. People from all different backgrounds are involved and we are joined together by a shared philosophy – Free Software – and a common passion – creating websites.

Developers usually join some of our mailing lists, like wp-hackers (http://lists.automattic.com), or peruse our Trac instance (http://core.trac.wordpress.org), where we keep track of bugs. Writers contribute to our documentation, called the Codex, which runs Mediawiki software like Wikipedia. Designers used to have a hard time getting involved but that has changed since version 2.7 when we did the dashboard redesign. Now we experiment with things like distributed usability testing and we also have a budding Open Source Design group (three people so far).

My dream is to grow the design group so they can help out with different plugins in addition to core work. Many of the plugins are written by people with a passion for development and could benefit greatly from some help on the visual side.

Q. Do you think that WordPress is removing the technical element> involved in the web design process? Or, alternatively do you think it is encouraging a new generation of web designers?

Absolutely. I have been to twenty or thirty WordCamps this year and at every one I met several dozen folks whose entire businesses, all the websites they have built, are on WordPress. It’s where they start and end every project and they are bending and stretching it in ways I could have never imagined. It’s something with the power of any other CMS out there but that doesn’t intimidate their clients or require recoding their site every 16 months because compatibility broke.

WordPress started with very modest ambitions as just a blog tool, but we have always listened closely to our user community and we have grown together into something much more flexible.

Q. WordPress for the iPhone is already available at the iTunes App store. What features are you looking to put into future editions and how do you think the app compares to the standard version?

Our app is better than it used to be, but still sucks in a lot of ways. As a WordPress user I want to see my stats, get a push notification when there is a new comment, search my archives, visit people linking to me, respond to comments, take and upload video… we still have so much to do!

Q. There are thousands of WordPress sites across the Net. What do you think are great examples of the publishing platform and why?

We made a whole site for exactly that. Check out http://wordpress.org/showcase. Some of my recent favorites are hypebeast.com, ilovetypography.com, icondock.com, grainedit.com, pro.gigaom.com, and gigaom.com. (My site, of course: ma.tt.) WordPress.tv is a great example of WordPress powering a Hulu-type site and also a great way to learn about WordPress itself.

Q. What does the future hold for WordPress?

A number of things. On the interface side I think that you will see WordPress become more streamlined in the future, as we balance ever-increasing functionality with cognitive load when using the interface. [re-write please: You will start to see more customization options for the back-end so people can tailor it to the things they use and also perhaps see some of the functionality move into plugins so people can optimize their site for exactly what they want to use.]

Performance-wise I’m not worried because we already run some of the largest websites in the world and solutions like wp-super-cache and Batcache have already been shown to scale to tens of millions of visitors per day.

A lot of plugins today are solo enterprises and I think you’ll see these become more collaborative just like WordPress did in the beginning. It’s not unheard of for a plugin to get half a million users, and that’s hard to support on your own, so they’ll start to turn into little mini-WordPresses with their own documentation, support forums, developer teams, and everything else.

Themes are going to evolve to include more functionality, almost like little mini-applications. A good example of this is the P2 theme we released — it’s a theme but it adds a lot of functionality to the front end of the blog so you actually never have to visit the dashboard. You can write, edit, upload images, comment, everything right on the home page, and everything new comes in real-time to anybody that has the page open. This type of model will be used for more than just blogs, you’ll see a theme that perhaps provides address book-type functionality (I already saw one of these called RoloPress) or something for managing a vinyl collection. (I want the latter. ) Because the front-end presentation and the back end functionality are tied together you will be able to create very rich experiences and bundle and distribute them through WordPress’ existing networks.

WordPress provides a robust content model with post types, taxonomies, custom fields, threaded comments and moderation, everything you need to build almost any website you can imagine.

Rosie Tanner, Editor of Digital Photographer, is brimming with expectation for DPOTY ’10: “The DPOTY awards offer digital photographers a fantastic platform to showcase their work across a wide range of categories. It’s an amazing opportunity for fresh talent to emerge and we can’t wait to celebrate new and undiscovered digital photographers. The fact that such a prestigious camera company like Samsung is supporting the awards is a huge compliment. Its support means the competition and prizes will be better than ever before.”

Since its launch back in 2007, the DPOTY awards has seen year-on-year success and is now widely recognised by the photography industry as one of the top photographic competitions of its kind. The judging panel for the 2010 awards features some of the country’s top photographic professionals including big names such as Guardian Picture Editor, Eamonn McCabe and pro photographer, William Cheung FRPS.

In contrast to previous years, the format of the awards for 2010 will see a brand new competition category launched in each issue of the magazine. There will be six photographic categories in total – each designed to push the creativity of photographers. The categories are:

The Big Picture – Landscapes

Strike a Pose – Portraits

Wild at Heart – Wildlife/nature

Location, Location – Travel

Capture the Action – Motion/action

Get Creative – Creative/image editing/HDR

Rosie Tanner added, “The categories we’ve picked this year are reflective of the creative capabilities of Samsung’s fantastic NX10 and EX1 cameras. There is definitely a category to suit every photographic taste, so we look forward to seeing a broad range of subject matter.”

Steve Mitchell, General Manager Marketing, Samsung Digital Imaging said: “Samsung is proud to be part of Digital Photographer of the Year 2010. We have a longstanding relationship with Digital Photographer magazine and we are particularly pleased to have been chosen by the team to be the main sponsor of DPOTY.

The Digital Photographer of the Year competition showcases some of the most exciting photographs every year and with the creative possibilities offered by the Samsung camera range it is a perfect partnership which will inspire any photographer. We are looking forward to judging and awarding the very best photography in this year’s competition.”

For all the details on how to enter head online to www.DPhotographer.co.uk.

Fasthosts encourage web designers to take part in latest survey surrounding client relations within the trade

Fancy a chance to WIN £100 M&S vouchers?  Fasthosts, www.fasthosts.co.uk, are conducting a worthy poll of UK web designers, to explore your experiences of working with clients during the tough economic climate. The multi-choice qu’s take literally 2mins to complete, and look at how your clients’ needs may have changed in recent years, as well as what aspects of your client-service you are most proud of.  It’s confidential and overall results will be shared with the media.  Simply add your email address for a chance to win, (email addresses will not be used for any other purpose).

We at Web Designer also have an interest in the results of this one folks, so please do take the necessary few moments to complete the survey and also recommend it to your fiends and colleagues!

The survey can be found here:

http://is-nri.com/take?i=162095&h=La4ANMxPHx7DK3hqw3L5PA

A lot has been said and written about the ‘magical and revolutionary’ (Apple’s words not ours) iPad. It has sold millions, but why?

If you own an iPad tell us why you bought it and what you love about it. Conversely, if you own an iPad and think it’s a waste of time and money tell us why? We look forward to your comments.

So you want to be a… Web designer?
If you like the idea of producing pieces of interactive internet then check out our career guide – it features handy tips from a range of web design experts

Introducing the experts:
Coen Grift
Coen is an eccentric who has been in
web design for “53,547 years”. His offbeat style and humour is reflected in his truly unique work.
www.bio-bak.nl

Rob Alan
Creative director Rob has worked in
web design for over eight years. His clients range from local musicians to large multinational corporations.
www.robalan.com and www.spinweb.net

Nik Gill
Nik has been in the industry for ten years. Most of his work is for other design and web agencies on the front-end design of their sites.
www.remixcreative.net

Nate Kadlac

Nate is an interactive designer who has worked in web design for nine years. He works freelance and his previous clients include Sony, HP, Microsoft and Reuters.
www.kadlac.com

Anthony Goodwin

Ant is a digital art director and has worked in web design for five years. His clients include Clarks, Durex, UPS, Joe Browns
and Wickes.
www.designembraced.com

Web design is a highly competitive yet highly creative industry. It’s an opportunity to have users interacting directly with your work. You have their full attention, but not for long. With this in mind, it’s important that your sites make an impression while still offering a big dose of functionality and accessibility. Read on for some great advice on securing a career in the industry from several experienced web designers.

What abilities should I possess? What essential skills does a web designer need to have?
Nik Gill: You have to have a good eye for detail and keep in touch with modern styles. The key to user interface design is using all your skills to produce a design that will appeal to both your client and its customers.
Coen Grift: No web designer can call himself a web designer without using words. Of course, you’d have to know how to use Drop Shadows, while you’ve got to love those phat Bevels! But seriously, you need to know your software inside and out.

We travel to the wide open spaces of New Zealand and discover what is happening in the unique animal-loving lives of leading creative agency Resn

Resn is a creative digital partner to some of the world’s most respected advertising agencies and brands. It is one of Australasia’s most internationally recognised digital agencies, having won coveted FWA, Webby, SXSW, One Show and Pixel awards. Resn is renowned for pushing the boundaries of digital design and creatively maximising the potential of current and emerging interactive technologies. It has been published by Taschen multiple times and been featured in major industry magazines from Japan to the U.K. It has delivered digital oomph for brands such as BBC, Puma, Panasonic, OECD, Mitsubishi, BlackBerry, Coke, MTV, Ricoh, Toyota, Mentos, Johnson & Johnson, British Home Office and The All Blacks. Its ability to consistently create international awarding-winning work puts Resn’s clients at the front of the class.
Resn is independently owned and operated with its headquarters nestled within the bosom of New Zealand’s capital city of Wellington. Resn is best known for its unique ability to deliver unorthodox online experiences that have provocatively fresh design coupled with technical wizardry. The Resn crew are from diverse creative backgrounds. Apart from the interactive and digital industry its team have previously worked in television, film, music and kebab shops.

AW – Andy Williams, digital strategist

WD: To kick-off can you tell the readers how you got started, what was the thinking behind the name and why did you finally decide on Resn?
AW: Resn was started by Steve Le Marquand and Rik Campbell back in 2005. Steve had another small business at the time that did a lot of Flash work for ad agencies before they had any internal digital capabilities. Rik had just returned from some time living in Vancouver where he was working at Blast Radius. So Steve bought the Flash development know-how and Rik provided the design background. Resn started from pretty humble beginnings in one little room, now it has taken over a whole floor.
How the Resn name came to be is pretty hilarious actually. Brainstorming for names between Steve and Rik ended with ‘Resin’. So off they went to buy ‘resin.co.nz’ but it was taken. So what did they do? They just removed the “i” and bought resn.co.nz. The name has helped us come up with joke company mottos like “We’re all a team. There is no ‘i’ in Resn”. It was actually really helpful for tracking our activity with Google searches due to it being rather unique… until Nike launched a pair of shoes called ‘RESN’. Thanks Nike!