Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 11 2013

13:00

An Analysis of Responsive Websites – What’s Hot and What’s Not

Let’s face it folks, everyone in the web design world is chirping away about responsive websites these days. People definitely carry strong views about it and whether you like it or not, you cannot deny the fact that responsive web design has gone mainstream and will continue to progress and expand in the future.

Every client on the web these days are looking for a website that will function just as good on mobile devices as it does on desktop browsers. And come to think of it, the need of today’s modern technological era is to have one working design that is compatible across multiple platforms and devices that includes Netbooks, Blackberry’s, iPhones, iPads, Kindle readers and other smartphones and tablets. It’s inevitable that over the next few years, new gadgets and devices will be unleashed in the market, all having their own respective screen sizes and resolutions.

It seems almost impossible or at least impractical to have a different website version for each of these devices. Some people might opt for creating websites for one platform or device only but they stand to face the risk of losing viewers of other devices.
So what is the solution to this predicament?

The answer is simple – Responsive Web Design

For those who are totally new to the concept, Responsive Web Design is a design technique that thoroughly focuses on a user’s environment and behavior based on the orientation and size of his screen as well as the platform. This methodology integrates a blend of cleverly laid out grids and images combined with the smart usage of CSS Media Queries. What happens is that, when a user switches from his desktop or laptop screen to his iPad or iPhone, the website will automatically itself to fit the device’s screen.

In a nutshell, you could say you are empowering a website with a kind of artificial intelligence which lets it respond to the user’s environment. Responsive Web Design has gained tremendous popularity in the Web Design World as it eliminates the need of having different development and design phases for every different gadget in the Industry.

So if you are looking for inspiration for your next website, you should look at these fresh and stylish responsive design layouts (in no particular order) which cover a wide range of companies and design strategies. Here, we will focus on the mobile side of these responsive websites and try to take a look at what practices make these websites an inspiration to everyone who’s looking to transform their web design to function across multiple platforms and devices.

1. Sony

Sony

Sony manages to get everything right in their elegantly designed website. My favorite part of their responsive design approach was seeing the way their navigation bars change when switching from desktop to mobile devices. On a mobile device, the main navigation menu will change places with the social media buttons. The menus also compact themselves into a single drop down button where the different pages can be accessed easily.

2. Starbucks

Starbucks

Starbucks is unarguably one of the biggest retailers in the world and it was one of the first to make the jump to responsive web design. The minute you switch to mobile from desktop on this website, you get the feeling that they have a sizable team with a substantial budget working on the transformation. The first noticeable thing was that the initial breakpoint arrives at the 769px mark (I assume this has been done to accommodate the portrait orientation of tablets). The best thing about the design is that the navigation adapts itself automatically across different breakpoints. For example, at the largest breakpoint, the top level menu allows you to jump across two levels of navigation for viewing a page.

3. Aids.gov

aids.gov

Aids.gov‘s website is probably the first US government website that has made the switch to responsive web design. I noticed that they use the HTML5 doctype without the use of any additional HTML5 elements like articles, headers or sections. Specific attention has been paid to the website for how it is viewed by users on Windows IE Mobile 7. Aids.gov employs the standard responsive web design approach as the website was redesigned from scratch. The theory lies in working with the smallest screen size and resolution first and then building up the additional required CSS code as the breakpoints are increased. Responsive images have been incorporated to make the website more visually appealing with special emphasis on how the script dynamically recalculates the appropriate height and width of each image based on the screen size.

4. Dairy Queen

dairyqueen

If you want to feast your eyes on one of the most perfect examples of responsive web design, head over to the Dairy Queen’s official website. One of the best things about the design is the fluid slider motion for mobile devices. There is a strong emphasis on how visible the content is to users across multiple devices and screen sizes. The main navigation menu wraps up into a smart drop down box at the first breakpoint allowing users to easily navigate the different food categories. All in all, the website is a visual treat and a perfect execution of elegant and efficient responsive web design.

5. Alsacreations

alsacreations

This is one website that has taken a different responsive web design approach than most websites present on the Internet. Alsacreations doesn’t worry about maintaining all their elements and aspects of their desktop website when a reader switches to tablet or mobile. Instead, Alsacreations drops their image slider from widescreen display to square and even more, when the readers switch to mobile they will not be able to see any of the original elements except for the About button and the Email form in addition to the links for all other elements. This has been done keeping the views of the specific target audience in mind where the creators have kept in mind that most users opening websites from their mobile devices do it to get the brief company information only.

6. Gravitate

gravitate

It wouldn’t be fitting to have a design studio website without responsive website design on their own page, right? Even if you are a lone freelancer, you would want your website to reflect your design skills and portfolio and this is exactly the approach that Gravitate Design Studio has incorporated into their website. They have kept and simple yet elegant design without going over the top on borders or shadowing or other flashy elements. The menu buttons on the top compact and nicely re-arrange themselves when you switch to mobile giving users to access to every page on the website.

7. Spigot

spigot

This is another web design and development company that has flawlessly perfected the art of responsive web design for their website. Going through the pages, you cannot deny the fact that the entire layout has been designed to work without any errors on desktop and mobile devices. You would expect that the shifting and animated icons would lose their touch on mobile devices, but this is not the case with Spigot. Although it would have been difficult to make this design work across all devices yet they have pulled it off magnificently setting a truly inspiring example for others in the field.

8. Disney

disney

Entertainment giants Disney have a website which is a perfect example of coherent designing across all devices and platforms. Smaller resolution doesn’t necessarily mean that you have to compromise on content. The beauty of this responsive design is that the focus stays always on the content that matters. Photos and Videos are the main focus of attention whether you open it on a mobile device, tablet or your PC. However the only drawback from usability point of view on mobile devices is that the navigation doesn’t have direct access in mobile version and you have to make up for it with an extra click.

9. Food Sense

food-sense

Another excellent example of sharp responsive web design techniques is Food Sense. It uses wide screen resolutions to the maximum but when limited by width on mobile devices, it adjusts brilliantly by managing to still maintain its smooth flow and tidy outlook. However, one drawback I noticed with the Mobile version was the loss of the latest Tweets and Facebook plugin which can be seen on the full version under the navigation bar on the side column.

10. Skinny Ties

skinny-ties

There is no better definition of perfect responsive web design execution than Skinny Ties. The design is even more impressive considering that it was a complex website – an ecommerce one. You will find a unique navigation experience across all breakpoints and viewpoint resolutions but the best thing about is its exceptionally responsive handling on mobile devices. Despite the use of the hovering function on touch devices, all visual aspects remain intact.

11. Coca Cola

coca-cola

Soft Drinks giant Coca-Cola made their entry into the fast changing web design world with one of the most complicated responsive web designs I have come across so far. One of the noticeable features is how the content boxes on the right hand side automatically align themselves below the slider so the user has no viewing problems. One drawback I came across however was some minor bugs with the navigation on 240×480 portrait screens.

12. Clean Air Challenge

cleanairhanller

First thing you notice about Clean Air Challenge are the moving clouds in the background. Like many, I expected the website to lose this animation on mobile devices, but amazingly the animation stays smooth and balanced. In addition to that, the website intelligently transforms into a vertical format while still maintaining its other aesthetic elements for example you will lose the images of the main navigation icons when you move to your mobile device but when you scroll down, they will be visible to you in the footer.

13. Contents Magazine

contentsmagazine

Contents Magazine gives one of the best illustrations of how effective responsive web designing can keep the content of the website at the center and front at all times – regardless of the device or platform used. The designers have managed to create a near perfect design where the pre-issued illustrations dynamically wrap around depending on the different breakpoints. The best thing about the design is that a reader will find genuine pleasure in reading the various content on his mobile site as the responsive images adjust themselves and never act as a distraction.

14. Crayola

crayola

Crayola gives us a perfect example of how cleverly used responsive web design can lead to navigation and content being scaled down for users operating a mobile device. When you look at the desktop version, the website has loads of tabs for navigation but when you switch to a mobile device, you get to see only the important ones whereas a user-friendly accordion pops up to accommodate the main navigation bar.

15. Time

time

In this day and age, it has become essential for every news site to have a responsive web design since they have to cater to the needs of a large population of their readers who want access to all the latest news and stories on the go. Time gives us an example of a minimalistic responsive web design approach while at the same time it sets an example for other News websites and companies on how to design grids and menus for easy viewing on a mobile device.

16. Smashing Magazine

smashing

Smashing Magazine sets the example for absolutely perfect responsive web designing where they demonstrate how the original design and content of a website does not need to be sacrificed on mobile devices. The developers of this website have paid attention to accommodating virtually every single screen size and resolution. One of the best things about viewing this website in your mobile device is that the ads simply disappear. The left side bar and the main navigation bar all wrap up into a drop down menu giving a mobile user easy accessibility to all pages of the site. One drawback is the absence of the social media buttons and the RSS feeds subscription button which are only visible in the desktop version.

17. Polygon

polygone

Polygon stands out from the rest of the crowd in the Gaming websites industry combining stunning artwork and responsive web design architecture for a superb display across desktop and mobile devices. But one very obvious drawback is that the social media buttons disappear when you switch from desktop to mobile.

18. Ableton

ableton

Even if you have a relatively heavy sight, Abelton demonstrates that with intelligently written code, you can still deliver a vibrant color combination with a mix of bold imagery across all platforms and devices. With the need to incorporate both video and music, Abelton have managed to do keep the focus on the content while making sure the design is not sacrificed.

19. Burton

burton

Although Snowboard retail giant Burton have incorporated responsive web design nicely for most elements of their page, there is still a lot left to be desired. For instance, the main menu navigation bar on a mobile device is nothing but a simple drop down button. The Board Finder tool is also missing which would have been a great feature for customers who are on the go and who want to find the perfect snowboard for themselves.

20. Abduzeedo

abduzeedo

Although Abduzeedo has a lot going on for itself on the Desktop, it doesn’t quite live up to the same expectations on a Mobile device. For starters, the posts automatically align themselves on the grid which makes them look clustered and improper. Regarding the sticky navigation on the Desktop, it has become more of a trend these days although there are two different opinions regarding this.

The Pros

There are companies that have chosen to design dedicated websites for mobile devices, tablets and desktops while there are others who have incorporated a single responsive web design that can accommodate a wide array of devices accessing it. The most obvious advantage of a responsive web design is that since there is a single website, it is much less of a hassle maintaining it. A single website means a single code for all devices and whenever you need to make a change, you will have to do it only once.

Responsive web designing is also beneficial for owners who are trying to get better SEO rankings as the website offers a single unique URL across all platforms and devices. There are numerous success stories in the industry where companies have reported an increase in mobile clicks to their website by as much as by 50% ever since they revamped their websites with a responsive web design.

The Cons

Providing a truly unique experience across different devices can become a hefty challenge for websites that are increasingly complex compared to others. This means your design team will be spending a lot of hours at the desk customizing and integrating various JavaScript sequences with HTML5/CCS3 code to create a balance between a native-app touch and a desktop-website feeling.

Although Responsive Web design is meant to provide a great experience for every user (and every device) accessing a merchant’s website, the ground reality is not always as such. In some cases, users find themselves having a better experience on Tablets rather than their smartphones and in other cases, it’s the opposite. Sometimes on mobile devices, the text can get too small for a user to read, forcing him to use the pinch and zoom actions – the exact same thing that is meant to be avoided by a mobile website. Getting the navigation absolutely right is another challenge that most designers face for responsive web design especially when it comes to smartphones. There is also a need for a fresh approach for image optimization and content management workflow.

The Final Take

Although widely adopted by a number of reputed companies and merchants worldwide, Responsive Web Design is still in its infant stages. And in spite of the challenges faced, many experts are of the opinion that this is definitely something to look out for in the future. More and more websites are leaning toward Responsive Web Design and if it is planned out properly, we might well see every reputable website as a stunningly beautiful blend of responsive web designing with specific touch elements giving mobile phone and tablet users a truly great experience.

July 20 2012

15:17

Photoshop CS6 = Better UX & Faster Productivity

I've been using Photoshop CS6 for a while and I have to say that the interface and user experience is a big improvement. Instead of releasing more new tools, Photoshop CS6 put a lot of focus on the basics — the essential tools that we use very often such as crop tool, type, layer group, [...]

Advertise here with BSA

Sponsored post
feedback2020-admin
20:51

April 12 2012

15:00

Power Your Blogs with Habari: The Next Generation of Blogging

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

If you are running a blog on a self-hosted platform, chances are you’re using either WordPress or perhaps Drupal. There is no denying the fact that both of these CMSs have excellent capabilities. They are ideal for many different genres of website. However, at times, when all you need is a small personal weblog, running Drupal is a bit overkill. In other instances, when the need of the hour is a no-nonsense and nimble CMS, WordPress might seem a bit bloated to some users.

