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.

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.

Web Designer

With four pages dedicated to web designers’ work it provides the perfect platform to be seen by the masses.

Don’t be shy, we really do want to see your portfolios. If you think you’ve got what it takes, email me at steve.jenkins@imagine-publishing.co.uk with a URL and a quick comment. It may only be a matter of time before you can show off to your friends and family. I do every month!

If, like the rest of the Apple loving world, you spend the entire WWDC announcement flicking through web feeds frantically trying to get all the information as it happens and would rather take things easy this year, why not tune into the iCreate Mac loft live video feed and let them do the hard work for you? They’ll have all the news on the new iPhone from all the feeds as the keynote happens, as well as lots of other cool coverage from the Mac world. Not only that, but you’ll also get their expert opinion on the events as they unfold.
What do you need to do to see this fantastic coverage? Just visit the iCreate blog (www.icreatemagazine.com) at the time of the announcement and click the link. Its that simple. During the event, the team will be using the twitter tag #macloft so feel free to get in touch and your tweets will be posted up on the screen as they are sent.
If you have any point for discussion that you’d like the team to cover or any questions for the hosts, feel free to tweet them using the hashtag or to leave them in the comments on the iCreate blog.

Special guest for episode 10 is self-styled web goddess Sarah Parmenter from You Know Who who talks iPhone and iPad design,  starting a business and mentions that her dad owned an off-licence. We love you Sarah.

To make sure that you don’t miss out on over 40 minutes of pure Web Designer audio heaven get episode 10 now.

The latest issue of Web Designer boasts fifty of the best tips and techniques for leading blogging platforms, WordPress, Joomla, Drupal and Squarespace. For a taster of what can be expected here is a selection of exclusive online tips. If you love these we guranatee that the 50 Top blog tips feature in Web Designer 171 will not disappoint. Enjoy.

Wordpress

Modify post date
By default, WordPress posts are assigned the current date and time. This means that if a post is time or date sensitive, eg the author forget to post on the correct date, it can look out of place at the top of the post pile. To change the date of a post first select the post by pressing Edit. In the Publish module click Edit next to Published on:. Change the date, click OK and press Update Post.

Schedule a post
Typically, posts are published the same time as they are created. However, if needed a post can be post dated to appear at a certain time in the future. First, create a new and head to the Publish module when complete. Click the Edit link after Publish immediately, add the desired date and time and press OK. Finally, click the Schedule button to finish.

Joomla

Essential free extensions
When you install Joomla you just get just he bare bones of a CMS. The next job is to ‘pimp’ your Joomla ‘ride’ by installing extensions. Here are a few ‘must haves’ which you really must download: JCE Editor (www.joomlacontenteditor.net/) is an essential content editor, JoomlaComment (http://joomlacode.org/gf/project/joomagecomment) puts comment boxes beneath all stories (don’t forget, unlike WordPress, Joomla does not include comment functionality by default), Foobla RSS Creator (http://foobla.com/) handles all your feed needs and JoomlaStats (http://www.joomlastats.org/) handles site traffic stats. These extensions are free and will really enhance your Joomla experience, so what are you waiting for?

Uninstall old extensions
Extensions can be a cause of security holes. Take a look at the vulnerable extensions list at http://docs.joomla.org/Vulnerable_Extensions_List for a rogues gallery of evil extensions. You may wish to patch  or even uninstall potential dodgy extensions. Before you do any of this back-up your database, so why not install Akeeba Backup (www.akeebabackup.com) a free component that allows you to restore your site easily. To properly remove an extension (rather than just disabling it) select Extensions – Install / Uninstall from the menu and then select the type of extension you wish to uninstall. You have the choice of removing any non-essential component, modules, plugin, languages or template.

Squarespace

URL Shortcuts
Squarespace includes URL Shortcuts to perform URL Rewrite, 301 Redirect, and 302 Redirect. This is an incredibly handy feature if you need to move a page in an SEO friendly way, but this feature has additional uses as well. Sites like Google, eBay, and Paypal often request that you point to a /root level ownership verification file within your site. Since all files within Squarespace exist at “/storage”, you’ll need to use the URL Shortcut feature to point “/file” to “/storage/file” within your site. You can access the URL Shortcut feature within the Website Manager under “Structure”.

Optimizing Squarespace sites for Search Engines
While Squarespace sites are setup automatically to use clean URL structure for modern SEO, there are a couple of additional tweaks you can make to ensure site visibility. Make sure that you’ve enabled search engines to index your site content. Go to Website Management>Website Settings>Search/Indexing. Add a “Description” for your site, and check the boxes to allow search engines to index and archive your site. If you’re using a Journal page within your site, open the Journal configuration menu and scroll to “XML-RPC Ping Options”. Click the listed sites to enable pings for new entries automatically.

Code Injection
Squarespace includes Code Injection Points within Website Management>Website Settings>Code Injection that you can use to add new regions of code at various points in the lower level markup. These points allow for the addition of Flash header code, Google ad banners, custom navigation, etc. However, a favourite trick is also to open a <div> tag within a top level injection point like “Pre Canvas” and close the </div> within a lower level injection point like “Post Canvas”. This way, you can add additional wrappers to your site as needed.

Total CSS Control
Deep within the underbelly of Squarespace lies a dark and powerful feature that only the most seasoned of developers dare to explore. Within Style Edit Mode > Advanced you’ll find a small check box for “Complete CSS Override”. This setting removes all Squarespace Core CSS and puts you in control. For advanced users, this setting is sure to be a CSS Edit, lights out, zen in the art, romp through a cavern of mystery – with only the markup to guide you. Novice users should expect to turn back fairly quickly.

The latest issue of Web Designer goes on sale this week (June 3rd) so here’s a preview of the cover art and a quick glimpse at the key areas of content to watch out for:

WEB DESIGNER 171

Top 50 blogging tips for design and maintenance across the key CMS brands including WordPress, Joomla!, Drupal & SquareSpace

Flash Under Fire? A look at how the Apple/Adobe row over Flash could change the face of dynamic design forever

Behind the Scenes with Scottish agency Chunk, plus a Q&A with the app development team at UsTwo

Draw charts with jQuery, develop eCommerce solutions with Actinic 10, plus video with Silverlight 4

GET YOUR COPY VIA OUR OWN IMAGINE ESHOP