The guide below should help you to stay on track when creating a redesign project to keep older visitors happy.  If you are in the middle of one right now, you should also be able to get help.

Redesign Correctly
There are a lot of things to consider besides technical elements of your app or website, before you consider making a change to the current design.  Make sure you have an acceptable reason for the change(s), because your existing visitors have certain expectations.

Request Current Users Input
Always maintain an open line of communication with your users.  Advise them of your idea to make changes and ask for their input.  Give them opportunities to test the new design.  You will come across those who are creatures of habit and do not like any change.  However, you will also get some insight into what they feel should be left alone and what should be changed.

Allow Users to Adjust to Changes on Their Own Time

This deals more with app type sites like social media.  You will get fewer complaints if you let users convert when they are ready to make the change.  They need time to adjust to using the new interface.  However, it is important to put a deadline on the change.  Provide your users with a specific date  the current interface will be discontinued.

Use a Feedback Tool
A feedback tool will provide your users with a method of letting you know their likes and dislikes. Use this tool either when you launch or during testing.  Be sure to address all issues mentioned by more than five people.

Detail Your Redesign Decision

Create a blog post discussing your plans to redesign.  Provide detailed reasons of your functionality goal or what the improvements will do for user interface.  Otherwise, your users may think that you are only doing it for aesthetic reasons.

Present a Tutorial or Tour
If you are drastically reconstructing page elements, offer a video tutorial or tour outlining the new features and design.  This will help existing users adapt quickly to the changes.  It shows them that their experience is important to you, and you want it to be the best that it can be for them.

Tips on Fixing a Failed Redesign

•    Damage Control:  Openly acknowledge the failure.  Let users know that you are considering their concerns.  Choose an outlet that reaches the highest amounts of users.  For example, your company blog or Twitter.
•    Address Complaints:  Address complaints as specifically as possible.  Start with the most complaints about a particular function.  Offer any helpful tips or information via a blog post or a mass email, or make a change.  If the problem is really big, the better solution is probably to make the change.
•    Go Back to the Old Design:  If the complaints are massive and affecting your traffic, change back to the old design until the problems can be fixed.

Thumbnail

Best Web Gallery

Best Web Gallery is the place where you can find the best Flash designs and XHTML designs. It has an easy to use interface and here, you are allowed to preview a certain design while you are hovering over its image, particularly. You can read and leave your comments regarding the designs.

FWA

FWA or Favorite Website Awards displays great Flash designs. If you are awarded by FWA, it means that you are one of the most talented web designers.

Unmatched Style

Unmatched Style deals with acknowledging wonderful CSS-based web designs. Here you can comment and rate the sites posted here. Moreover, you can find news, resources links, and interviews with the best designers, and so on.

At Adobe Design

At Adobe Design Center, you can find articles tips on interactive and motion designs, galleries. It has a gallery where you can find designs from many different fields. You can also take the advantage of the tutorials and the articles posted here.

Web Crème

Web Crème is another place that deserves your attention. It is a very simplistic gallery but in spite of this fact, it can be a great inspiration source for web designers. Every entry is tagged with its primary color palette. In this way, the designers can view designs that match to what they are looking for regarding the color theme.

Flickr

Flickr was created by Patrick Haney, and it contains web designs with over 400 designs. Every design in a set has a short description of the website.

LogoPond

LogoPond, allows you to submit your designs, to receive and share feedbacks from different members. The comments regarding the displayed designed can be a valuable source for you. More on, here you can find tips, suggestions and advice, and so you can inspire yourself for your projects. 

Pixelawards

Pixelawards gathers well-designed, exclusive, and handpicked websites into a unique gallery. You can rate every design, and it is a place where you can find the design you need very easily.

Of course, my list can continue because there are many other places that can be a rich source of inspiration for you. However, here I have tried to select the best web pages where you might easily find what you need for your designs. And I really hope you guys enjoy this list. I’ll include some more in the future.

On Page Text Search

Many users are familiar with the web content search bars found on most sites, but many also may be looking for a better solution.  This technique addresses a user’s need to find text within the current website page. Here are the steps:

1. First, build an input box.
2. Use jQuery to attach a listener to track changes.
3. Next, use the light-weight jQuery plug-in, Highlight, to highlight searched-for text.
4. Style the highlighted text using CSS.
5. Finally, ensure that the highlighted text is removed once the user edits text in the input box.

Drag Controls for Oversized Content

Here a drag and drop control bar addresses the need for oversized images place within a limited layout.   It’s a creative technique that really enhances user experience.

1. First, set a mark-up for basic controls and add CSS.
2. Then, begin building interactivity using jQuery UI’s dragging module.
3. Finally, set up a drag listener and add more styling to make the drag box more interactive.  Also, the sliding animation can be even more beneficial by adding a parallax effect.

Subtle Hover Effects

The subtle transition technique used here is an authentic take on mouse interaction, offering a unique design experience for the user.

1. First, attach some CSS with the class “subtle.”  For a smoother transition add CSS3.
2. Include support for all users by leveraging a jQuery backup technique.
3. Attach the animation to the hover and focus event listeners.

Comment Count Bars

Displaying the “most commented” posts in a sidebar of a blog is a great way to increase user-to-user activity.  This method creates highlight bars for a dynamic display, pulling post counts from WordPress.
1. Start by pulling posts using Word_Query and a variable name.
2. Loop through each post selected.
3. Apply basic CSS styling.

Full-Page Sliders

Another great way to enhance functionality is by incorporating the use of sliding animation.  Here, the slide animates across the whole page for a simple yet innovative solution to displaying related content.

1. Mark-up and apply CSS.
2. Using jQuery, define your variables, and then create a function to address the sliding animation in both directions.
3. Finally, build the controls.

Conclusion

These versatile techniques represent small fraction of many methods of enhancing functionality.  The web designing world is full of other techniques, with or without the use of jQuery, suited to dynamically improve your websites.

Check out 5 of my most favorite CMS’s.

• Business Cataylist:

The first and one of the best CMS is “Business Catalyst” that allows you to build an eCommerce website, varying in sizes. Once you are done with sign up and all, you will get a platform where your CMS works and produce shopping carts, blogs and forums for you. It has a very user friendly interface that allows you to have an eye over customer’s activity as well as visit rate. BC not only builds an online store for you, but also manages it. What’s more? This complete hosted application facilitates the user to have support on phone, live chat or emails. 

• Magento:

In the list of top five CMS’, Magento comes at the second place. Basically, an open source platform, this eCommerce application facilitates a constant flow between online sales and designs. It is a multi-dimensional application that manages numerous websites and integrates 50 gateways of payment and Google website optimizer at the same time. Due to its versatility, it is gaining rapid popularity day by day.

• Prestashop:

Prestashop is the third most widely exploited eCommerce platform that provides multiple features at the same time. These features involve control over shipping, tracking, orders, inventories and management of the business. It also allows the users to handle the images and product as well. As far as the payment procedure is concerned, it directly sends your payments to your Paypal pay account or your local bank account, whatever the method you utilize.

• osCSS

osCSS is also a simple ecommerce application developed in PHP for shopping cause. It facilitates free distribution and downloads. This application complies with web standards using XHTML language. On this platform, you are given full access from product display to shipping. Though it is not considered exceptional one, yet it ensures good results.

• Open Cart:

Open cart is another CMS that provides user friendly admin area and simplifies the procedure of management on your website. This application gives you ample room to customize your layouts and selling of the products with thorough control over shipping procedures. It is an ideal platform for a man eager to establish a small or medium range business on the internet using powerful tools.

Keep organized.  Rather than dropping in classes and id’s at random, try and keep things structured.  Declare generic items first, followed by the not so generic items, and keep to that pattern.  That way other developers are going to be able to follow the code, which is one of the great advantages of using CSS.

Title, sign, date.  Ensure that people know it was you that did the design.  This is helpful if another designer needs to clarify something with your design.  This is especially helpful with a template.