If this is the case for you, Habari might be the CMS meant for your blog.

First Look

Habari is a blogging CMS with a modular, object-oriented core. With that said, Habari, unlike WordPress, is not everyone’s blogging platform. If you are planning to create a video blog or a photo blog, Habari may not impress you. It caters to the traditional blogger – and it does its job well.

Habari -- The Blogger's CMS

Habari -- The Blogger's CMS

Habari supports multiple database back-ends including MySQL, SQLite and PostgreSQL. There is support for Atom feeds, and the plugin repository contains importers for WordPress blogs.

However, the USP of Habari, as we shall soon see, does not lie in its blogging prowess (seriously, of the features mentioned in the above paragraph, which one is new?). Habari’s main forte is its minimal and swift operation – the CMS comes with an admin interface which is reduced to the bare minimum.

Before we decide the pros and cons of Habari as a CMS, we shall evaluate it under different categories.

Interface, Usage and Performance

The first thing you’d notice once you login to Habari’s back end is the ‘clean’ look and feel. The interface is neat, with the navigation menu sitting nicely in the upper left corner. Just like WordPress, Habari presents you with a Dashboard once you log in. By default, it shows details such as number of Posts, Comments, logged in Users, etc.

Habari presents you with a Dashboard after login

Habari presents you with a Dashboard after login

You can use keyboard shortcuts to navigate in the admin panel – ‘Q’ for Dashboard, ‘M’ for managing existing articles, ‘C’ for comments’, ‘N’ for New Post, ‘A’ for tags, ‘T’ for themes, ‘P’ for plugins, and so on. Of course, if you are editing an article, such shortcuts become void for the duration you are using the Editor.

Speaking of editing an article, the New Entry Editor is plain simple. There are no excessive elements – in fact, it resembles WP’s Editor (after you maximize the latter to full screen).

Habari's Article Editor sports a minimal and clean look

Habari's Article Editor sports a minimal and clean look

Along similar lines, the Options page too is rather minimal and, to a great extent, empty. It lets you enter basic info about your blog, time and date, language, and other similar settings.

Habari has a simple Options page

Habari has a simple Options page

In the My Profile section, you can edit your details – name to be displayed, password, Gravatar address (you can also use an image hosted elsewhere by placing its link).

User Settings Page in Habari

User Settings Page in Habari

Extensions, Plugins and Themes

Habari comes with several themes and plugins to its merit. However, most of the addons are developed in-house and/or by the community. So if you are looking for Premium Theme Stores resembling those of WordPress, you’re in for disappointment.

Among plugins, you also have the likes of Akismet and Defensio to secure your website, importers for platforms such as WordPress and Serendipity to import your previous data, as well as many others.

Habari is backed by several community driven plugins

Habari is backed by several community driven plugins

Community and Support

Habari has its own user group and IRC channel. The community is quite dedicated and the CMS has a loyal user base. However, the size of the community is rather small as compared to most other CMSs. This can be attributed to the fact that the CMS is still in its infancy (the latest version being 0.8). By the way, the frequency of updates is awesome.

The Good and Bad

Before we pass judgment, let’s sum up the advantages and disadvantages Habari.

Pros:

  • Extremely nimble and easy to use
  • No-nonsense, minimal interface
  • Dedicated community
  • Good documentation and support options
  • Support for multiple databases
  • Ideal for regular blogging

Cons:

  • Relatively younger
  • Small user base
  • Not meant for photo/video blogs
  • Few third-party developers

The Verdict

So, is Habari worth it?

Definitely yes!

If you are looking for a CMS with a clean interface for your blog, you should surely consider Habari. Unlike WP, Habari does not try to do many things – its target audience includes regular bloggers, and it serves them well. Yes, the CMS can indeed make use of few Premium themes and plugins, but all in all, it has all the ingredients to power an average-sized blog.

Links

Habari Home Page | Demo | Wiki

March 05 2012

10:00

February 17 2012

21:00

PageLime: A CMS Specifically Made for Web Designers

Picture this: you are building a website and wish to steer clear of the complexity of present day Content Management Systems (due to lack of time and/or other factors). Or, in other words, your website is a rather small entity (that perhaps does not require the collaborative abilities of Wikipedia or the social networking databases of Facebook). In simplest terms, you’re looking for an easy to use and nimble CMS that, though performs all the functions that you want it to, does not talk the geeky lingo.

Alternatively, picture this (comparatively better) scenario: you are a web designer (if you are reading this blog, chances are that you indeed are a web designer). You need a hosted, no-frills solution that lets you create websites for your clients (who may or may not be tech savvy), and resell them.

What is PageLime


If either of the above mentioned cases hold true, allow me to introduce you to PageLime, a web-based Content Management System.

PageLime

PageLime

PageLime is a hosted CMS service that lets you quickly set up and publish websites. Depending on the plan you opt for, you can add features to your site such as custom domain mapping, unlimited users/administrators, etc. You can also use it to re-brand the websites that you create and resell them to your clients. Sound good so far? Let’s dive in to check out its features!

Plans, Pricing, and Features


PageLime currently offers four plans, namely:

  • Free: As the name suggests, this plan is free to use. You can create up to three websites and have an unlimited number of users (but only one of them can have administrative privileges). However, you cannot map your own domain or use the websites for reselling. Plus, you will have to tolerate the PageLime logo on your site.
  • Professional: This plan lets you create 50 websites and have unlimited users (again, just one administrator). Additionally, you can use your own logo and colors, as well as map your own domain. And just in case you need it, reseller tools are also allowed in this plan. The Professional plan costs $19 per month.
  • Business: The Business plan gives you everything under the Professional Plan, with the added bonus of unlimited websites (and unlimited administrators). It costs $69 per month.
  • Enterprise: This plan targets large enterprises and service providers. The USP of the Enterprise Plan is that you can host it on your own server.

Also, you can try the Professional and Business plans free for 14 days before making up your mind.

Modus Operandi


We shall now take a look at the manner in which we can perform basic tasks in PageLime, and how it fares as compared to traditional CMSs. Please note that here, ‘traditional CMSs’ refers to what we’ve been using, such as WordPress, Drupal and Joomla!

Since we are evaluating PageLime as a potential alternative for traditional CMSs, for the sake of simplicity, each category of operation will be looked at individually.

Running Multiple Websites

As mentioned above, PageLime lets you create multiple websites (ranging from 3 to infinite, depending on your plan). Each website has its own admin panel, domain/sub-domain, and user accounts. You can login to your master account, and then select the website that you wish to modify/manage.

Running Multiple Websites

Running Multiple Websites

Speaking of traditional CMSs, support for multiple websites within the same installation, though possible, is cumbersome to say the least. Movable Type lets you create user blogs and websites within one installation, and so does LifeType. WordPress, on the other hand, tries to make the task comparatively easier, but it too caters to “a large network of blogs“. All in all, PageLime comes with excellent support for multiple websites.

Editing the Website(s)

PageLime offers an easy interface for editing websites – pretty much on par with other CMSs – bit more ‘beautiful’, but nothing out of the ordinary. Once you add the Pagelime editable CSS class to the code, you can edit pages, links and other components of your website. However, since PageLime caters more to websites, rather than blogs/journals, it offers features such as Live Preview that lets you view the changes that you make to your website on the fly. Furthermore, another unique feature includes Content Versioning – your previous drafts are saved, and if you ever mess anything up, simply head to Restore!

Editing Your Websites in PageLime

Editing Your Websites in PageLime

Among traditional CMSs, many offer the Versioning and Restore feature, and Concrete5 has been supporting Live Preview for quite some time.

Data/Media Management

PageLime comes with a built-in Image Editor (no, do not expect Photoshop). You can zoom, crop, sharpen and resize images. Beyond that, you can modify colors or use some predefined effects. All in all, you can happily upload images and modify or tweak them for the web within the CMS.

Managing Images

Managing Images

Hardly any other traditional CMSs offer this feature – though some offer file management options, but image editing is something you’re expected to do BEFORE uploading. CMSs especially built for image galleries, such as Piwigo, however, do provide you with such editing abilities.

‘Smart’ CMS

You can save pages as templates in PageLime for future editing, and it also comes packed with a Code Editor. Further more, it offers several pre-defined ‘templates’ that make your task easier.

Saving Pages as Templates

Saving Pages as Templates

This is perhaps an area where traditional CMSs do a better job, with no strings attached. While PageLime delivers what one would expect of it – you will definitely miss the freedom of WP Themes and Drupal Modules.

SEO, White Labels and Other Goodies

PageLime offers SEO options out of the box – you can edit metadata and other related info easily. Plus, the Business and Professional plans offer detailed statistics for each website that you create.

Detailed Stats

Detailed Stats

On the other hand, many CMSs such as Joomla and even Concrete5 offer sitemaps and SEO natively. At the most basic level, WordPress does the same by the use of plugins.

Reseller Tools

Quite unarguably, PageLime’s USP lies in its Reseller Tools. While the Free plan isn’t much, all other plans come with awesome reseller abilities. Apart from hosting multiple websites (each with its own admin panel and domain), you are provided with the option to re-brand and resell the websites (instead of PageLime’s, it shows your logo in the admin panel). Further more, your Reseller Panel shows you client payments, subscriptions and other sale-purchase transactions. And if that isn’t good enough, PageLime can automate recurring payments and invoices to make your life easier.

Reseller Tools

Reseller Tools

Obviously, such re-branding and reseller tools are not offered in any traditional CMS natively. WordPress and, to some extent, Drupal have plugins/extensions that can help you take care of the same, but the CMSs in particular do not come with reseller features.

The Verdict


So, the bottom line. Who should use PageLime?

Well, if you are a designer or a developer, you should consider using it for the ease of use and the reseller tools that let you offer it to your clients.

Also, if you do not possess the geeky expertise of web administration, Pagelime might just fit the bill for you. However, in this case, you should also bear in mind that in order to get the most out of it in terms of customization, you’ll probably need a rudimentary knowledge of HTML/CSS.

On the downside, the product seems a bit over priced if you do not wish to resell and make money using it. If, for instance, all you need is a simple no-frills website and are considering PageLime in order to avoid the other complex CMSs, even the cheapest plan will cost you $19 monthly (we are not considering the Free option as it does not have custom domain mapping, and a yourname.pagelime.com sub-domain is not something you might want for a website).

At the end of the day, PageLime is described as a “simple CMS for your clients”. In other words, it is full aware of the fact that its forte lies in the Reseller Tools.

Thus, PageLime should be in your arsenal if you are managing multiple websites or need an easy to use solution for your clients’ needs. For all other reasons, you’ll be better off using tradition Content Management Softwares.

If you have used or are using PageLime, feel free to share your views in the comments!

January 04 2012

10:00

Review Of New Twitter and Tweetdeck – What’s new?

Recently, Twitter went through a significant upgrade and redesign. This time the update is huge and comprehensive – starting with new mobile apps and ending with a new version of popular tweeting platform Tweetdeck. What has changed? Are there some things you should be aware of? Continue reading and check out a review of the new Twitter web version and the Tweetdeck to find out what’s new.

Twitter

Dainis-Graveris-(1stwebdesigner)-on-Twitter

The Look

You won’t see anything drastic on the new homepage yet there are some adjustments. The new homepage is designed to make it easier to access and scan the relevant information for you. The biggest improvement is the media which is now embedded into the timeline. There’s no need to view photos or videos in new tabs anymore, you can access them straight away ( of course, you still have to click). You can also immediately access your favorite features from the lefthand side.

Twitter-_-Home

The new homepage’s goal is to be consistent between all your devices. Twitter has always been about simplicity and nothing has changed with this version. Although with the right aligned timeline Twitter has has started to resemble other social networks.

The profile view has experienced some changes. The number of lists you’re included on is now gone. In fact, lists have been made more irrelevant with this update. You also get a larger picture thumbnail and the new Me tab allows you to edit your profile straight within the profile page.

Twitter-_-Home-1

@connect

Twitter-_-Interactions

The @connect tab has taken over the previous Activity tab’s duties. It’s the place where you can see who has followed or mentioned you, retweeted or favorited one of your tweets. The tab is splits Interactions and Mentions so you can easily track your Twitter influence. Basically nothing much has changed except the name which I believe does the trick.

Another thing Twitter has introduced in this version is the switch from usernames to real names. Now everything’s backwards – first name you’ll see above the tweet is the real name which is a hyperlink and only then comes the username.

#Discover

Twitter-discover

Discover lets you tap into a stream of useful and entertaining information, customized just for you. Discover is something like the old search function only way more better. What it does is it generated your personalized information and stories based on who you follow, your location, trends and your interactions. Discover tab consists of five sections – stories, activity, who to follow, find friends and browse categories. Interacting has been made extremely easy.

