Users can download the Web Designer app from the iTunes app store and get the latest issue, or a back issue, for a mere £2.99. The Web Designer app gives user the ability to flick through the digital pages, bookmark, share and view the zoomed or full-screen pages in landscape or portrait modes. Sign up and subscribe now, you will not be disappointed.

1.  Tweet Blender

AUTHOR: Kirill Novitchenko
URL: http://wordpress.org/extend/plugins/tweet-blender/
VERSION NEEDED: v2.0.2 or higher

Twitter is the microblogging social networking tool that millions of us cannot resist. It offers information quickly and succinctly making it a must-have everyday online commodity. Tweet Blender is an absolute cornucopia of features that ultimately ensures that WordPress social butterflies can get their tweets displayed smartly in a blog. The plug-in can also show tweets for multiple authors and multiple keywords and multiple hashtags, which are all then blended together into a single stream. Other features include the option to switch on/off a user’s photo, saving screen space, but allowing photos to be switched on in the Archive page, this is full list of tweets. There is the option to show a maximum of ten tweets and a minimum of one tweet in the initial display.
All a user really needs to do is supply the plug-in with a host of currently active Twitter sources. Users can simply add keywords, @screen_names or #hashtags separated with commas and the job is done. The plug-in is a darling to control, the widget can be control via Settings>Widget or alternatively its Appearance>Widget to take quick control. Plus, the finished on-screen widget in action is simply, but beautifully, crafted and great to look at, what more could you want?

2. Facebook Dashboard Widget

AUTHOR: Chris Chrisostomou
URL: http://mou.me.uk/projects/wordpress/plugins/facebook-dashboard-widget/
VERSION NEEDED: v2.5 or higher

This plug-in provides the perfect opportunity to kill two birds with one stone being something of a time saver and easily accessible from anywhere. This nifty little plug-in integrates itself into the WordPress admin area allowing WordPress users a quick fix of Facebook. The plug-in processes the Friends status updates RSS feed, posted items feeds and/or Facebook notifications feed, and adds a widget for each to the WordPress admin dashboard. Managing the widget is pretty simple, each section – Friends Status Updates, Notifications and Posted Items – simply asks if users want to display the related widget, the number of updates to show and the widget height. To make each of the widgets active the Feed URL needs to be posted and if you have no clue there is a handy set of instructions on how to find each of the required URLs. Make sure you read these as it will definitely help. Once set up each feed can be posted into the sidebar individually via Appearance>Widgets. Admittedly this is not the most constructive use of Facebook in a WordPress environment but we couldn’t resist. If you love Facebook and need a regular fix this plug-in is just the answer.

3. uQuery iPhone App Widget

AUTHOR: RADSense Software
URL: http://wordpress.org/extend/plugins/uquery-widget/
VERSION NEEDED: v2.6 or higher

The soon-to-be omnipresent iPhone is a mobile gadget that is hard to ignore, but what has it got to do with WordPress? Well, in this case this simple lightweight plug-in is all about telling users where they can get a specific iPhone app. With developers constantly expanding the already burgeoning iPhone apps library, desirable apps can be hard to find. The purpose of this extension is to paste in the app ID or the iTunes URL and it will automatically link to and format the relevant details. This in part is to promote its own website www. uquery.com, an App Store search engine. The iPhone App Widget is a little bit different in that it doesn’t go down the typical route as used by most other plug-ins. It installs a button that appears in the Add New Post window alongside all the other formatting tools. The plug-in can be configured and it really couldn’t be any simpler as there is only one option. There is a checkbox that offers the option to Include uQuery search box in the widget. This means introducing a search field which will allow users to search the entire uQuery website.

4. WordPress Mobile Pack

AUTHOR: James Pearce/dotMobi
URL: http://www.assembla.com/wiki/show/wordpress-mobile-pack
VERSION NEEDED: v2.5 or higher