Template libraries are brilliant.  Once you have a good layout, strip out everything that is not generic to the template and file it.  It is pure madness to write every style sheet from scratch, so this will save you a lot of time for your designs.

Remember you can save variances on a theme by saving them in a certain way, two column layout, blog layout and so on and so fourth.  There are some good editing tools which will help you to do this.

Naming conventions are useful.  Good naming conventions can make a lot of difference when you come to modify the design.  The key here is to use generic names rather than what the element is.  So instead of .largefont, .title is far more a useful name.

This has far reaching scope when it comes to modifying designs, so think carefully about what you are calling them, and this will save you a lot of work in the future.

Avoid using underscores.  As backward compatibility is an issue with CSS that use underscores, try and form the habit of using hyphens instead.  If you do, you will save yourself a lot of modification work later on, trying to figure out why your code is not compatible with older versions of IE or Firefox.

Repeating yourself is to be avoided.  Always look to group elements where possible.  This saves time coding and compiling, and try to utilise the opportunities for short cuts too.

Optimize.  On the same theme try and cut down code wherever possible.  So group and employ shortcuts as above.  The fewer lines of code, the faster the page loads, it is as simple as that.  Loose what is unneeded, and remember that zero can just be stated without a unit.

Write for Gecko.  If you write your CSS design for Gecko browsers, tweaking for Webkit and IE will be easier than the other way round.  So make sure Gecko browsers work first before you do anything.

Use a validator.  If your CSS design is stuck, use a validator to find errors.  W3C has a free validator, and this will be a big help in getting your design back on track.

Keeping it clean.  By keeping browser specific CSS style sheets individual, and just use java script, server side code, or conditional comments when needed, will help you keep things clean and tidy.

These CSS tips for keeping your code well organised will not only help you write better code, but better templates too.  Your colleagues will also benefit from a tidier coding from you, and you will be better thought of as a designer.

You will find that projects are easier to work on with a little organisation, and you will be able to find the information you need faster for subsequent modifications.

Progressive Design:  The idea behind this technique is that a user follows a natural flow over several pages to obtain the information he or she needs.  This is normally navigated by buttons like “click next”, and so on and so fourth, and is often used for completing forms, where sections are displayed one after another.  Another use is if your site wants to demonstrate to the user, a series of steps that were taken to complete a task.  Hence the name of progressive design.

Grids: Undoubtedly the most essential element to any layout,  is a grid.  A good grid system will separate content on a web page in an almost seamless way.  Many web designers believe that the grid system should be subtle, and some of the best grid systems are just broken lines that divide one section of the page from another.  They also make the content very scannable, which is essential.

To make a good grid layout, aesthetics are everything, as chunky, padded grids do not make the best use of white space, and can be very off putting to users as the information will not be defined, and, or have a broken flow.

Accordions:  Accordions work in a very similar fashion as sliders and carousels, as they display focused content in a box.  Again they are very good if used for their purpose.  The main difference is that they appear on top of related information, and one can be displayed one after another, like an accordion.

Accordions come into their own when several types of related information or related products are to be displayed.  This shows the user that there is a relationship between the content that they are viewing, and like sliders and carousels, it is only viewed if the user wants to view it.

Mega Drop Down Menus:  These are similar to rollovers, as they present information when the mouse hovers over the element, but as the name would suggest, a vast menu appears giving the user a choice of the information they want to see.  This is technique is being used on many websites that feature products.  The mega drop down menu can display information about it, or indeed another set of related menus.

These are particularly good because information is presented without having the user navigate away from the original page.  This is technique is growing in popularity especially if there is a lot of information to be displayed about a product.  Such as a car.

Together with the tips highlighted in part 1, we feel you have a good comprehensive guide to choose the best way to present your content.  In many cases, it is the subtleness of the presentations that will win the day, and create that killer design.  So think about what information is to be presented and the way to present it will choose itself.

The key to content layout is to give the site a natural flow that will either take the user on a journey, or simply give the user an option to select the content they wish to see.  Content is King, and choosing the best way to present your monarch, is paramount to a successful design.