While some of the experienced users often get bored by those following suggestions which aren’t always the best, the #Discover is a superb feature for those who are new to Twitter and don’t quite know where to start off.

Brand Pages

Coca-Cola-(cocacola)-on-Twitter
Twitter has followed the example of Facebook and Google+ and introduces the brand pages feature with this update. Although it’s nothing game changing because most of the companies already have Twitter accounts this feature will allow companies to customize their header to make their pages look more official. Companies will also have the chance promote a tweet which will appear at the top of the timeline. The new pages also let brands separate their replies and mentions. And, of course, they’re free.

Embedding Tweets


The new update also comes with great news for developers. Instead of copying and pasting a code users can now simply embed their tweets with just a couple of clicks. All the usual actions are available and easy to use with the embedded tweets – reply, favorite, retweet.

WordPress bloggers will be able embed Tweets directly into their posts by simply copying the Tweet URL or using a familiar shortcode.

Finally, Twitter has refreshed the design of Follow and Tweet buttons and introduced two more buttons – #hashtag and @mention button. The new #hashtag button tells your visitors there’s an interesting conversation happening on Twitter, and lets them join in with just one click. The @mention button encourages visitors to Tweet to your account, driving public conversation directly from your website.

What’s gone

Most of the negative feedback comes from iPhone users. The option to translate tweets is gone and users can no longer copy and paste from a tweet. There’s also some buzz about saying thank you to multiple people. With the tweeting now happening from a pop up window you no longer reply to several people at once so you just have to type in the user names manually. Which again is a little inconvenient because of the use of real names.

Yet I was unable to find anything significant that the new version lacks so I’d be grateful if you could point these things out for me and other readers.

Overall

Twitter really appears to have hit the bull’s eye with this update. Most of the users seem very fancy about the new changes and reviews are only praising the new features. There are opinions that Twitter has officially gone mainstream but that’s the very same thing you’d do with such an influx of users. The new version really makes engagement and interaction easy. We’ll see the results but for now on it seems rather promising and optimistic.

Additional resources

Tweetdeck

0-new-twitter-tweetdeck-review

The same day Twitter announced it’s new version the most popular tweeting platform Tweetdeck got a new look as well. Tweetdeck was acquired  by Twitter in May 2011 allegedly for around 40 million dollars. Finally, the conversion from beta is complete and we can get our hands on the new platform.

You can get Tweetdeck either as a web application, Chrome plugin or desktop plugin. In this review I’m using the desktop version yet there’s actually no difference. So, what’s new?

The Look

1-new-twitter-tweetdeck-review

The most radical yet not so noticeable is the shift from AIR to a native desktop app. The dashboard is almost identical with the old version however there’s been an irreversible change. The next thing you might spot is the missing orange logo which is replaced by Twitter’s blue bird.

The column navigation has switched to the top of the window and is more handy. Yet there’s a considerable drawback namely the columns aren’t resizable anymore. Actually you couldn’t resize columns in the old version as well but the minimum width for them was lower and more columns would fit the screen.

Unlike the old version the tweeting is now done from a pop up window. Some other minor changes include blue links, switch from usernames to real names, tweets now miss day and date and a smooth search bar at the top right.

1-new-twitter-tweetdeck-review

Overall, the look now seems somehow cleaner and coherent. Browsing experience is made more pleasing and perceptible. Yet there’s a price. And it becomes apparent when it comes to performance and features which is far more important than sleek neat visual look.

Performance & Features

Usually with an upgrade we expect new features and improved performance but it’s quite discussible within this case. So is there something new? The message box is more compact as it merges the messages you have with a person. Also you get a solid info about a user you follow by clicking on his avatar. Yes, that’s about it.

3-new-twitter-tweetdeck-review

But what’s gone? First of all there’s no more support for Foursquare, LinkedIn and Google+ also hasn’t hit the list.

While some of you might be glad that the AIR is gone there are some cons. And the most apparent is the approximate 20 second delay for updating tweets. It may not be so essential for ordinary user but it may create some problems for those who used to use Tweetdeck seriously.

Here are other important drawbacks and missing features:

  • There’s no more option to edit lists and add new people to them.
  • Retweeted tweets doesn’t stand out in any way so it’s harder to spot them.
  • Media from Twitpic, Instagram, Youtube etc doesn’t show in a pop up. Instead you have to view it in browser.
  • @me column shows only mentions without retweets.
  • No drag and drop support for image upload.
  • You can’t translate tweets anymore.
  • No more support for keyboard shortcuts.

Overall

While Tweetdeck can be proud of the fresh beautiful look it just can’t hide and countervail all the missing features. One of the Mashable’s commentators wrote – “Tweetdeck wasn’t just a Twitter client but an overall social media dashboard.” Sadly but it’s kind of truth. Some maintain that this is the Twitter’s strategy to stimulate users to use the native Twitter website and maybe it is so.

However, Tweetdeck was never a business platform. It was created for Twitter power users and I believe it hasn’t changed it’s nature. The new look is definitely a benefit and, well, do we care if Twitter pushes us to use it’s own tools? For the average user it doesn’t make a difference and if the app works and meets all the needs – why not to use it?

December 16 2011

21:00

A Tale of Two Competitive CMS’s: WordPress And TextPattern In The Spotlight

WordPress and TextPattern are two very popular blogging platforms. Both of them began as blogging platforms (and somehow insist on being blogging tools even to this day), yet have quickly evolved into full-fledged and extremely powerful CMS’s. Both of them have pros and cons, and each boasts of a very dedicated user base as well as communities and forums.

In this article, we shall attempt to compare TextPattern and WordPress and see which one emerges victorious.

Before proceeding further, a short disclaimer: the division of this comparative review under multiple headings does not essentially have a logical explanation – I’ve simply attempted to compare it using four basic, but very important, categories, functionality and usability, mode of operation, extensions and plugins and finally, community and support.

Furthermore, I guess many users of WP and TXP will either agree or disagree with my views. To be honest, using a particular CMS also requires a certain amount of personal choice, what might work for me, may not work for you, and vice-versa. Differences in opinion are always welcome!

So without further ado, let us begin with our comparison.

Functionality and Usability


When it comes to functionality and usability, WordPress seems to win easily. While this does not mean that TextPattern is, in any way, less functional than WordPress, WP simply beats TXP in terms of ease of use! With the advent of version 3.x and higher, WP now boasts of a super organized administrative panel that lets you manage your website with ease. Don’t believe me? Take a look at WP’s admin panel. ‘Dashboard’, ‘Posts’, ‘Pages’, ‘Settings’ – which of these sections are not self-explanatory? Customizing the blog becomes a matter of few clicks. Take a look at the ‘Settings’ page of both the CMSes.

WordPress Settings Page

WordPress Settings Page

On the other hand, TextPattern’s administrative panel, though equally capable and powerful, seems ‘outdated’ in comparison to that of WordPress. Of course, TXP is equally robust in its admin panel, but overall the interface is not as easy to use and may even be confusing for beginners.

TextPattern Settings Page

TextPattern Settings Page

Availability of Custom Plugins/Extensions and Themes


Apart from ease of use, the next thing that defines any piece of software is the availability of extensions for it. However, more often than not, there is a spiral between ‘ease of use’ on one hand and ‘extendability’ on the other. For instance, when it comes to mobile operating systems, Android is more popular than Samsung Bada. While this does not demerit Samsung Bada itself, Android’s popularity can be attributed to its ever-growing app market, which in turn is increasing because developers take an interest in it due to its easy extendability and wide usage, which ensures their efforts will not go unnoticed. Again, due to developers’ keen interest, the apps keep growing, and the users keep coming to Android.

Both WP and TXP support themes and templates as well as multiple plugins and extensions. However, WP has more themes and plugins then TXP. While this may or may not prove WP’s superiority, it surely plays its role in contributing to WP’s user base. Since many commercially viable tech blogs and websites are powered by WordPress (not to mention the millions of blogs at WordPress.com and Blog.com), it is but natural that WP has a large number of themes and plugins. Certain providers, such as WooThemes, offer themes for both WP and TXP. Yet, in this case too, WP dominates TXP in terms of the number of available themes.

If you have exemplary coding skills, fret not! You can easily tweak TXP and design your blog or website the way you wish to. But if you are an end user just looking to get a blog or website up and ready with as little technical expertise as possible, WP should be your safest bet!

Mode of Operation


Modus Operandi is by far the most debatable topic when it comes to comparing any two CMS’s, let alone WP and/or TXP.

To begin with, WordPress comes with a WYSIWYG Editor that makes editing posts and articles extremely simple.

WYSIWYG Editor in WP

WYSIWYG Editor in WP

TextPattern, on the other hand, has an equally awesome (though not so end-user friendly, as it takes some ‘getting used to’) editor, which can do almost anything you want it to, but will surely leave many beginners confused. In TXP, Textile and other related features can either be your best friends or your worst enemies.

Article Editor in TXP

Article Editor in TXP

In the admin back end as well, you will notice that mundane tasks such as updating the CMS, installing themes/plugins, or even navigating the back end – all seem easier on WP rather than TXP for a novice. However, the confusion vanishes once you get accustomed to the interface.

Community and Support


A CMS is only as good as its user base. Both TXP and WP have a good and fairly active community and many forums where you can seek support and advice.

In terms of documentation, TXP seems to win outright. WP is well documented, but it comes nowhere close to beating TXP – apart from the usual website, TXP also has its own User Documentation Website and another TXP Resources site.

Speaking of support, WP is updated on a more frequent basis as compared to TXP. However, this can be interpreted either way – supporters of WP will consider the frequent updates as higher level of activity at their developers’ end, while supporters of TXP can attribute the lesser updates to a sign of maturity of TXP in itself.

To sum it up


Before coming to a conclusion, let us recap each CMS’s pros and cons:

TextPattern:

Pros:

  • Textile is a wonderful component, and if you get used to it, you will never, ever, miss WP.
  • You can tweak your website as much as you want. There is negligible encapsulation done.
  • Extensive documentation.

Cons:

  • Admin back end looks outdated.
  • Interface confusing for beginners.
  • Lesser number of themes/plugins (as compared to WP)

WordPress:

Pros:

  • Perhaps the easiest CMS ever
  • Several themes/plugins
  • Excellent update mechanism

Cons:

  • WP is intended to power only one blog at a time (unless you’re using WPMU)
  • With plugins/extensions, it may becomes bloated
  • Editing article meta data is difficult
  • Notorious for frequent security bugs and issues

And the Winner is…


As I stated above, using (or not using) a particular CMS is a matter of personal preference too. More often than not, our choice for a CMS is governed by our needs (and, perhaps, bias towards a personal favorite).

WordPress and TextPattern are both great at what they do! If you need a CMS just to power a blog or a small website, look no further than WordPress. If, on the contrary, you wish to run multiple blogs, or prefer to tweak your articles before posting them (or simply like to do things the geeks’ way), TextPattern might be your ideal solution. In simple terms, TXP should be chosen if you wish to define the dynamics of your website just as if you were ‘programming’ software.

Have you used WP and/or TXP earlier? Do share your experiences with us in the comments!

September 27 2011

13:00

Seductive Interaction Design: A UX Booth Book Review

When talk builds about making seductive interactions, it’s nice to have people like Stephen Anderson giving us his two cents. Here are my two cents on his two cents.

When I started studying for my degree in Interactive Media Production, I had never heard of UX and neither, dare I say it, would’ve any of my lecturers. UX wasn’t something that was covered during my 3 years of study. Even as I entered into the fabled World of Work, I’d heard very little of usability, and it seemed most job roles called for designers or developers.

I then began working for a larger agency that had just created a brand new UX team which was tasked with making usable websites. After a few years of success, the team then expanded and begun to employ specialists within the UX, employing UX practitioners, UX consultants and UI designers. This change seemed to bring about a shift of focus from making websites not only usable but also enjoyable to use.

Let’s get seductive

The point I’m taking forever to make is that the web design industry has evolved at a rapid rate. It went from building websites to compete with your competitors to making websites usable and accessible, and now to what we see where information architects, UX designers, interface designers, interaction designers, and all manner of different specialties falling under the umbrella of User Experience.

This explosion of specialists has prompted the industry to flourish, and the knowledge base within it is growing by the day. It now seems to be a given that a website being published today will be usable; however, the new focus is on making websites seductive.

Stephen Anderson has written a wonderful book called Seductive Interaction Design: Creating Playful, Fun, and Effective User Experience that looks at some excellent examples of websites employing seductive design, which doesn’t stop at merely pointing them out, as Stephen explains: “…the actual examples will soon be outdated (or imitated), but the reasons these ideas worked in the first place won’t change.” This is why the book is such a success—it’s not just a book full of examples. It delves into the fundamental psychological theories behind exactly why each of the examples work so well.

That said, Anderson has a warning for anyone who thinks they can just copy these examples and expect them to be a success:

“Adding ‘playful’ elements on top of a frustrating experience will only complicate things.”

It’s all a game…or is it?

It’s always great to be in a position to think about how you can seduce your audience into loving your website or application, but you must first be sure that you’ve got the basics sorted.

One very famous example that gets dissected in the book is the now infamous LinkedIn progress bar. This idea of “gamification” has blown up since their success and it seems that every site has some aspect of gaming added to it at the moment. However, gamification shouldn’t just be added to a site without understanding exactly why certain elements work. There also needs to be a great deal of consideration around exactly what you are “gaming.”

“A game first has to be…engaging…without the points and the badges that get so much attention; a simple reward schedule…however addictive…leads to frustration if people don’t enjoy the activity being reinforced.”

The important point to take from this is that the activity you are trying to add game mechanics to must be in demand by your audience, else any success you see will be short lived. It’s not possible to make a success out of something that is failing through gamification alone—you must solve the underlying problems, which goes back to the earlier point about getting the fundamentals right before looking to seductive interactions.

One important element that Anderson highlights is that the language used in your website needs to fit the personality of the brand. He points out that a lot of forms online today seem to forget that people are being asked to fill them out, and the language being employed is that of a computer and not a conversation between two people.

Role play makes everything better…

There is an excellent, and seemingly obvious (once pointed out), role play exercise that tries to draw attention towards the language being used during a form process. Anderson recommends that you actually have a conversation with someone as if you were asking them for the information that the form is requesting. The technique is excellent at helping you find areas where the language could be friendlier and it also does a good job of highlighting the areas that could pose a problem to the person using the form.

Seductive Interaction Design is an excellent book for people looking to gain a basic understanding of psychology and how these theories are being applied to modern day websites and applications. However, and Steven also quotes these books, if you want an even deeper understanding of psychological theory, I’d highly recommend Predictably Irrational by Dan Ariely and Influence: The Psychology of Persuasion by Robert Cialdini.

Another recommendation I’d make with this book is that you should go and buy the Mental Notes card deck that Anderson created last year. It is an excellent set of cards that summarizes 52 UX theories and are a handy reminder to have with you.

As an end note, I’ve read a few books on Kindle for iPhone and been disappointed with the way it had been converted. However, that isn’t the case with this book. It’s a great conversion and the screenshots have been positioned exactly where you would want them. Having it on my phone means that I will always have it handy whenever I need it. So if you pick it up, don’t be worried about ebook quality.

So what about you? Have you read any books on seductive design lately? Sound off in the comments; we’d love to hear your thoughts.


Advertise here with BSA

December 03 2010

17:27

Illustrator & Photoshop CS5 Review

Leadin Image

Did you know that Adobe Photoshop is 20 years old and Illustrator has been around over 24 years? I’ve been using Photoshop since version 5 and Illustrator since version 8. It is amazing to see how they are progressively improving and adding more features. Now with vector features and 3D tools, Photoshop is no longer just an image editing tool. The same goes with Illustrator, Bristle Brushes were added to simulate bitmap drawing. I’ve been using CS5 for several months so in this post, I’m going to share my thoughts on CS5.

October 04 2010

18:22

Internet Explorer 9 Beta: Reviewed and Benchmarked


Microsoft is making some bold claims with the release of Internet Explorer 9 Beta. They explain that other browsers, unlike IE9 Beta, only use 10% of your PC’s capabilities; they show how websites will be streamlined and work faster by taking advantage of your graphics processing unit (GPU), and how a range of new features will provide a richer experience when combined with Windows 7.

Today, we will be looking at what new features IE9 Beta has to offer, and how it performs when bench-marked against Firefox, Chrome, Safari, and Opera.


Download and Installation

System Requirements

In order to run in Internet Explorer 9, you need to have one of the three following operating systems:

  • Windows Server 2008
  • Windows Visa
  • Windows 7

As you would expect, there are 32-bit and 64-bit versions, both of which require at least 512MB of RAM to run.
Depending on your operating system, you need between 70MB and 200MB of hard drive space. To be honest, as long as you’re running one of the three operating systems listed above, I don’t think are going to have any problems.


Download

IE9 Test Drive Website

Microsoft have set up two dedicated websites for the deployment of Internet Explorer 9.

IE9 can be downloaded from either of these websites; both sites are best viewed through IE9 to show off its highlights, new features, and performance enhancements. The Test Drive website provides dozens of application demos, each of which are tailored to show off IE9′s capabilities. We will be taking a look at the demos and benchmarking tools later in the article.

Before You Install

If you have Internet Explorer 8 installed, please be warned: if you install the 64-bit version of IE9, your 64-bit version of IE8 will be uninstalled. I haven’t tested if this is true for the 32-bit version but I wouldn’t see why it would be any different.

As far as I could see, IE9 retained all of my bookmarks, favorites, and so on, but you may want to backup your data just in case.

Installation

The installation should run smoothly. I am using a Windows 7 system with fairly up-to-date hardware. I can’t vouch for other operating systems, but during the install a Windows update occurred and it needed a full reboot. I have since confirmed this with several other Windows 7 users, all of which experienced the same install steps.

I can imagine a Windows update will be provided prior to the full release of IE9, hopefully that will render the reboot unnecessary in the future.


Top New Features

Hardware Accelerated Graphics and Text

IE9 HTML5 Speed Read Demo

It appears that right from the start, the developers of IE9 had speed as a primary objective. Hardware accelerated graphics allow websites to run smoother and faster in your browser. Elements such as graphics, text and video are now rendered by your GPU instead of the CPU. We will see the effects of this during the benchmark tests later.


Refined, Cleaner User Interface

Microsoft has really toned down the browser’s interface. When compared to Firefox or IE8, you can see just how much fat has been trimmed from the overall application. The address bar no longer extends across the top, the independent search bar has disappeared, and most noticeable of all is the missing status bar from the bottom of the screen.

Subtly, the navigational buttons now change colour to match a websites theme or favicon: a nice surprise when you first notice.


Pinned Sites, Jump Lists and Other Windows 7 Integrations

Anyone using Windows 7 will know how much more useful the Windows task bar is compared to the previous versions. Thankfully, IE9 now works with the task bar to add extra usability to your favourite websites.

Jump Lists

By grabbing a tabbed web page, you can tear it from the browser and pin it to your task bar. Not only can you open those sites like any other application, but now you can also interact with your pinned websites by right clicking and accessing what’s called a “Jump List”. For example, twitter.com’s jump list offers the following tasks: new tweet, direct messages, mentions, favorites, and search, right from your Windows 7 task bar. This is a huge time saver!

Windows 7 Task bar Controls

The Thumbnail Preview Controls allow you to navigate a menu or pause a video from your task bar. If you have ever used Windows media player from your task bar then you can imagine what this is like. I’m sure websites like YouTube and Facebook will be implementing this very soon.


New Tab Page

Popular Sites Grid View

It’s not unusual to see a page where your bookmarked or favorite websites are displayed for easy navigation. Safari offers a great example of this, but IE9 has taken it one step further. Whenever you open a new tab, you are shown your most popular webpages with their favicons and page titles next to each other. The added benefit here is the activity meter, which displays your browsing habits alongside your popular web pages. If you are a fan of this feature in other browsers then this is a welcomed addition to IE9.


One Box

As I mentioned above, the address bar is now compacted and the search bar is missing altogether. Microsoft has ingeniously combined the address bar, and search bar into one box. You can now navigate to a website, query a search engine, and browse your history or favourites all from the same box. You even have the option of turning on search suggestions, which are returned in real time as you type in your query.

At first I was concerned about privacy: how does the browser know that what you’re typing is not to be shared with search engines? Well, IE9 put you in control of your information and allows you to control what is and isn’t sent to search engines. It’s almost like they thought of everything!


Notification Bar

Download Notification Bar

In keeping with its cleaner interface, IE9 has changed the way notices and alerts are presented. Previously, notifications may have pushed web page content further down the browser or alerted you with a pop-up box, which obstructs your view of content. Now, all notifications are shown in the Notification Bar at the very bottom of the browser. With a clean and informative design, you can confirm a download or update an add-on without disrupting what you were doing.


Download Manager, and SmartScreen Filter

Download Manager

All downloads will now be managed by IE9′s download manager. If you are familiar with Firefox, you will recognize many of the same features; these include a default download folder, a separate ‘Download’ pop-up box (which displays the name, file size and location for each download), and the ability to delete, view or clear all downloads.

However, that is where the similarities end. IE9 now comes with integrated malware protection called SmartScreen.

SmartScreen Alert

SmartScreen is “a groundbreaking browser feature” developed specifically to protect you from malicious downloads.

By using real-time data, each download is assigned a reputation according to how many times that download has been reported as malicious. The more severe warnings a file acquires, the higher SmartScreen judges the download to be a risk. According to Microsoft: “Internet Explorer 9 is the only browser that uses download reputation to help users make safety decisions.” I can’t wait to see this in action, but I can’t help wondering if this could be abused by malicious users incorrectly reporting files.


Hang Recovery

Applications crash; it’s a simple fact. No matter how hard developers try, there will always come a time when your browser comes across an endless JavaScript loop or web page with far too much data to handle. For me, the most irritating time for this to happen is when you have multiple tabs open… not any more.

IE9 cleverly renders that irritation obsolete. In situations where other browsers normally hang, IE9 confines the problem to one tab, allowing you to close the tab and continue browsing without disrupting your work. No more checking your history and wondering which one of your tabs crashed your browser; well done, IE9.


Compatibility View

Like many of the features covered so far, this one is also unique to IE9.

Compatibility View works by analyzing popular websites and testing their compatibility with IE9. If a website does not meet certain criteria, a new button appears alongside the refresh and stop buttons. If you choose to click the button, “legacy document mode” is activated.

Legacy Document Mode really means displaying websites in the same way that Internet Explorer 8 does. This way, if there are any elements displaying incorrectly, you can turn on the compatibility view, and hopefully resolve any issues. Also, IE9 remembers which mode/view you prefer, and automatically selects this next time you visit the page.

After trying this myself, I have yet to see any difference between views.

I should also note that a websites compatibility is predetermined by the Internet Explorer team. I can’t help but wonder what criteria are websites being judged upon for either compatibility?


Add-On Performance Advisor

Addon Manager

This feature first appeared in Internet Explorer 8, and is simply a natural progression for its capabilities.
Many browsers now offer add-on applications; these can range from search engine optimisation tools to e-mail checkers and more. The performance advisor simply notifies you if an add-on performs poorly and will give you the opportunity to disable it.

I have primarily used Firefox for several years, and I am quite an advocate of its add-ons. I really wish this feature was available, as I am often disabling plug-ins for suspected performance issues.


Markup and Standards Support

Internet Explorer 9 was built with modern standards in mind. With developers and clients already trying out their websites in HTML5, SVG, and CSS3, IE9 appears to be focused on extensive support for modern standards. I was surprised to hear that they have invested a large amount of time and work with standards organizations such as W3C. To ensure that they stay ahead of the game, they have contributed over 2000 test results to the governing standards bodies to ““help same markup become a reality”.”

To enable developers to easily work with IE9 and interoperable markup, the IE9 team concentrated on five key areas: HTML5, Document-Object Model Optimization, CSS3, Scalable Vector Graphics, and Chakra, the new JavaScript engine.


HTML5

HTML5 Pinball Demo

If you have yet to see HTML5 in action, I recommend you visit the IE Testing Center. There are some fantastic canvas and benchmarking tools to play around with. Personally, I love the new video and audio elements, which allow for fast and easy media content on nearly all popular modern browsers.

The support for HTML5 in the IE family first began with Internet Explorer 8. IE8 does not support most of the newer HTML5 features, and when compared to other modern browsers, really flags behind. This is why IE9 chose a different approach, one which utilities hardware acceleration through Windows and your graphics processing unit. Combined with added support for new elements and better HTML parsing, IE9 is already a step ahead of the competition where HTML5 is concerned.


CSS3

Once again IE8 laid the ground work for IE9 in terms of compliance for cascading style sheets by centering on CSS2.1. If you are a developer you will know how hard it can be to force IE8 to play nicely with CSS3; unfortunately, there are only a few fixes and workarounds, and even these still present problems. Thankfully, IE9 was built with CSS3 in mind and will be the first version to include many CSS3 modules.

One of the latest trends in web design is the use of @font-face and similar typography enhancements in web pages. IE9 now introduces support for the Web Open Font Format (WOFF), which can work with TrueType and OpenType formats to transform the look of your font-family’s in CSS3. After working with Firefox and @font-kits for the last few months, I am excited to see this in action with IE9.

IE9 now supports the following modules from CSS3:

  • Backgrounds and Borders Module
  • Colour Module
  • Fonts Module
  • Media Queries Module
  • Namespaces Module
  • Selectors Module
  • Values and Units Module