The mobile web revolution is set to hit the big time soon and WordPress users need to be ready. The dotMobi WordPress Mobile Pack is a comprehensive toolkit that looks to assist with getting a WordPress site ready for the mobile screen. The pack includes four mobile themes allowing users to switch from the default buff and black to a more engaging green, red or blue. These are activated directly from the Themes windows, the same as standard desktop themes. All mark-up is valid XHTML-MP 1 and the site scores five on mobiReady, the dotMobi compliance and mobileOK test tool. The Mobile Switcher feature automatically suggests desktop or mobile, but lets users switch to the alternative option and remember the decision made. This option is disabled by default, enabling users to choose the switcher mode, ie Browser detection, a mobile-theme desired desktop domain. Mobile Widgets offers the option to select currently active widgets to appear in the theme. There is a mobile admin panel where bloggers can access the admin interface and edit posts. Finally, the plug-in also has basic recognition of mobile devices and is capable of rescaling images, splitting articles and posts into multiple pages, simplifying style and removing media.

5. Google Analytics For WordPress

AUTHOR: Joost de Valk
URL: http://wordpress.org/extend/plugins/googleanalytics-for-wordpress/
VERSION NEEDED: v2.7 or higher

The Google Analytics plug-in automatically tracks and segments links and downloads. It also allows users to track AdSense clicks, add extra search engines and track image search queries. To use the plug-in users need an active Google Analytic account and their Analytics Account ID. In its basic form the Google Analytics Settings module is nothing more than three options and one is the account ID. To get to the more meaty workings of the plug-in it’s over to the advanced settings. This activates the features domain tracking, tracking AdSense and track extra search engines with a single click.

Fancy winning a cool

With just under a month to go before the Vodafone App Star competition closes, the race is on across the European developer community to design and build the best mobile app and win a share of the €1m prize fund.

The Vodafone App Star competition is open to any developer across the world and closes on 31^st March 2010.  Developers can choose to submit their app into one of eight markets (UK, Germany, Greece, Ireland, Italy, Netherlands, Portugal or Spain) and the best entry in each market will receive €25,000. The second and third best entries will receive €15,000 and €10,000. The winning entries from each market will then progress to a second round of the competition, where the top eight apps will be put to the public vote.  The app with the highest number of public votes will win an additional €75,000, with the second place app receiving €25,000.

Budding developers searching for inspiration need look no further than the recent winner of the Vodafone 360 Developer Conference App Star Auditions, held at Mobile World Congress last month.  Smartrunner, a sports-tracking and geo-tracking app that helps you stay in shape using your mobile, was voted the best app at the show by an audience of international developers, winning a €1,000 cash prize as well as a Samsung H1 device.  The German application informs you in real time about your average and maximum speed, distance and calories burnt.

Location-based services also rated highly among the developers attending the show: Italian-based Mobnotes, which provides a simple way of telling friends where you are and what you do, came in a close second followed by InfoBus Sevilla, a useful Spanish app to for checking waiting times at bus stops.   Further highly commended apps from the show included Mirotele, a Spanish widget, which recommends the best TV programmes any day and time according to your likes and preferences, and Weatherbug, a British app which provides current UK weather information.

Vodafone’s internal research has found that Lifestyle & Entertainment is the most popular application category in the Vodafone 360 Apps Shop across all markets, while the most under represented categories are Shopping, Social Networks, Food & Drink and Weather.

Enter the Vodafone App Star competition at www.jil.org/vodafone/appstar, now.

COMMENTS PROVIDE THE perfect riposte for blog viewers, they provide the platform for visitors to say exactly what they want. And what better way to illustrate written comments than with pretty-looking speech bubbles. The premise of using speech bubbles is that they immediately suggest that the text is an opinion from a user. Plus, web designers being web designers they need to look the part as well. So, speech bubbles are not only effective from a design perspective they are functional as well. This tutorial looks at using div tags and CSS to create a selection of different styles and formats all from the some base code. The basis of the code is two div tags, one to contain the background, border and text and the other to contain the pointer image, commentator title and date. The background image is relatively positioned to ensure that it lines up with the other div tag to create the illusion of a single speech bubble.

Originally appeared in Issue 165

01 Insert div tags