We hope these tips for laying out content in web design help you do exactly that.

]]> http://www.dreamtemplate.com/blog/web-design-tips/tips-for-laying-out-content-in-web-design-part-2/feed/ 10 http://www.dreamtemplate.com/blog/web-design-news/web-30-where-will-your-designs-lead/ http://www.dreamtemplate.com/blog/web-design-news/web-30-where-will-your-designs-lead/#comments Wed, 24 Jun 2009 23:24:09 +0000 Richard Teahon http://www.dreamtemplate.com/blog/?p=282 The development of web 2.0, or at least the use of the term begs the question what will be developed for web 3.0?  What developments are hidden round the corner, and what will you need to know as a web designer to incorporate what web 3.0 will be about.

As web 3.0 is at the moment speculation, lets look at the definition of web 2.0 as stated in Wikipedia.

“Web 2.0? refers to a perceived second generation of web development and design, that facilitates communication, secure information sharing, interoperability, and collaboration on the World Wide Web. Web 2.0 concepts have led to the development and evolution of web-based communities, hosted services, and applications; such as social-networking sites, video-sharing sites, wikis, blogs, and folksonomies.”

One of the more down to earth theories of web 3.0, is that where as now to search for a film, a place to eat, and related transport for a night out, web 3.0 browsers will have moved up a gear in artificial intelligence, and do most of the searching for you, based around your preferences.

So instead of you doing the hard work, the web browser finds the cinema, the film, a restaurant based on your eating habits and preferences, and the time of the last bus or taxi cab number.  Taking this to its logical conclusion, the web 3.0 browser, will book the film, make the reservations, and possibly book the taxi to bring you back home.

This is one theory, and ties in with the Semantic web theory, where search engines evolve that little bit further and have a better understanding of related words to the searched for keyword.  This is the thinking of the World Wide Web’s inventor Tim Berners-Lee.

It is also an extension of what web 2.0 has brought us.  We specify prefences ourselves on social networking sites such as facebook, we customize where possible on applications and tools such as WordPress, and many applications make recommendations on either what other customers have bought, or our buying habits.

Other ideas from internet experts are:

The development of the web runs in ten year cycles.  The first cycle concentrated on back end performance, the second on the front end performance.  So the third?  Well many believe the back end will be enhanced to cope with developments in web 4.0.  Whatever they maybe.

Rather than seeing a web 3.0 we will see a web 3D, where using the web will be like playing in a massively multiplayer online roleplaying game, or MMORPG.  Users will create avatars and wander about the virtual world of the World Wide Web, experiencing the illusion of depth.

Everything will be connected to the internet, not just computers and phones, or the obvious equipment like televisons, but clothing, pens, pencils, everything.  This way, data on personal habits will be collected and stored, and used on the users behalf.  The debates on this baby, will be one for the history books should it ever come about.

True artificial intelligence will be created based on the technique of distributed computers.  This is where a major task is handled by several computers each doing a little of the task, which has been broken down for faster processing.  In web 3.0, we will see solutions to major problems, and new ideas emerging from thousands of computers connected via the web.

Many of these concepts do seem to be more at home in Star Trek than in the real world, but as a web designer, it is always good to have one eye on the future, as you could be creating it from a web design point of view.

This article looks at why bad planning is so common, or more accurately why underestimating the amount of time a project will take is so common.  Hopefully, once you have read this article, you will have a much clearer and better understanding for your future freelance web designs, and so you will be able to avoid project planning disasters.

There are in essence four reasons why projects overrun.  These are:

Bespoke features for a specialised industry.

Grey areas or unknowns in the design.

New, or unfamiliar technologies are required for the design.  Some may never have been used before.

The time taken to plan the project, make the project unfeasible.

There are also other reasons which are everyday realities in the freelance or small business world.  They are:

Client needs an estimate for their design now or will go elsewhere

Estimating is no fun

Revenue needed for cash flow

There is no actual experience in the project, so no accurate price can be calculated.