Scalable Vector Graphics (SVG)

Recently I started working with Adobe Illustrator; after 10 years of working in web design and development (and primarily working with Adobe Photoshop) I felt I could finally devote some time to working with Illustrator and discovering what it has to offer, and in particular, exporting my work to SVG files. This was my first introduction to scalable vector graphics, and I am now starting to see them more and more.

It seems that, like me, Internet Explorer has never dealt with SVG either. It is only with IE9 that we first see interoperable SVG element support. Not only are they complying with standards, but they are also using hardware acceleration, by using our PC’s GPU to improve performance when rendering.

If you haven’t done so, I would recommend visiting the IE testing center and checking out some of the SVG demos; they have come a long way from growing simple 2-D shapes.


Chakra and Improved DOM

The Internet Explorer team have nicknamed their new JavaScript engine Chakra.

There appears to be a never-ending interpretation of what a ‘Chakra’ is, especially when it comes to medicine and religion interpretation; and if your background is in web design and development like me, trying to understand an overly complicated Wikipedia page on the subject is far outside the scope of this article.

On the other hand, IE9′s Chakra is an entirely new way of looking at JavaScript engines. In previous versions of Internet Explorer, JavaScript was tagged on to the side; it was never built into the core. Chakra changes things. JavaScript is now part of IE9′s engine, works with multiple CPU cores, and takes advantage of your computer’s hardware. This allows for faster interpretation, compiling, and code execution.

The new Document-Object Model has also had some spring cleaning. With various improvements, IE9 has increased efficiency and speed when rendering content. For example, previous versions of Internet Explorer have had problems handling white space in the DOM. IE9 has resolve these issues, handling this problem in a more appropriate manner.


Browser Benchmarks & Comparisons

With all this talk of hardware acceleration, modern standards support and improved interoperability, you could be forgiven for thinking that IE9 is the new Holy Grail of modern browsers. It certainly makes some bold claims and to be honest, as a hardened Firefox fan, I want to see IE9 put its money where its mouth is.

As I write this, it is just over 24 hours since the release of the IE9 beta. Anyone monitoring Twitter or following forum topics will already find brief comparisons and benchmarks between several browsers and IE9. I have already seen plenty of pros and cons, valid arguments and sworn allegiances to other browsers when people are asked: ‘So, are you migrating to IE9 then?’.

I decided to see things for myself, so I set up a basic benchmarking environment by installing five of the most popular browsers today and testing them against the claims of IE9. Throughout the rest of this article, you will see what tests and benchmarking tools are used, and ultimately how well IE9 fares against the competition.


Test System

I used a laptop and desktop PC to perform the tests but included only one set of results with article. I found that the results from testing hardware acceleration had very little difference between a moderately priced ‘home office’ laptop and my desktop PC. This was also true for testing between 64-bit and 32-bit browser versions.

Here are the system specs for my desktop PC:

  • Windows 7 64-bit
  • Intel i7 920 D0 CPU @ Stock 2.67 GHz
  • Corsair 6GB DDR3 Memory
  • ATI Radeon HD 5800 Graphics Card
  • ASUS Rampage II Motherboard

Browsers

IE9 Version

I decided upon the following browsers through personal experience and after consulting with other web designers and developers and the ’2010 Internet Browser Software Review Product Comparison’ list from toptenreviews.com

  • Firefox v 3.6.10
  • Opera v 10.62
  • Safari v 5.0.1
  • Chrome v 6.0.472.59
  • IE9 Beta v 9.0.7930.16406

I wanted to include a list of browsers which are popular and available across several operating systems. I think it’s important to say that when the benchmarks were conducted, each browser was freshly installed with the latest version, and no add-ons were installed.

Each of the tests were also performed with the browser maximized and after a fresh reboot. If you take a look at the IE Test Drive website you will see dozens of tests and great looking examples. Everyone will have their favorites and I understand you may feel other tests may be more suited to a benchmark browser comparison. Please forgive me if I have missed a more appropriate test to display here.


Benchmark Test Results

WebKit SunSpider JavaScript Benchmark

SunSpider Benchmark Results

Version: 0.9.1

http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html

SunSpider emulates real-world examples of JavaScript. By asking the browser to perform common JavaScript functions, like cryptology, we can gauge how quickly a browser handles. The quicker the JavaScript is executed, the better the engine.


Acid3 Test

Acid3 Benchmark Results

http://acid3.acidtests.org/

The Acid3 test is actually a set of one hundred tests, grouped into six areas. The test is designed to gauge how well a browser handles various web standards elements. Each of the six areas are represented as colored boxes and a successful percentage score out of one hundred is shown below. The full test results can be quite detailed, if analyzed correctly.

Today I have included the percentage score for each browser. I recommend you visit the Wikipedia page for Acid3 if you wish to read more about it.


CSS3 Selectors Test

CSS3 Selectors Benchmark Results

http://tools.css3.info/selectors-test/test.html

The CSS3 Selectors Test runs through forty-one CSS3 selectors and has a total of five-hundred-seventy-four tests. Once the test is completed you will be able to view any buggy or unsupported selectors for your browser. To keep things simple, I have included a score out of five-hundred-seventy-four for each browser.


The HTML5 Test

HTML5 Benchmark Results

Version: 1.0

http://www.html5test.com/

The score for this test is determined by the browser’s support for new and upcoming features of HTML5. Points are awarded as each feature is passed, and bonus points are awarded for special features like supporting audio and video content. I have listed each browser’s score out of a possible three hundred points.


FishIE Tank

FishIE Benchmark Results

http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html

This is a great visual test, clearly it has been designed to show off the advancements in IE9. Using the new canvas features of HTML5, we are shown a fish tank, FPS counter and the option to change the amount of fish on the screen at any time. This test certainly depends upon hardware acceleration, the higher end PC will always perform better than these kind of tests. The graph above shows the results for 50, 100, and 250 fish when the browser was maximized to full screen.


Psychedelic Browsing

Psychedelic Benchmark Results

http://ie.microsoft.com/testdrive/Performance/PsychedelicBrowsing/Default.html

I first tried this test in Firefox . . . and very little happened. It was only when I tried this in IE9, that I fully understood the purpose of the demo: to once again show off IE9′s hardware acceleration. Just like the FishIE Tank test, the results were recorded in frames per second. The higher the frame count, the better the performance.


IE Beatz

IEBeatz Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/IEBeatz/Default.xhtm

I chose this test, because it is interactive, uses ‘GPU-powered HTML5 graphics’, Canvas, SVG and requires 27 audio elements. I almost removed this from these benchmark tests on the grounds that only two browsers loaded the audio elements. But I kept it in as I feel it highlights real-world problems when it comes to interoperability and modern web standards. The results were recorded after leaving the demo to run for five minutes.


Canvas Zoom

Canvas Zoom Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/DeepZoom/Default.html

All I can say is they must have used one expensive camera to take a picture! If you have yet to see this panoramic canvas benchmark in action, I suggest you take a look now, because it truly is spectacular.

At first I wondered how I could accurately gather test results. Like the other tests I maximized the browsers. I then clicked each of the images along the bottom and used the first one to zoom in and out multiple times. I recorded the average frame rate for each browser in the graph below using the same method. Not exactly scientific, but I feel it gives an accurate depiction of a real-world example.


Benchmark Conclusion

Looking at the bar graphs as a whole, it’s clear to see two sides to IE9:

  1. A dedication to hardware accelerated graphics, which clearly pays off when working with HTML5′s canvas. You only need to look at the psychedelic test results to get an idea of how well IE9 plays with your GPU.
  2. An improvement over IE8′s efforts to work with modern standards, but it still flags behind when compared to the other browsers.

Here’s where things start to get interesting. Microsoft has been promoting IE9′s modern standards support all the way along the development trail. In fact, their Beauty of the Web and Test Drive websites have examples, demos, and games all over the place. But with the score of 96 in the HTML5 compatibility test (the lowest score out of all five browsers) I start to wonder how swayed their demos and examples really are.

Of course, some leeway can be given for companies trying to promote their own products, but filling dedicated websites with examples like psychedelic browsing and Canvas Zoom, (both of which cause extremely poor performance in all other browsers) clearly gives the wrong idea on just how HTML5 ready IE9 really is.

At this stage, I’m glad I chose independent benchmarking tools, like the HTML5 compatibility test website. Without moving away from Microsoft’s Test Drive demos, you could be fooled into thinking that the latest version of Internet Explorer actually ticked every box for HTML5 and other modern standards.

Unfortunately, the confusion doesn’t stop here. Throughout the release of five ‘Platform Preview’ versions of Internet Explorer 9, Microsoft have been collecting their own test data. These results can be seen at the IE Test Center.

Looking at the ‘Cross-Browser Test Results’ table, and the HTML5 section, I count only three fails when looking at an older version of IE9. The platform preview version shown in this article already has a greater pass rate than any other browser listed.

In this case, we have conflicting test results. I’m certainly not accusing either side of padding the stats, because you can perform your own tests with IE9 and HTML5 website. I just think you need to be careful when comparing results like this; after all, the HTML5 Compatibility website and the IE Test Center tested for different HTML5 elements.


Pros and Cons

Pros

  • Clean and interactive interface.
  • ‘One box’ – address bar, search engine query, and favorites/history search in one. This is also now resizable.
  • Tabs are now moved up a level and sit alongside the address bar.
  • No task/info bar at the bottom of the browser, instead notifications are now shown in an unobtrusive box that appears when necessary.
  • Excellent use of hardware acceleration to improve, graphics, text, and images across webpages.
  • Improved standards support, such as HTML5, CSS3, and SVG.
  • “Tear off” tabs can be pinned to Windows 7 task bar for extra functionality.
  • Opening a new tab will show your most popular sites, sorted by activity. You also given the options to reopen previously closed tabs and reopen your last session. Both great features for recovering a crashed/closed browser.

Cons

  • Removed Internet Explorer 8 without warning.
  • Some websites just refuse to load, even with semantically correct markup. In my experience, this seems to be specific to the odd website taking advantage of HTML5.
  • Smaller screens, may have problems with tabs sitting alongside the address bar.
  • A reboot is required as part of the installation process, this is a minor grievance and may be resolved with a standard Windows update prior to final release.
  • IE9 scored the lowest out of the five browsers on http://www.html5test.com. Considering how Microsoft continuously advertise IE9′s support for HTML5, you would of expected to perform better.
  • Tabs are now moved up a level and sit alongside the address bar. I like the way this looks and feels, but I get the feeling that it may just get in the way further down the line.

Summary

It appears Microsoft has clear goals when it comes to IE9. They want to embrace modern standards and contribute to governing bodies like W3C to aid interoperability. IE9 is a massive leap forward from IE8′s attempts at HTML5, CSS3 and SVG. And it also feels like this is the browser they wanted to release with Windows 7. Looking at some of the new interface changes, like Jump Lists, reinforces this.

The benchmarks have shown problems still exist between IE9 and HTML5, but the advancements in hardware acceleration really shine through. Bugs do exist, some websites fail to load and it may take some time to get used to the new layout, but we need to remember this is still in beta stages, so maybe we could forgive it for the odd problem throughout development. So despite it’s cons, I’m happy testing out my latest web designs in IE9 and I am really excited about the final product.

I hope you have enjoyed this introduction to IE9 Beta and try it out, even if it is only to play PacMan in the IE9 Test Center!

October 03 2010

10:00

Functionality of Adobe Fireworks in your Design Workflow

Many web designers work exclusively with the Adobe Creative Suite to get work done. Adobe Photoshop is the most common tool for graphics creation and manipulation along with Illustrator for freehand drawings. Fireworks doesn’t get as much of the attention, but this doesn’t mean the software is also useless.

In fact Fireworks can be used hand-in-hand with Photoshop to create seamless mockup designs, wireframes, interface icons and so much more. We’ll be taking a look into how you can incorporate Adobe Fireworks seamlessly into your design workflow.

What is all the Excitement with Fireworks?

Many of you may be asking why there is so much excitement for this tool. It’s still very under-utilized software within the design community but has been growing more popular since Adobe acquired Macromedia in 2006.

The software itself is both bitmap and vector based. Fireworks is a powerful graphics editing tool initially created for the purpose of designing high-quality icons and graphics for the web. These could include icon sets or UI graphics on buttons. Frequently though designers are switching over to Fireworks for its potential in creating powerful mockup designs.

The true power of Adobe Fireworks comes with its 2 development states – vector and bitmap. The main difference between the two formats is how your computer renders each image. Bitmaps are created using pixels each shaded a different color while vectors use lines and curves to match up complex shapes.

Each has their own pros and cons list which represent their main use. Bitmaps are the images you’ll see around the web – .jpg or .png are examples. Vectors are mostly used for logos or drawn artwork since there are no hard edges. The entire image is rendered using complex mathematical formulas which determine how vector lines should smooth or curve.