Open a new blank page via File>New>Blank Page>HTML>Create and save with a relevant name. The standard speech bubble consists of three div tags. Insert the first via Insert>Layout Objects>Div Tag>OK and add another on a separate line. Now place the cursor inside the first set of div tags and add another div tag.

02 Create classes

Now remove all the default text, this will leave three sets of empty div tags. Now go to Format>CSS Styles>New to create a new class. Select Class from the Selector Type drop-down list, add a name, ie speechbubble, and press OK and OK again to create an empty class. Now repeat for the other two div tags.

03 Apply classes

Select the opening and closing tags for the first div tag, this will include the second set, and select speechbubble from the Class list in the Properties window. This applies the class speechbubble to the first set of tags. Now select the second set and apply the comments class and finally select the third set and apply the commentator class.

04 Font

Double-click .speechbubble in the CSS Style panel to open the CSS Rule definition window. Now select the desired font, Arial, Verdana, Georgia etc, from the drop-down list and select a font size and colour. Try 1.2em for a flexible font size or 16 pixels for a fixed font size. Experiment to suit your needs.

05 Bubble width

Now select the Box category and define the width of the div tag. There are several options here. Use a percentage, ie 80% if the bubble placement is in a liquid layout. If using this option add in the min-width tag, ie min-width: 200px, so the text is still easy to read, Alternatively, use a fixed width, ie 450 pixels.

06 Border and background

The next step is to define the border and background. Click Background and select a background colour from the palette. Now click Border and define the border for the bubble. To get started try a solid border with a width of one pixel. Choose a colour that compliments the background colour and press Apply and OK.

07 Add text

To view how the speech bubble will render add in some dummy text between the comment div tags. Make sure there is enough text for at least two lines. Note that the text is tight to the border, open the .comment CSS Rule definition window and add in ten pixels of padding for all sides.

08 Commentator text

Now add some dummy text to the remaining, commentator, div tag to bring into view. Double-click commentator, select Box and add some padding, eg Top: ten pixels, Left: ten pixels to position the commentator’s name. Head back to Type to determine the font size, style etc if different to the bubble font options.

09 Margins

Currently, there is a single instance of the speech bubble on display. However, if to be used to style comments there needs to be some breathing space between each comment. Add in a 20 pixel bottom margin to the commentator tag and press Apply and OK. This will vary depending on style, modify to suit.

]]> http://www.webdesignermag.co.uk/tutorials/create-css-speech-bubbles/feed/ 5 http://www.webdesignermag.co.uk/blog/go-compare-qa-with-rob-webber/ http://www.webdesignermag.co.uk/blog/go-compare-qa-with-rob-webber/#comments Mon, 22 Feb 2010 17:49:06 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=4055 Web Designer has a quick chat with Rob Webber, commercial director of Richweb Media, the company behind comparison website Broadband Expert. The site compares broadband packages by download limits, speeds, set up fee, first year cost and minimum contract. Plus, they advise the type of usage each package is suitable for and provide a broadband speed checker and monthly download estimator.

What made you decide to break into the comparison site industry?

Three years ago, when a work colleague Richard Patterson and I decided to develop a web based business, the comparison site marketplace wasn’t saturated like it is today.
Having both worked at a company that provides competitive intelligence to online marketers, we had a fair idea about what would make a good online business. We were encouraged to try out our skills because we knew we could provide a better service to online consumers than many of the existing comparison sites, who we could see were still making big profits.
We set up www.broadband-expert.co.uk and took the plunge to go full time.

What skills did you need in order to set up?

When we began, we knew that an understanding of online marketing would be essential. You can build the best comparison site in the world but if you can’t get visitors to use it then it’s worthless. We turned to the internet to brush up on our marketing skills and read books, articles and magazines covering all aspects of online marketing to prepare us for what was in store, but it was – and still is – a learning curve for us.
We made a lot of mistakes early on by assuming we knew more than we did about the online industry. We learnt the lesson that it is important to get experts involved in the areas you are not knowledgeable about. For example, creating a comparison website relies heavily on search engine optimisation techniques, so we ensured we turned to the experts in this area for advice.