There are ways round each of these however, so lets look at them.  For new or bespoke technologies, there is always the option of outsourcing to an expert.  Though this could eat into the budget, experience can be key to solving a particular design dilemma.

Failing that, you can try and negotiate a test phase for the new technology or bespoke application at the time of pricing.  This will provide you with the time needed to learn what you need.  It will also give you a new string to your freelance bow for future projects.

An alternative to this would be to research the technologies or techniques you believe you need, and take your best guess at time taken.
Estimating is vitally important as a freelance web designer, or small business holder.  The golden rule is the more thorough you are, the more accurate you will be.  That’s right, the same as coding.  The nature of sales is that some you win, some you lose, and you will find that you can spend a long time estimating a project, and sadly, not win it.  If this happens, obtain feedback, and use the experience for your next estimate.  All negative experiences as a freelancer, have a positive element to them.

If your client is demanding an estimate or you’ll lose the business, weigh up these factors.

Going over budget vs. Gaining repeat business or recognition

How will the client be to work with?

Try and obtain an understanding in what is involved and the kind of budget the client has in mind.  This way you can determine whether or not to take the job.

Your cash flow is King, so sometimes you may need to take on a project where you will not make any money, but will help you keep things ticking along.  It is a reality of going it alone.  Bills have to be paid, as do staff.  It may simply be a means to an end, but at least you will live to fight another day.

These hurdles are there to be overcome as a freelance web designer, or small business owner.  If you use these techniques, your business will run smoother, build a better reputation, and through the experience you will learn a lot about the web design industry, and improve your own web design.

Going it alone is very exciting, and most peoples ultimate aim.  These, together with our other web design freelancer tips, will help you make the journey, a very successful one.

When RIAs’ are developed and used, the normal remit is to ask questions involving budget, what is the RIA to do, how is it integrated with the rest of the design, animation, and what the client wants.  It is seldom that designers of RIAs’ will bring up the concept of searching, and it is at best a problematic afterthought, that has been in all probability, raised by the client.

The key here is not to build it in afterwards, but to build it in during the development of the RIA.  To do it, it is not about learning a new skill, but to push searching, and search ability of the RIA, to the front of the queue, and keep it there.  At every stage of the development cycle of the RIA, the search ability question, has to keep being asked, and answered, by the design team.

Remember the RIA may look spectacular.  It may be a marketers dream as the branding is reinforced, it may be slicker than James Dean, the animations could be up there with Pixar, but if it only pulls through around twentieth when indexed by Google, the client is going to a tad sad.  RIA and searching, it can be done, but only if this is integrated, and considered, at the earliest stages of development.

Let us not forget that a similar issue existed with PDF documents a few years ago, where search engines had trouble recognising the content of them.  Now they can crawl through documents and find content with few problems.

Yahoo, Google, and Adobe, are looking for ways to repeat internet history and make it easier for searching RIAs’.  In fact they are collaborating on the issue, and have been for some time.  The idea of search engines crawling through RIA content is very appealing to all, especially developers of RIAs’, as this makes them that little bit more versatile, and less excuses for developers not to use them.  Also, if the Adobe, Yahoo and Google collaboration developers a fully searchable SWF, (Shockwave Flash), Adobe will have an advantage over the competition, leaving them to scurry along to catch up. 

The collaboration has led to Adobe developing optimised Flash player technology last year.  Now better known as “Flash player for search engines”, this headless version of Flash, changes the state of the SWF, to make the content more accessible to search engine spiders.  It is indeed a significant step towards searchable RIAs’.

Though we have mentioned Flash player a lot in this article, it is worth remembering that other RIAs’ exist too.  Java FX, Curl, Ajax, and Microsoft Silverlight, are all popular with the RIA web design community.  The same principles of developing a searchable site should be applied to these too.

As you can see the problem of searchable RIAs’ is not completely solved, so it is up to you as a developer, or your design team, to work in search ability into your RIA.  Remember RIA and searching, it can be done, but only if you are prepared to engineer it.

It is though, only a question of time, before RIAs’, are as searchable as PDFs’.