Rolling both of these formats into Fireworks is where we can start to see some major benefits to web designers. The tools and palettes are also very similar to Illustrator and Flash, so it’s not difficult to pick up and learn.

Fireworks Wireframing and Mockups

The true beauty for us web designers comes from Firework’s ability to create stunning website wireframes. A wireframe is a type of design mockup which contains all of the major elements needed to display a website’s core features without getting bogged down in the finer details.

A wireframe doesn’t require special software to design. You could just draw it with pencil and paper if you were inclined to do so. However the major benefits Adobe Fireworks brings to the table when discussing wireframe mockups are staggering. One advanced feature is the possibility of creating Master Pages to implement features easily throughout a mockup.

For example if you were creating a wireframe for 5 pages of a website you wouldn’t create 5 separate documents (well you could, it would just take longer). Designing a Master Page which contains all the elements common to every page in the site (navigation, header, footer, content area) and expanding it throughout your other pages is the simplest way. Fireworks features this functionality right out of the box and even allows for deeper customizations when it comes to the Master/Regular page relationship.

Interactive Web Design Prototyping

Creating a beautiful website prototype is no harder to do in Fireworks than a simple wireframe. With a prototype you’d be designing all of the major elements such as navigation links, buttons, search boxes, and everything else the user interacts with. By giving design and shape to these objects in a graphical setting it makes transferring code into HTML that much simpler.

The great thing about Fireworks is how you can apply behaviors to elements found in your documents. This means you can set a button to change state or replace text when clicked on. You can also import graphics from other software suites into a prototype mockup – meaning any logos or vectors created in Photoshop or Illustrator can still carry over.

Fireworks does have an export feature which allows you to directly convert an image mockup into HTML/CSS code. It’s not the greatest code when it comes to efficiency and generally isn’t worth using in my opinion. Run Fireworks for what it does best – digital graphics placement and manipulation.

Designing Mobile Applications

iPhone and Android-powered devices have seen enormous growth over the past few months. It’s an area of the web not yet explored and it’s continuously evolving each day. Fireworks is the perfect software for creating an iPhone app prototype and plays well with many other operating systems.

The main benefit is how quickly other designers caught on to using Fireworks for mobile prototypes. This means there are many readily-available packages and toolkits for download to help ease the process of mobile app development.

A quick query into Google for “iphone GUI fireworks” brings up plenty of interesting results. Scanning through some blogs on the topic you should stumble into plenty of resources for mobile app mockups.

And these are only a few things Fireworks can help with! Having such powerful functionality at your fingertips means finishing design work that much quicker. With Adobe frequently releasing new updates to Fireworks and the entire Creative Suite we can see changes being made almost instantaneously.

The software is really exciting and it’s a new area for designers to break into. This has been an introduction into the world of Adobe Fireworks but it’s by no means a complete guide. There is so much information about web design and prototyping in Fireworks it’s a simple skill to pick up. Although it may not stand out right away, utilizing Fireworks as your mockup creation tool can save loads of time and frustration during complex projects.

August 31 2010

13:30

Ocado: Delivering on User Experience

Ocado van

Ocado: delivering the goods—both metaphorical and physical

Good user experience design is about ensuring that at each point of engagement with your product, company, or service, you are crafting positive interactions. It is goal-oriented and outcome-focused because at each stage you are ensuring that users can easily achieve their objectives.

As digital practitioners of user experience, we can take a strong lead from the non-digital world. There are many companies that have nearly perfected their customer interactions and leave nothing to chance. From the display of their products on the shop floor, to the packaging, service, first encounters and follow up—they have a strong influence over each setting and environment in which their product is used and experienced. Sometimes this is glibly referred to as “branding”—but when done well, I think it is far more encompassing than that single word implies.

User Experience in practice

One company that has embraced this approach to user experience is Ocado. Ocado is the largest online grocery retailer in the world (although currently operating only within the U.K.) with annual sales running at £500 million. Unlike other grocery retailers who have added an online service to complement traditional shopping methods, this comprises Ocado’s entire business model. Aside from their large warehouse, vans, and server storage, they have no other physical assets—they even source their produce from an existing supermarket (Waitrose). This setup enables Ocado to focus all their operations and energy on the stages between purchase and delivery, allowing them to streamline this service.

End-to-end experience

Though I earlier defined good user experience as ensuring that each point of engagement with the user produces positive interactions, there are of course two occasions where this is of utmost importance:

  • The first encounter
  • The point of departure

You may want to think of your website’s homepage and checkout form, as both are integral to whether users will assess their overall experience as “good.” Fail in the first instance and your potential customers will leave your site; fail in the last and they will not convert.

The peak-end rule validates this understanding. It states that:

we judge our past experiences almost entirely on how they were at their peak (pleasant or unpleasant) and how they ended.

wikipedia.org

Mental notes: Peak-end rule

Mental Notes: 50 insights from psychology. This card describes the peak-end rule.

Of course as Ocado is a grocery delivery service, the end point for them is the point at which the produce is received. There are number of things they do at this stage of the experience to ensure they are providing a quality service for their customers:

  • Quality assurance: by partnering with Waitrose (another UK household name), they guarantee fresh produce
  • Peace of mind: by providing a printed sheet of each order for the customer to check against, complete with ‘best before’ dates for all items
  • Ease of use: color-coded bags for fridge, freezer, and pantry
  • Fast service: delivery within a 1 hour time slot

5 Principles to emulate

Whilst we may not all be in the grocery-delivering business. I believe there are 5 core principles of User Experience demonstrated by Ocado, each of which we can each apply to our own websites and applications, these are as follows:

  1. Personalization

  2. We have a natural desire to be known and connect to people on a personal level. With a company like Ocado, which is entering your home, this also serves to reassure the customer.

    Ocado contacts customers with the name of their driver (and license plate number) prior to delivery. They also do a good job of matching customers through various points of contact. For example, if a customer tweets about some poor service or damaged goods, this is matched up with his or her customer ID, and some form of compensation is dispensed. Sounds easy, but so few companies do it well.

    What can we learn from this? Make sure personalization in your web applications doesn’t simply provide a way of harvesting information. Instead, use your knowledge of the customers and their habits in order to serve them better.

  3. Accommodating users’ preferences

  4. We are all busy people, and it’s safe to assume those people who have signed up for online grocery delivery consider themselves “extra busy.” We need to remove as many barriers to using a product as possible. One way to do this is to accommodate users’ lifestyles and preferences rather than requiring them to adapt to our interfaces.

    Ocado provides an app for both the iPhone and Android devices. This means that the product can be used on the go, which is fundamental to their success. They also provide a variety of times and days for delivery and the ability to pre-book a regular time slot. All these features are designed to make the process as easy, comfortable, and natural for the user as possible.

    What can we learn form this? It should be a requirement that your website is flexible, and not your customer.

    Ocado iphone app allows you to purchase products easily

    Ocado provides apps for iPhone and Android.

  5. Service recovery

  6. We all make mistakes. Often. However, it is less often that we admit to them. There is a fallacy that to admit mistakes, particularly in the business world, makes one appear weak. But in the service industry, the opposite is in fact the case—people respond well to humility.

    Research has shown that customers who have had a service failure resolved quickly and properly are more loyal to a company than are customers who have never had a service failure — significantly more loyal. Service Recovery practices are a critical element in a Customer Loyalty Program.

    Making the Case for Service Recovery — Customer Retention, Great Brook

    Ocado has a policy to take you at your word when it comes to breakages or missing items:

    We guarantee the quality of our goods. You must inspect the goods and notify us promptly in writing, by phoning our call centre or by using the online refund service on the website of any dissatisfaction with your order. We will promptly and fully refund the price of any goods that do not meet with your reasonable satisfaction or arrange for the delivery of replacement goods, provided that you notify us within 14 days of delivery of the goods. We will arrange with you for the goods to be returned to us.

    Ocado terms and conditions

    What can we learn? The quality of your service will be judged not by how many mistakes you make, but on how well you recover from them.

  7. No barriers to contact

  8. It can be easy to hide on the web. Just remove the comment form, hide the contact details, and you can become almost immune to criticism. Of course, this is the complete opposite of all that the open web stands for, and more often than not disgruntled customers will find other ways to share their dissatisfaction.

    Ocado has a really quick response time on emails. If you email while logged-in, they can diagnose problems much faster because they have all your details on-hand.

    What can we learn? A website shouldn’t be a means to keep your users at arm-length. Make sure they have lots of ways to get help, one of which is to provide a contact email and telephone number.

  9. Keeping users informed

  10. Websites are increasingly relying on “push” mechanisms to drive users to relevant content or to complete certain actions. Newsletters, RSS feeds, and timely reminders are all ways to prompt a user to respond, where they otherwise may not.

    Ocado sends you a number of messages depending on what stage in the process your booking is:

    • to confirm orders have been automatically placed (if this feature is enabled)
    • when orders are edited or cancelled
    • the day before your delivery is due (so that you can make last minute updates)
    • the day of your order (to remind you of delivery slot and provide details of driver and van)

    This constant flow of communication is not annoying as it is timed with crucial stages in the ordering process. It also means that Ocado is at the forefront of a customer’s mind at any given point.

    What can we learn? Spam is annoying, but timely updates are welcome. If the user is going through a complicated process, such as an online purchase, make sure you keep him or her informed:

    • Provide a summary of the purchase upon checkout
    • Tell the customer when the order is processed/dispatched
    • For regularly occurring purchases send at least one reminder email with plenty of time for it to be acted upon

Author’s note: I first encountered Ocado after moving to the UK. Carless and living in London, I was wooed by the promise of hassle-free shopping. I tried a few competing online services, but when I got my first iPhone, the deal was sealed. While I have probably cursed Ocado as many times as I have praised them, they have certainly transformed the way I think about and approach my weekly grocery shop.

July 26 2010

10:00

July 02 2010

21:00

18 Free Screencasting tools to Create Video Tutorials

Screencasting  is a better and great way to showcase a procedure, to teach,demonstrate a service or to create video tutorials without having to write a content or an article. Screencasting tools are available both as desktop applications (Free and commercial) and web-based services. The good news is that there are a growing number of screencasting tools that are completely free to use; some do not even require a registration to let you get started.

Videos are simply great to deliver a message in a very short time and for most people bandwidth is not a problem any more.The following screencasting  tools are all free to record screen but of course their features are not as much as paid ones.You can easily record your screen and add audio or edit your recorded screen videos with these tools.If you know more free tools then please denote in comments section.

Free tools

1.Aviscreen

AviScreen is an application for capturing screen activity in the form of AVI video or bitmap images.It has a unique feature called “follow the cursor”. Using this mode you can produce a video or image of relatively small dimensions while covering all mouse activity over the whole screen area.You may stop or pause the video capture at any moment.  If you use the popup menu to stop/pause the capture, the process will also be captured and may need to be trimmed later. When the computer is slow or very busy, sometimes it is necessary to hit the shortcut key several times before it works.This is a free capture program that records the video into AVI files, but can also do BMP photos. It’s Windows only and does not record audio.

2.Camstudio

Free and open source streaming video software for Windows that allows you to capture screen and audio activity on your computer and create AVI video files and export to SWF. CamStudio has an easy-to-use interface and includes a video annotation feature, custom cursors and selected screen region recording.

3.Copernicus

A free program for Macs that focuses heavily on making quick and speedy films by recording the video to your RAM for quicker access. Does not include any support for audio.

4.Goview

Free Windows software from Citrix Online, that allows you to record video of your screen, capture audio, edit and host your videos without bandwidth limitations. Screencasts can be password protected, and downloaded/uploaded to other sites.

5.ISU

ISU enable people to easily Record a sequence of operations in applications.
Edit the recorded presentation, draw on it and add nice notes and stylish HTML pages.Send it to friends via Email, Messenger or any other application or Browser Email. Or even create FAQ (Frequently Asked Questions) in a Center-Folder.

6.Jing

Free simplified screen recording software for Mac and Windows machines that allows users to quickly record videos (including audio) from a window or region on their desktop, including the mouse, scroll movements and clicks on websites or applications. You can record up to five minutes. Jing is a product of TechSmith, the makers of Camtasia Studio and Camtasia for Mac.

7.Krut

Krut is a screencast tool that is written in Java and well suited for making video tutorials (instructional videos) on most platforms. Krut records movie files, including sound, of selected parts of your screen. The files use the quicktime mov format. The program has an intuitive and compact user interface.

8.Freescreencast

Free software that lets you record your screen, capture audio, control the cursor, and export to FLV format. You can then upload to FreeScreencast.com  for free hosting (no file size or resolution limits) and sharing.

9.Screentoaster