How has the comparison site industry changed since you started out?

It is getting more difficult to stay profitable in the comparison site business due to such fierce competition, especially in the more obvious areas like comparing credit cards, energy prices, loans, and even broadband. In order to remain successful and profitable, we try and dominate a few key areas rather than spreading ourselves too thinly.
For example, two years ago we chose to switch the focus of our UK broadband site away from home broadband to mobile broadband which was a growth area with less competition. We also run our business very efficiently and are very careful with costs. Additionally we have invested in technology so that we can pinpoint the advertising that works for us, allowing us to get the very best from our expenditure.

What are the opportunities for web designers looking to start out in the comparison site sector?

There are still opportunities if you can find a less competitive niche or an up and coming area. For example, we launched www.simonlyoffers.com in 2009 and this is now the leading site in this marketplace. We were quick off the mark to set up this site – and it paid off. If we’d waited just a few more months to begin establishing SIM Only Offers, then competition would have made it much more difficult to have succeeded.
The UK is leading the field in online marketing and comparison sites and the market is strong with some talented people involved, so we’ve launched sites further afield and now have broadband comparison sites in the US and Australia. Competition in these regions is weaker than the UK though there are a number of other hurdles that present themselves in its place.

What are the advantages of designing a successful comparison site?

Despite the fierce competition and a rapidly changing business landscape, there are big advantages of operating a comparison site business. You can maximise your return and reduce overheads by running your business from home. There are also generous returns from running even a small comparison website if you are savvy in keeping your costs to a minimum.

What does the future hold for Richweb Media?

Our future depends on developing high quality sites that offer real added value to the online shopping experience. Identifying opportunities to differentiate our site from the competition will be the key to making our sites stand out from the rest.

Andy Budd, UX Director, Clearleft
www.clearleft.com

“In terms of a tool for designers to use, the iPad is clearly for consumption so doesn’t have much place in the creative process. However I can see it becoming a popular way for designers to demo their work to clients over coffee or in a pitch. I know that’s how I’m planning to use it.

The interesting thing for me is the way the iPad closes the gap between the mobile and traditional web. Until recently, the majority of web designers hadn’t really explored the possibilities of the mobile web. The iPhone helped break down the traditional barriers associated with mobile web development and created a generation of iPhone developers. However the web was still a constrained and fiddly experience. The iPad has the potential to change all that.

Big media clients will be the first to exploit the iPad in an attempt to charge for content that they currently give away for free. However rather than paying for the content, people will be paying for the experience; and who best to provide that than designers versed in interaction design and user experience?

The rise of iPad applications won’t just be the preserve of the big players. In fact we’ve already had our first request for a small, bespoke iPad application and I expect many more to come.

The iPad will bring its own set of constraints, and I’m not a huge fan of multi-tier systems where the same content needs to be repurposed for different formats. However I do think the iPad will herald a new age of highly targeted and device-specific experiences that mix the connectivity of the Internet with the benefits of a controlled system. So I’m very much looking forward to seeing how far designers and developers can push this new consumer device.”

David Burton, Head of Innovation, Red Web
www.redweb.com

“One of the problems I have with the iPad is that I can’t clearly see its usefulness. It’s not as powerful and multifunctional as a laptop or notebook. It’s too heavy to hold at arms length, too neck breaking to have it sit in my lap, and too awkward to prop up on a table for watching video. The screen is too bright for reading ebooks. On the other hand it’s not as personal as a phone, it’s not as handy, as small, as portable. I won’t be able to have it with me 24/7.

So I just can’t see its purpose. Perhaps I’m just happy with my iPhone and MacBook and don’t need anything in between. Having said that, perhaps I’ll then need something between my iPhone and iPad and then iPad and MacBook. So many gadgets, I can see Apple rubbing their hands together already.

The other problem is that the iPad is a scaled up iPhone rather than a scaled down laptop. As such it runs on the same model as the iPhone. This means it will only run one app at a time. (Come on Apple, haven’t you seen what Android can do?) More importantly though, it means there’s a very closed, controlled and Apple owned approach to software development for the iPad.  Yes this is good for usability within applications, but in general users and developers will suffer: it limits creativity, chokes innovation, disregards choice, and is harmful to a healthy digital future.

So, no, I won’t be in the queue to buy an iPad. But when interest (and revenue) from this product show signs of waning I’ll be listening out for rumours of the next Apple product. I’d like a MacBookTouch, a powerful, double touch screen laptop, that I can put to a great variety of uses and onto which I can install any software I choose.”

Paul Jamie Kidd, Creative Designer, Blue Ink Agency
www.kidd81.com

“The long, eagerly awaited introduction of the iPad really surprises me to be honest. I haven’t had chance to physically get my hands on it and although it is a seriously beautiful piece of kit, I can’t help but think it may be a bit of a white elephant in Apple’s phenomenal range of gadgets. The introduction of the iPhone to the UK market in late 2007 truly revolutionised the way we can access information in the palm of our hand and effectively put it in our pocket, which you are unable to do with this device.

When designing websites for such devices effectively you are designing for Safari browsers and therefore this browser can handle HTML and CSS markup so user interface design itself isn’t a problem as such. The iPad – in order for it to be taken seriously when it comes to viewing websites is the support – or lack of support – for flash…including over 70% of games and 75% of video on the web. When designing sites which require animation of such, alternative stylesheets have to be implemented for mobile users to view an alternative site so there maybe that to consider when designing the page. The only real benefit over the iPhone when surfing the net on the iPad is that it has a 1024px x 768px screen which will give any consumer a better viewing experience when browsing sites.

We will shortly be entering a new html standard, HTML5. One thing HTML5 can do is replace Flash video players. Google has already begun testing the video tag in HTML5 with the h.264 video codec on YouTube so ultimately the iPad will be able to view YouTube videos.  Apple has been a known supporter for the HTML5 standard so that things can be coded for better performance across browsers and not require plugins, which potentially slow browsers down.

To conclude, I feel web designers will more or less design pages the same way they have done with the iPhone. Making sure your markup works seamlessly in Safari and use flash alternatives such as JQuery for simple animation. Once HTML5 comes in to the mainstream, designers won’t be afraid to include video on their websites and should a flash site be an absolute must, include an alternative stylesheet for surfers to view an html only site.”

Zaid Al-Asady, Interactive Creative/Art Director, Wieden+Kennedy London
www.wklondon.com

“Apple’s newly released device has come under a lot of criticism in the last few weeks but if one thing is for certain, it’s that the iPad alters the way in which interactive designers will do their job.

The iPad can be viewed in both landscape and portrait mode meaning any website design should be adaptive, with the ability to work in both formats. More of an emphasis will be placed on fluid layouts and style sheets that can easily work both ways.

The interface is fully touchscreen meaning that many of the hover/ rollover effects designers use become unnecessary. It also means that hiding information or functionality to be revealed on rollover will no longer work. From a usability point of view, elements on the page will need to be larger than they appear on websites due to size and accuracy of fingertips compared to mouse pointers.

Many people consider one major drawback to be the lack of Flash, but with the power of DHTML, Google’s backing of HTML5 as well as Adobe’s Flash CS5 iPhone/iPad publisher there is no reason to fear.

These may all sound restrictive but the benefits far outweigh the negatives. If done correctly, designers are able to create stunning graphical applications and sites that utilise the powerful multitouch platform and offer a smooth and enjoyable interaction experience for the user.”

Peter Karlsson, CEO, Your Majesty
www.your-majesty.com

“Advertisers are looking to create and launch long-lasting and sustainable campaigns without having to increase the media spend. This has already been done to some extent with social media and the iPhone where the advertising almost has turned in to product development. With devices like the iPad there will be increased demand on agencies to understand and utilize new technology and for designers and art directors to create meaningful experiences and products.”

CHECK OUT ISSUE 168 for the full article | ON SALE 11th MARCH 2010 | Get your copy from the Imagine Shop.