ScreenToaster is a free web-based screen recorder designed to capture your screen activity, audio and webcam images in real-time then publish and share your video in blogs and websites.ScreenToaster works in all browsers and doesn’t require any download so that you can use it anywhere, anytime.

10.Microsoft expression encoder

This free version of Expression Encoder 3 does not include support for IIS Smooth Streaming and H.264 encoding.

11.Screen castle

Screen Castle is an online recording tool.Of course it is not professional as the others but you can easily record your screen with one click and get the sharing codes immediately.

12.Screencast O matic

It’s like an online tool which you don’t have to download anything.You just click the Create Button and a box appears which works with Java and you adjust the screen area to start recording as you see in the below screen shot.you can send the recorded file directly to through hosting.

13.Screen jelly

A free web-based utility that lets you record your screen and audio for up to three minutes, then send it out to Twitter or in an email.

14.Screenr

A free web-based tool for Windows or Mac that lets you create screencasts without installing any software. Your screencast is published in high-definition Flash format, and can be shared on Twitter, YouTube or anywhere else on the web. Screenr is made by Articulate, the makers of Articulate Studio.

15.Oripa screen recorder

oRipa Screen Recorder is a handy tool to record your Windows desktop activities in real time and save it as a video file. oRipa Screen Recorder also captures anything you can hear on your PC, such as, music and talking through the PC’s microphone.

16.Utipu

UTipU Tipcam has 2 versions.FREE and PRO.It is another easy to use tool for recording both video and audio.You can also make smart zooming which is very useful for presentations.Click the Zoom button to zoom into closer. This type of zoom will follow your mouse. You can also zoom before you start recording.

17.UltraVNC

The screen recorder is build with the old Rendersoft camstudio source.UltraVNC boasts a chat window, a dialog for file transfer and an embedded Java viewer which allows you to open a UltraVNC session in a browser. Supports audio also.

18.Webinaria

You can easily create screen records as .avi file and turn them in to .FLV file.You can also add you voice and edit the recorded file later.It requires Windows and totally FREE.

Let us know if we have missed some awesome app for screencasting and we will update the article.:)

May 28 2010

10:00

Web Operating Systems: The Options You should Consider

Showcase of Web Operating SystemsMost of us have heard of WebOS or Web Operating Systems and most of us just don’t know what it is. Well, WebOS and Web operating system are terms that describe network services for internet scale distributed computing. However, the terms WebOS and Web operating system have been employed more broadly and with far greater popularity in the context of “the web as in HTTP”, and for many meanings ranging from singular systems to collections of systems. Common to uses for collections of systems, a Web operating system  is distinct from Internet operating systems in that it is independent of the traditional individual computer operating system. This conception of the system reflects an evolution of research in the field of operating systems. I compiled 16 WebOS apps to know what they are and to experience operation systems in your browser.

1. EyeOs

EyeOs is a Cloud Computing Platform that includes an office suite, group ware applications and the toolkit to develop specific web applications that you need.

2. iCloud

icloud consists of a desktop with applications and files that you run through your web browser. Because it’s running in the cloud (the internet) it can offer you impressive features such as easy sharing and rich collaboration.

3. CorneliOS

CorneliOS is a web-based OS that runs in your web browser. All applications and files are stored on the CorneliOS server and are accessible all the time and anywhere. CorneliOS is platform and browser independent and is available as free Open Source software under the GPL as well as under a commercial license. The CorneliOS Web OS includes a Content Management System (CMS) so that you can easily set up and manage your own website as well as a Database Management System that allows to rapidly build any kind of database application.

4. Glide OS

Glide OS 4.0 is a comprehensive Ad-Free cloud computing solution. Glide provides a free suite of rights-based productivity and collaboration applications with 30GBs of storage. The Glide OS provides automatic file and application compatibility across devices and operating systems. With Glide OS you also get the Glide Sync App which helps you to synchronize your home and work files.

5. myGoya

6. atoolo

atoolo is a personal communication platform or differently spoken: an individual home in the net and a useful aid with the everyday work on the PC.

7. Cloudo

With Cloudo, every computer, in school, at work, at your friends’ or even in the library becomes your own, free of charge computer. And with Cloudo Mobile your online computer is accessible from your mobile phone as well.

8. OOS

OOS (Online Operating System) is your personal online desktop that supports multiple applications and allows online collaboration and it comes with Windows XP like theme.

9. Pipio

Pipio is a social operating system that aims to give people the ability to share and communicate in real-time. You can search what other people are communicating about in real-time based on contextual, geographical, and chronological relevance. As an operating system, Pipio allow full functionality of third-party web apps within the Pipio ecosystem.

10. KIDO’Z

KIDO’Z is a web OS for kids. KIDO’Z Kid’s Web Environment is safe, easy and fun way for young kids to surf their favorite sites, watch videos, play games, send emails, create and communicate without knowing how to read and write. KIDO’Z is powered by parents and gives parents the power of control.

11. Peepel

Peepel is an online WebOs and office suite.

12. Startforce

13. Fenestela

Fenestela is an operating system for WEB space with a simple and convivial graphic interface. Code your Web pages, your programs, and save your files online. Share with your friends your photographs, family movies and office documents.

14. mybooo

15. SilveOS

16. Lucid

Lucid is a free, open source web desktop, or webOS that lets you: Access your media, office documents, and other files anywhere Stay up to date with Twitter, RSS feeds, and what’s happening on the web Create great web applications in short amounts of time.

May 18 2010

10:14

An Indepth Review of 9 Best Flash CMS Solutions

Flash templates are getting more and more popular these days and though beautiful outside, they can be a real disaster inside. While most of the template companies state that their templates are easy to manage and update, customizing the ready-made template can be a tough task for you. How to ensure that you won’t have to dive into the flash code, Action Script or spend hundreds of dollars on a web developer to customize the template for you? This post is meant to give you a helping hand in the world of various flash templates and flash systems so if you consider creating your website from the flash template and want it to be real easy and affordable this post is for you.

First of all and if you have never seen Adobe Flash, do not try to convince yourself that you can manage it. Yes, you can probably learn some simple things from YouTube tutorials, but the flash templates of the new generation are much more than just a number or links, images and text blocks. So what’s the solution if you are a flash fan and dream of an awesome interactive flash template?

Flash Content Management System.

What’s a flash content management system or simply flash CMS? That’s a system that helps you manage your flash website without actual source files editing. The CMS based flash template usually consists of the 3 main sections: the design skin- that works like the shell for the content, the core- the codes and programmed functions, and the website content- that can be stored in the database or external txt/xml files. The content management system in simple words is an administrative interface where you can enter the content in a convenient, intuitive, friendly manner without going into any codes and this content will show up on the website in the real time.

So Flash CMS seems to be a really cool solution but can you build your website using its functionality if you are not a flash developer? The answer is obviously no. There have been lots of Flash CMS solutions reviews recently but they are useless for the regular users as most of us simply don’t know where and how to implement them. That’s why I have decided to create a review of Flash CMS templates solutions presently available on the market, the solutions that will allow you build your new flash website quickly, easily at without additional costs.

1. FlashMint CMS v3

FlashMint is a leading provider of Flash CMS Templates. They have CMS v1, CMS v2 and CMS v3 templates presented in their collection. While the first two versions of FlashMint content management system where pretty primitive, version 3 looks cool. There’s a nice intuitive admin area and the administration interface allows to perform the following basic actions:

  • Upload your logo; add company name;
  • Upload website background image;
  • Change company name and menu colors.

As every content management system FlashMint CMS v3 allows:

  • Create unlimited number of text pages;
  • Rearrange the order of the menu tabs.

FlashMint CMS v3 was developed mainly as the content management system for portfolios and photography websites hence the following features:

  • Unlimited number of photo galleries;
  • Photo controls for the website visitors;
  • Photo search;
  • Unlimited number of video galleries;
  • Slideshow creator.

Other modules presented in FlashMint CMS v3 include news editor, events editor, mp3 track editor, meta tags section. There are 30 beautiful flash templates to choose from, no special server requirements and no complicated installation. The system is not skin based, so every template is developed separately.

Template price: $204-215

2. ReadyPhotoSite Flash CMS

Initially developed for photographers community, ReadyPhotoSite CMS can be used to create any type of website, from business to entertainment sites. The product is available in 4 packages:

  • Basic- for business websites;
  • Creative- for photography websites and personal portfolios;
  • Ecommerce- for online flash stores;
  • Premium- includes the design .fla files allowing to make modifications not available from the admin area.

The modules presented in ReadyPhotoSite CMS include:

  • General website settings (logo, menu, copyright etc);
  • Meta-data manager;
  • Photo gallery (unlimited number of photo galleries);
  • Video gallery (unlimited number of video galleries);
  • Slideshow creator;
  • Mp3 tracks editor;
  • News section;
  • Events editor;
  • Password protected galleries;
  • Shopping cart and online store.

The pricing for ReadyPhotoSite websites depends on functionality. The basic package is $149, creative $159, ecommerce- $199 and premium package is $250.

The collection presently includes 10 templates and several new templates are added monthly. The templates do not require database to store info. All the texts, paths to the files and parameters are stored in the external XML files used by the system. The system is skin based but there are certain design restrictions applied for every template and thus changing one design to the other might be not a good idea. Deep linking technology makes ReadyPhotoSite websites search engine friendly and lets your reference the difference sections of your flash website as if it was simple clean HTML.

View ReadyPhotoSite templates View admin area demo

3. Fancy CMS

Fancy CMS is a new promising flash content management system that seems to be still in development. They have triumphantly launched their first template and promise more to come shortly. As a fresh developing product Fancy CMS might also be interesting for flash developers as there’s a beta version of Fancy Flash CMS Core available for free. One oops- the admin area is not available yet so if you decide to download the templates be ready to edit the info directly in the xml files.

Among the interesting features of Fancy Flash CMS are:

  • Rich content pages with 2-level menus;
  • Flash blog;
  • e-commerce shopping cart,
  • Option to change the pages design and layout;
  • Video, Image & Sound Galleries.

The system is skin based so you can easily change skins to newer design versions. At the moment the system is free.

Download Free Fancy CMS

4. FlashMoto CMS

Loved by flash developers the FlashMoto CMS has the widest range of functionality possible. There’s an option to edit the core of the system, add new modules and widgets and create separate projects based on the FlashMoto CMS. However when it comes to website management it gets complicated for most of us… since there are too many options available. Certain functionality limitations would guarantee that design look and feel remains stylish and professional but this in not the case when you can play around with almost every element and then can’t set it back to default position. Yet, we have to admit that FlashMoto CMS is a powerful engine, though (and in the consent of our theme today) oriented more on developers than end users. What’s really cool about this CMS is the Multilingual Control Panel supporting 12 languages.

Among the features of the FlashMoto CMS you will find:

  • Interface to update general settings like logo, menu, company name etc;
  • Ability to add unlimited number of pages in a rich WYSIWYG editing environment;
  • Media Library & Preload Item option;
  • News module, Video & Image Gallery ;
  • Video and MP3 player.

While the admin area works smooth I can’t call it intuitive though this can be a matter of time and getting used to things. People logging in for the first time to WordPress or Oscommerce admin area might be feeling kinda lost as well :)

The templates cost around $250 and are all designed in the up-to-date clean style which makes the offer even more attractive.

There’s an interesting fact that FlashMint and FlashMoto which are supposed to be competitors have recently signed an agreement where FlashMint will be developing templates based on FlashMoto CMS.

View FlashMoto CMS templates View admin area demo

5. Mint Editor

Mint editor is another flash website management product created by www.flashmint.com. This is not a standalone product or system but rather a management interface allowing to easily update info on the flash templates via simple admin area. While opened in Mint Editor, the template is represented as a structured combination of various flash components, with a separate set of configuration settings for each of them. The list of components include:

  • Audio gallery;
  • Image gallery;
  • Video gallery;
  • Slideshow;
  • Dynamic news;
  • Dynamic text page;
  • Contact section.

Mint Editor is probably the cheapest solution of that kind presented on the market. Mint Editor templates cost $50 and are hand-coded for a certain appropriate design.

6. AuroraFlash Site Builder

In simple words AuroraFlash site builder is your desktop flash WYSIWYG editor allowing to build fantastic flash websites without any special skills and within 30 minutes. The concept is very simple and the editor works as a candy. All you have to do is download the editor and auto install it on your computer in several simple clicks. After that the program will offer you choose the template to work with from the number of default designs and the interface will load.

The components presented in default free templates include:

  • Text pages;
  • News;
  • Photo gallery;
  • Contact section.

There’s a set of flash templates you can download directly from the website absolutely for free and use it for creating of your personal website, however if you plan creating a project for your customer based on AuroraFlash website builder be sure to read the licensing terms.

7. Yooba Flash CMS

Developer:

Yooba Flash CMS is a tool for creating simple flash animated websites in the Yooba environment. That’s a hosted solution so in order to manage your website you have to login to the membership area on the Yooba website. Before starting on the project you’ll have to prepare the design of your new web page and save all the elements as separate images that then will be uploaded to your Yooba interface. The nice feature about Yooba is that they offer simple website visitors stats.

The price of Yooba is somewhat high- €40 per slot a month and you have to build the design on your own. Yooba is not a CMS in the usual understanding however it allows to create animated websites with easy and without flash or any other special knowledge.

8. Wix Site Builder

If you have ever been looking for a free flash website you might have been on a Wix site and even considered using their builder to create your free flash website. Guys at Wix have a huge number of nicely designed templates and working with the Wix system is a real pleasure. It takes just a few minutes to sign up with them, choose the template and proceed to the editing interface. Editing the template reminds more of a fun game with big iconed tools :) You can change texts and fonts, you can add photos, videos and music and create nice galleries. You can also view your website online on the link like this one http://www.wix.com/adzyasan/anastasia and it’s also for free.

If you want more features than the free version of Wix allows you can sign up for a premium account (starting from $4.95/month) and use your own domain name, remove Wix ads and logo from your website.

9. TemplateAction Flash CMS

Developer:

According to TemplateAction team, TemplateAction website templates are fully customizable and editable via an extensive control panel. The admin area allows:

  • Rename pages, edit and format texts;
  • Add links, add/remove/change images;
  • Change the video background.

Compared to other Flash CMS system reviewed above, TemplateAction CMS doesn’t have an advanced functionality but it’s quite enough for a simple flash business or personal website. There are 17 nice templates presently available and the price is fair- $89 only. There’s a admin panel demo available on YouTube so you have a good chance to review the functionality before making your choice of the CMS based flash template and placing the order.

In conclusion I’d like to say that it’s only up to you what system to choose for creating and managing your flash website but let me give you some advice.

  1. Check the admin panel demo before making the purchase and make sure that it’s convenient for you. Don’t trust the words, test it.
  2. Think what features you need and what you don’t- you don’t have to pay for the stuff that you don’t need.
  3. Make your decision based on your template type. If you are a photographer- you’ll need photo and video galleries as well as your own domain name for brand recognition. Wix templates will work for a personal hobby website but you have to be more thoughtful when choosing a flash solution for your company business website.
  4. Avoid all the templates with huge/complex animations. This websites will not only work slowly but can make the browser and computer freeze.

Feel free to share your thoughts. All the best guys! Have a great day and see you soon again :)

April 02 2010

20:00

5 Simple, Yet Effective Online To-do Apps to Get Stuff Done

I’ve decided my primary focus this year to be on improving my productivity. Almost 4 months have passed. Lots of lessons learned. One of them was: do not make things complex if they can be kept simple. Same with to-do lists. Below you have 5 very simple, yet powerful online to-do tools you might find useful.

I’ve done my best to help you make an informed choice by listing and reviewing the best tools I found so far.

1. TeuxDeux

What is TeuxDux: A very simple web app where you can make to-do list for your next 7 days. I guess they did this because they recommend to plan your week upfront (which makes sense).

Why is it useful: It’s simple and easy to understand. Also it’s very user-friendly. I was able to start using it after 30 seconds literally without any confusion.

My experience with it: I’ve decided to play around with it and create a simple to-do list with not-so-simple-to-do items :). Take a look:

Okay :), not the best list in terms of breaking things down (I’ll let you know what I mean by that later) but gives you a pretty good idea on how can you make your list. You see how intuitive the interface is?

2. Ta-da Lists

What is Ta-Da lists: This is a tool created by 37 Signals, the guys who are responsible for inventing Ruby on Rails . As you can suppose, Ta-Da lists is also created with this programming language.

Why is it useful: Simple, easy to understand and very intuitive. You can create lists for a group of tasks and share every list easily. Sign up required 10 seconds, as you can see from the above picture (my experience also confirms this.)

My experience with it: I’ve played around with Ta-da lists and found it very easy to learn. Again, here’s a simple to-do list:

Oh well, I live in a village, you know :)

3. HiTask

What is HiTask: This is a bit more complicated web tool than the previous two. HiTask is a detailed tool, you can set up tasks at exact time on an exact day.

Why is it useful: You can set up projects, invite team members and easily turn HiTask from a simple to-do software to a powerful team management tool. It’s your choice whether to keep it simple or go more complex (remember, if you don’t have to, don’t over-complicated stuff.)

My experience with it: Their interface left me a good impression. You have a screen shot below:

Next!

4. Remember The Milk


What is Remember the Milk: I would say this is a semi-complicated (using it in context where simple is a “to do checklist” and nothing else, see #1 for an example) application for getting stuff done. You can categorize your activities in different categories, the default ones are Personal/Study/Work.

Why is it useful: Remember the Milk is useful if you need lists for things to do at home, school or work. No default set up is required to organize these tasks.

My experience with it: I’ve played around with this application a bit, here’s a screen shot below:

5. Todoist

What is Todoist: Another great web app for to-do items. The unique thing here is that you can create sub-projects and have a calendar you can utilize.

Why is it useful: Well, they were kind to answer this question instead of me:

My experience with it: …has been great so far. Very intuitive and easy to understand, as you’ll see from the screen shot below:

2 Things To Remember When Making To-do lists

I told you I’m a productivity freak. Here are 2 useful things to remember when doing to-do lists:

  • Break things down. For example, if you write ‘clean out the office’ and think that’s a to-do item, well, you’re wrong. That’s more like a project. ‘Clean out the office’ is a COLLECTION of tasks, not a task itself. So if you have this ‘project’ in mind, then break it down into several ‘to do items’ like ’shred unneeded paperwork’ and so on.
  • Don’t be vague. When you write your to-do items, be specific. For example, if you need to add an effect to a Photoshop image, don’t write ‘add Photoshop effect.’ Write down WHICH effect you need to add. Possibly, also write where you need to add it. Your purpose is to look at the to-do item and know immediately what you need to do without thinking very much.

By the way, the principles above are from a book I own named “Upgrade your Life” from LifeHacker which I found very useful for improving my productivity.

Congratulate yourself because you are already taking action and are in the next stage where you’re learning how to take action more efficiently. I hope this article helped you with that.

December 05 2009

18:50

WordPress 2.7 Cookbook + Free E-Books!

Packt Publishing recently sent me a review copy of “WordPress 2.7 Cookbook.” I’m a huge fan of the cookbook line; they’re similar to a huge string of quick tips. So if you don’t have time to read for an hour straight, you can always pick up a web dev cookbook and learn a few neat techniques within minutes.

WordPress 2.7 Cookbook is no different, and though it’s more of a quick reference book, rather than one that you would traditionally read front-to-back, I still found myself devouring the pages within a day or so.

“With this cookbook, you will learn many WordPress secrets and techniques, with step-by-step, useful recipes dedicated to achieving a particular goal or solve a particular problem. You’ll learn the secret of expensive premium themes, how to optimize your blog for SEO and online profits, and how to supercharge WordPress with killer functions used by the most popular blogs over the Internet.”

Useful Tips I Picked Up

  • Displaying a custom login form in your blog’s sidebar
  • Using the CSS sliding doors technique within WordPress
  • Creating an iPhone friendly version of your blog.
  • Save time by using Worpress shortcodes
  • Testing your blog’s security

Ultimately, books like this one deliver exactly what you’d expect. In need of front-to-back WordPress reference? This won’t do. However, if you think you’d enjoy reading over a 100 useful tips and “recipes,” I’d pick it up!

Free E-Books

It’s become a tradition to raffle off a handful of books every week on Nettuts+. To enter for a chance to win the “WordPress 2.7 Cookbook” ebook from Packt, simply leave a comment with a link to your favorite web development book ever. In twenty-four hours, I’ll filter through the comments, and will email a handful of winners! Be sure to leave some way to get in touch with you; an email address, or a link to your website should suffice.



December 01 2009

02:11

Digging into WordPress Review, and Free Copies!

A couple weeks ago, I received an email from Chris Coyier, of CSS-Tricks, containing a review copy of his recently released “Digging into WordPress” e-book. Expecting it to be more of a mini-book, I nonchalantly told him that I’d post a review that Friday; little did I know that this was a full-fledged book, packed full of knowledge.

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

Those of you who read CSS-Tricks will be well aware that Chris writes in a very easy-to-understand fashion. Rather than flooding each article with high-level jargon that only the most knowledgeable of us can understand, he instead dumbs each article down to the fundamentals – even to the point of being honest enough to convey when he doesn’t quite understand the reasoning behind some line of code.

As a result, he’s built a wonderful community, and has built a great reputation for himself in the last few years. This book, co-written with Jeff Star, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

The 400 page ebook covers everything from navigating the admin panel, to creating a comments form, to even more advanced topics like plugin development. And though it’s generally good practice to point out a few negatives in one’s review, it’s difficult to do so when a book is such a pleasure to read.

Heart of a Teacher

Chris and Jeff, in this book, have proven that they have the hearts of teachers. Even for intermediate to advanced WordPressers, there’s something to be learned — and at $27, the purchase is a no-brainer!

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

“There is much to learn about the World’s most popular publishing platform.
From your first steps of learning about WordPress all the way through
maintaining a site throughout the years, this book is packed with truly
practical information.”

Lots of Code Samples

“We go into depth about the anatomy of a WordPress theme. How they work, and how
to write the code you need to do the things you want. This means real code that
you can sink your teeth into, as well as copy and paste. Beyond theme
building, we introduce many tricks your functions.php file can pull off and show
you ways to increase performance and security through HTAccess.”

What About the Free Copies!?

Digging into WordPress Review, and Free Copies!

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!



November 06 2009

10:01

Book Review: Zend Framework 1.8 Web Application Development

If you are looking into buying a book to learn about Zend Framework, chances are you are already set on using Zend Framework to build your next project. Today, we will be looking at Zend Framework 1.8 Web Application Development by Keith Pope, published by Packt Publishing.

First of all, you’ll notice that this book is based on Zend Framework version 1.8, and as of writing this review, the latest stable release of Zend Framework is 1.9.4. This is not an issue, because 1.9, even though it brings new features such as PHP 5.3 compatibility and RESTful web services, does not change its structure or any part of the system that might have impact on your learning.

Flow of the Book

The flow of this book is heavily inspired by the famous Ruby on Rails book, Agile Web Development with Rails, where the author invites you to join the process of building a demo application, which in both cases is a shopping cart system. Judging by the feedback of the Rails book, most people feel quite comfortable learning a framework this way, some don’t. I guess if you are not a fan of following a defined learning structure, this book probably isn’t for you.

Short but Sweet

It is a relatively short book, with only around 350 pages. As a result, this book expects you to be comfortable with working with PHP 5 and have a solid grasp of Object-Oriented Programming. If you aren’t already familiar with PHP, or PHP 5’s OOP features, I highly recommend you to polish up the said skills.

MVC Still Rules

The first two chapters of the book focus on the MVC (Model-View-Controller) pattern. As the author mentions at the start of the book, Zend Framework is a loosely coupled framework; it does not enforce the MVC principle. However, given the popularity of MVC within the web development community, it is definitely worth while to learn how to write an application in MVC. Chapter one explains the basics of MVC whilst chapter two explains the request/route/dispatcher/response family. These two chapters will set up the foundation nicely for you and get you to understand the basic structure of a Zend Framework powered MVC application.

Adventure of the Store-Front App

Chapter three to nine contain the actual ‘adventure’ where you as the reader will be riding along with the author on the journey of creating a store-front/shopping-cart application. During the process, the author tells you not only what to do, but also why to do them. A good example is the ‘fat controller skinny model’ vs ’skinny controller vs fat model’ comparison, the book illustrates each and tells you why you should stick with the latter.

Chapter ten wraps up the store-front application with some more common tasks such as bootstrapping modules and sharing common application elements.

Code Optimization, Caching and Testing

Chapter eleven touches on a very practical topic: code optimization and caching. This is especially beneficial if you’re to run a large volume web application or if you have limited hardware resources. Pay special attention to the Zend_Cache section as the author tells you how to integrate it effectively in your application in order to achieve the best result.

The last chapter, chapter twelve, introduces you to Zend_Test, a testing framework that utilizes PHPUnit.

Verdict

To wrap the review up, I think this is an excellent book on Zend Framework provided you:

  • already have a good understanding of PHP;
  • already have a good understanding of OOP;
  • can follow the rather forceful learning flow;
  • know how to learn with initiative (e.g. do your own research!).

This book sits well in the market, as it aims primarily at web professionals who most likely are already experienced with PHP and perhaps some other PHP frameworks, and don’t have time to read books with 1000’s of pages.

You may purchase this book via Packt Publishing’s website.



Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...