Tell us what you think the future holds for the iPad and web design. Plus, if your getting one, tell  us why, we would love to know. Email us at webdesigner@imagine-publishing.co.uk

THE NEW MOTION EDITOR IN FLASH CS4 ALLOWS YOU TO CREATE COMPELLING ANIMATIONS FASTER THAN EVER. HERE WE’LL USE TWEENING TRICKS TO BUILD A SIMPLE PHOTO GALLERY

TAKING SOME CUES from After Effects, Adobe has completely overhauled the way tweening works in Flash CS4. These new features are designed to allow you to create animations quicker and easier than previously possible. The new Motion Editor takes everything required to create a tween and rolls it up into one panel, making it much easier. From here you can tween Basic Properties (in 2D or 3D), transform properties, colour effects, and filters while also allowing custom or preset eases to be added to your tweens.

In addition, after you’ve created a tween you can save it as a reusable Motion Preset. This allows you to easily reuse animations in future projects by simply applying them to new objects from the Motion Presets panel. This  short step-by-step guide will specifically highlight  some of these new tweening capabilities in Flash CS4, using a simple photo gallery component as an example. The Motion Presets and assets for this tutorial have been included on the CD and can also be downloaded from www.webdesignermag.co.uk.

01 File setup

Create a new ActionScript 3.0 file with Flash CS4. Make sure the frame rate is 30fps and resize the stage to 600×600. Add a background colour or pattern and a title/description of your choice as shown in the example provided. You can also add any other elements you choose at this stage.

02 Import photos

Next, you’ll need to import each photo that you would like to use to the library. When you are finished, create a new folder on the timeline and place each photo onto a separate layer. Make sure each photo is at the same x and y position and that they all measure exactly the same size.

03 Photo setup

When all of the photos have been added, it’s time to set them up. For each photo, select it and create a Movie Clip symbol (press F8 or select Modify>Convert to Symbol). Make sure you select centre registration for each photo. This will be important for the animations we will create later.

Add a Twitter feed to your blog with Flash

MASH THOSE TWEETS INTO YOUR SITE WITH SOME SWXFORMAT ACTION

Twitter seems to be the big buzz word at the moment. Just over a year ago the number of users was still only in the thousands, but now it is in the millions and everyone is using the micro-blogging tool, from designers to celebrities such as Stephen Fry and William Shatner. A rather nifty idea is to create a little badge to go on your blog so visitors could see what you’re staying via Twitter as well as your blog. There are a few free twitter badges, but they don’t give you the freedom to really put your own design into the badge. They limit you to background and text colour, so why not to create your own?
You may find you have a problem with your badge working fine on the desktop but when you place it online you may have a cross-domain issue. So how do you get around this problem you ask? Well, it’s SWXformat.org to the rescue. SWXformat acts as the proxy to get your data and then sends it to your Flash file online. So let’s get cracking and make a Twitter badge!

Download the project assets by clicking here

01 Installing SWXformat

It’s best to set up your development environment, so first of all you need to download the latest version of SWXformat. You can go to the site swxformat.org or straight to the source code here: http://tinyurl.com/decewk, For AS3 support, copy the “org” folder from Library/v2/AS3 next to your Flash document.

02 New Flash file

Open up Flash CS4 and create a new Flash File (ActionScript 3.0) and make the stage 211px x 428px, Call the first layer ‘BG’. On the cover disc you’ll have an fla file called Twitter, inside that we have created a background, but please let your design skills loose here. Add the background and then create a new layer called ‘panels’.

03 Panels

So the Twitter posts stand out we need to create five panels, again these are supplied in the source fla on the cover disc, but we urge you to be creative. Place the panels at 7px on the X axis and then place them at equal distances apart on the Y axis. You can do this by selecting all the panels and then using the Align properties panel.

04 Data 1

Add a new layer called ‘data’. Place two dynamic text fields over the top panel you just created. Open the Properties Inspector and in the Instance field name call the first item ‘one’, this should be approximately three lines high because it will store the tweet. Next call the second item ‘created0’.