Tuesday 30 July 2013

10 essential tips for your company’s web design project

Re-launching a website is a massive, multi-layered task for any business.
You have make decisions not only about design and branding — a re-launch requires a seemingly endless checklist of tasks: benchmarking, content strategy, audience research, SEO, back-end hosting … the list goes on. Plus, as a business every decision is hinged on ROI: What impact will the remodeled website have on your business’ traffic, engagement, and conversion?
Your business’s flaws and weak links are often exposed when it comes time to reinvigorate your web presence.
Whether this comes in tandem with an organizational restructure, a change in services or products, a reinvigorated brand strategy, or simply after realizing that your current website is not converting customers at the level you’d like, every business should re-convene on their web strategy at least every few years.
I co-founded iAcquire, a NYC and Phoenix-based digital marketing agency, and recently re-launched our agency site to reflect our evolution as an industry and as an agency. As a 15-year veteran of the digital marketing world and a captain of our agency’s recent remodel, I have gathered years of insight into necessities of a website relaunch.
These tips can serve as a blueprint, checklist, and guide for your enterprise’s future website remodeling plans.

1. Get everyone on the same page

Talk to each and every stakeholder about the impending re-launch. Meet with colleagues (within your department and cross-functionally), shareholders, clients, board members, industry mentors, and other key parties as you embark on your re-launch planning.
Ask each group similar questions:
  • What is missing?
  • What do you like about the current site?
  • Do you think it’s the right time to re-launch?
  • Do we have the capacity to do this as a company?
  • Do you think we will come out better afterwards?
  • Do we want a re-skin, which impacts the overall design aesthetic of the website, or a re-launch, a total overhaul?
Answering these questions early on – and getting buy in and feedback from all parties — will help you in the long run. When relaunching iAcquire.com, for example, multiple departments within our agency combined forces to create a vision for the website. Doing this helped us define scope, high-level direction, budget, requirements, and most importantly goals — all essential for the beginning strategy documents of a website redesign.

2. Allocate a budget and bandwidth

Your overall budget for your website redesign will frame your bandwidth. If your budget is in the tens of thousands of dollars, you have the budget to utilize a big agency to create a new website for your enterprise. If your budget is smaller ($7,500-$15,000) you may be able to utilize outside help on a consulting basis.
Either way, a large chunk of change will be needed for a website redesign. Hosting isn’t free either, so even if you do everything in-house you’ll need a budget.
Also, consider the project scope and if your in-house team has the capacity to complete such a large-scale project. Creative, content, promotion, SEO, and developers will all need to commit a large part of their workload to the project. For example, our marketing and strategy team dedicated a good solid three month to the project.
CEOs, CFOs, CMOs, and legal need to be engaged from the beginning as well. And project status should be communicated at least one time per week to high-level stakeholders.

3. Ensure benchmarks are in place

Create benchmarking documents to track the current website’s design and content, layout, as well as audience targeting and current website analytics (visitor interaction and conversion) so you can accurately measure success after the new site launches. Define your current and future KPIs and keep track of them. Keep in mind that these may change as your organization grows, so be inclusive and collect as much as you can.
For iAcquire, we use the following key performance indicators:
  • Leads
  • Time on site
  • Share of voice
  • Number of links
  • Organic search rankings
  • Impressions
  • Traffic

4. Define or redefine your key audience personas

Consumers are getting savvier and savvier by the minute and modern technology allows users to tune out various messages. With that being said, it is crucial to craft your remodeled website around your converting, engaged personas.
Once you define audience personas, you can better direct:
  • The tone of the copy
  • The website’s overall design/look
  • What type of content (images, copy, videos) resonates best
  • Calls to action – where the are placed, what copy to use, user path
Creating audience personas helps all creative, content, and allows marketing stakeholders to maintain uniformity. Leverage audience market data, survey results, and need states to create personas and user stories. Use this template and create your own three to five personas. Utilize market research tools like Experian, Nielsen, Facebook data, and even Google Analytics to get to the core of your visitor base.

5. Plan as much as you execute

Draft a creative brief that includes all project requirements – from copy and SEO to technical hosting and color scheme requirements. This brief will serve as the blueprint for all parties working on the redesign.  The plan can be as long as 30 pages, though the length is not important; the content is the important part. If it helps you, then delegate specific sections to different leaders within your team. Come together and review the plan, and then from there start executing your strategy.

6. Consider your copy

A shiny, well-designed site is great, but like your looks it’s the first thing to go with age. If your content isn’t great, neither is your site. And it’s not just about well-written prose; it all has to be planned out, persona-driven content, created by understanding your key audiences and how they behave online. Develop a roadmap for content strategy and your copy will fall into place.
Within iAcquire, we know that governance and establishing an editorial calendar is just as important as setting up the content framework. Without structural guidance organizations can fall into content paralysis. These processes defines the players, topics, and requirements necessary to curate and publish content.

7. Keep the bot in mind

Within your re-launch two key “audiences” need to be kept in mind: your visitors and the search engine spiders. Search engines have a very detailed algorithm for ranking pages, and with your re-launch you want to make sure that you stay even or above in your rankings. Here are three key considerations you should have for SEO:
  • Redirects
    If specific URLs are no longer active, or you are changing the site architecture, make sure 301s redirects are in place. Non-existent redirects can lead to a “docked” search position.
  • Conversion end-points
    Your re-designed website will probably not have the same conversion funnel or path as your last site, so make sure someone is dedicated to checking the conversion points on your redesigned sites to make sure they are a) working, b) properly migrated, and c) tracked.
  • On-page keyword analysis
    Target two to three keywords per page and intertwine them organically throughout the copy and metadata. If your organization previously targeted a list of keywords, look at them again as competition and volume changes from year to year and even month to month.

8. Who’s your host?

Consider where you are going to host your site.
Is it going to sit on a server that your enterprise owns and maintains, or will it live with a hosting company? Is your hosting bandwidth enough? Consider what frameworks you will use on the front end, and what Javascript libraries you will use, such as MooTools or jQuery. PHP, .Net, or Rails? WordPress or Drupal?
All of these decisions need to be made early on.

9. Utilize Google Webmaster Tools

Once your website is in development, have your organization set up a Google account (if you don’t already have one) and get acquainted with Google Webmaster Tools. This free Google tool can tell you any problems with site/page indexing and even click-through rates. If the content is being rearranged on your new site, it could be buried deeper, making it harder for search engines to crawl, which leads to a non-indexed area.

10. Strategize a post-launch plan

Your job isn’t over when your redesigned site launches. Create a plan to promote the new site on social media, PR outreach, and blog announcements. Plan on pushing marketing messages through these channels for at least two weeks past the launch. Connect with key influencers on social who can push your message further.
Then create a plan to organize, develop, curate, and publish new content so you keep luring new visitors in: inbound marketing at its finest. On an internal communications front, make sure that your organization is kept in the loop as well. Inform all departments of the re-launch. Be clear on what has changed and how they can utilize your “2.0” or “3.0″ website to optimally conduct their respective jobs.
While every organization has needs, adopting a process is a crucial element. Use this list as a guide, and customize it to meet your organization’s unique challenges, and develop a website that reflects your company in a way that is beneficial to you and your customer.

source link: http://venturebeat.com/2013/06/07/10-essential-tips-for-your-companys-web-design-project/
 

Thursday 18 July 2013

40 Powerful CSS Techniques You Should’t Miss For Effective Coding

A CSS styled table version 2


2. A CSS-based Form Template


3. A Stripe of List Style Inspiration


4. Accessible expanding and collapsing menu


5. Advanced CSS Menu Trick


6. Animated Rollover Arrow


7. Animations


8. Background Size


9. Better Ordered Lists (Using Simple PHP and CSS)


10. Box Shadow


11. Creating a table with dynamically highlighted columns


12. Creating bulletproof graphic link buttons with CSS | 456 Berea Street


13. Creative and Cool Uses of the CSS Border Property


14. Creative Use of PNG Transparency in Web Design


15. Cross Browser CSS SlideShow


16. Cross Browser Multi-Page Photograph Gallery


17. CSS Bar Graphs: Examples


18. CSS Based Navigation


19. CSS Curves


20. CSS Dock Menu


21. CSS Double Lists


22. CSS-Based Tables: Technique


23. CSS Gradient Text Effect


24. CSS List Boxes


25. CSS Map Pop


26. CSS Pricing Matrix


27. CSS Production Notes


28. CSS Pull Quotes


29. CSS Rounded Corners Roundup (Nifty Corners)


30. CSS SiteMap


31. CSS Speech Bubbles


32. CSS Stacked Bar Graphs


33. CSS Step Menu


34. CSS Tabs


35. CSS Teaser Box


36. CSS Zooming


37. CSS: Menu Descriptions


38. CSS-Based Forms: Techniques


39. Date Display Technique with Sprites


40. Displaying Percentages with CSS

















source:
http://technologytosoftware.com/best-css-techniques-you-shouldt-miss-for-effective-coding.html

Sunday 14 July 2013

20+ wonderful design-heavy websites


20+ wonderful design-heavy websites

If you’re asking me to share with you some of the best web designs in the world, chances are I’m going to point you in the direction of something that’s pretty minimal. In fact, if you ask most designers, they’ll point you to sites that are equally sparse. Myself and others tend to believe that less is more. Plus, we’re entering an age where audiences want less fluff and more information & content. That lends to the question, how do we handle design-heavy websites?
I don’t mean design in the sense of layouts and higher understanding. I mean design in terms of aesthetics and decorations and lots of visual stuff. I’m big on separating the two, but when you think about it, I start to wonder when we on the web even left that idea. Think about it like this: many print designers know that you can’t do too many crazy effects because they don’t work on paper.
But on the web, you can really do what you want and people will see it. Nowadays, you get online and it’s not uncommon to see a website with very little design and lots of white space. So today, we’re going to do something a little different and show you some of the great websites that have tons of visual design, but still manage to work.

The X3 Internship Program

Most internship programs give you a piece of paper and you have to do your best to keep up. You really might feel like you’re pushing the envelope if your internship program has a dedicated web page. x3 is an agency that decided to give their entire internship a full fledged website. It’s not just any old website either. There’s so much excitement built on this page thanks to the unorthodox layout and great illustrations.

Kahuna Webstudio

Kahuna Webstudio does a great job of creating a new iteration of the typical agency or portfolio page. While many are doing one-pagers, they aren’t doing lots to create differences per ‘page.’ Kahuna does a different thing for each section. And while it’s not the heaviest of design, they use a good amount to help create the feeling and emotion they’re looking for.

Beurre & Sel

I’ve never seen cookies look so sophisticated! Beurre & Sel is an excellent site that balances lots of design with simplicity. They first create their excitement with various, bold color choices. They keep the balance by using a consistent, high quality font for headlines and a constant red color that excites and keeps base with the brand.

Browser Awareness Day

As designers and developers, one of the most annoying things to do is to spend hours debugging and making our website cross-browser friendly. It almost makes no sense how these browsers are so different and show different pieces of code differently. It’s also extremely maddening when people with old browsers can’t even properly enjoy your website. You couldn’t do much before but this web page for Browser Awareness Day seeks to stop all that. With it’s welcoming design and spectacular illustration, it helps spread the idea that we should all get on the same page about browsers.

Creative9

At some point, creative agencies decided it would be really neat to strip their websites of lots of design. It was probably an attempt to spotlight their portfolio of work, but some just end up looking bland. Creative9 wasn’t going to take that route and decided they were going to have a great design no matter what. They create a galaxy that almost makes you feel extremely cool just to work with them.

D’Angelico Guitars

Guitars and other instruments aren’t typically areas that experiment with much design. Many people would rather look at the beauty of the guitar than the beauty of a website. D’Angelico does a great job of highlight the guitars and creating enough aesthetics to compliment what’s already going on. It’s the perfect amount of decoration on top of a well-designed and planned website.

Dearest Nature

With some names, there’s certain things you expect to see and associate with those names. For Dearest Nature, it would almost be crazy if they passed up the idea to not use nature in their imagery. Instead of going for a clean look, they went with a natural feel. The artistic images and grungy kind of texture really help with the emotion and feel of this group.

Delirium Studios 

Much like the Creative9 design agency, Delirium decided they were going to go all out on their web design. Delirium does a good job of making available the information you need only to make a decision and nothing else. It’s kind of like you have to choose heavy content over heavy design and Delirium did a great job choosing the latter.

Blue Acorn

Blue Acorn is a pretty clean site that makes sure to break up the content easily and not over complicate things. They do, however, have one major piece of design that is the centerpiece of their website. They’ve decided to create an animated illustration that helps show how they work. And while it isn’t large and across the entire site, it’s a great way to add some wonderful aesthetics amongst a solid design.

Hugs For Monsters

Hugs for Monsters is a portfolio for an individual. The illustration at the top of the page actually is taken across the entire site to create this exotic, tribal feel. It’s paired with extremely clean design, which makes you think this guy has a pretty good wild side while he can get his work done.

The Land of Nod

When you design for kids, there’s a fine line between being too kitchy and just being too plain for children. The Land of Nod sells great furniture for kids. Now, we know kids aren’t logging on to purchase beds and chairs online, but we do know that creating the right feel for the furniture will definitely get parents to buy quicker. Land of Nod has some great design that balances really well with what children want and what parents need.

Media Engine

While the homepage for Media Engine is nice, please make sure to check out the pages under the ‘Our Services’ tab. They really went above and beyond for the design here. Photo-manipulations are a great way to create some excitement with designs and they’ve utilized them throughout the site. Media Engine is known for providing new ideas, so what better way to show this than by creating crazy good manipulations, next to some good design.

MyProvence Festival 

Of course you want an art festival to have a web design that’s telling of the work to come. MyProvence Festival has created a theme — it seems to be like a vintage style mixed with some elements of the new age. It’s extremely creative and makes you feel that way about the festival.

Nasa Prospect

The NASA Prospect site is a site designed by students in conjunction with NASA. They’ve created a site where an astronaut goes on adventures throughout the galaxy because that’s what kids dream of doing. With the help of some scrolling and development techniques, they’ve created quite an interestingly illustrated and put together story.

Rdio

I like the Rdio website because it’s just a really solidly designed website. Again, there’s a great balance between cleanliness and aesthetics that has to be made note of. They do a great job utilizing the flat color design concept and pair that with a wonderfully colorful graphic that highlights some of the popular artists. The design of this site really draws you in and makes you want to try their service.

Samcreate

Aaron McGuire has created what seems to be a pretty regular website when you go there. Immediately, Samcreate bursts with some energy and flavor as the background moves. Throughout the site, you tend to notice some elements that have an added flair to give the site some personality that you normally wouldn’t see.

SoSweet! Creative 

SoSweet! is a creative agency (husband and wife team) that’s created another pretty run-of-the-mill website. Until you actually look around. Much like Samcreate, they add lots of flair to different elements to make this site really pop. Not to mention the animation on the header slider, really gets you interested in what they are doing.

The Original Classy Broad

Every section of this one-page site feels like a new flyer design. She mixes this site up by introducing new styles, but keeping consistency by using the same type of vintage theme. This website is fun and great for those looking for new ways to spin our websites creatively.

Webbklubben

There’s really no other way to say this, but this web site is just the coolest thing ever. If you bounce around from page to page there’s something different and interesting. They’ve revisited some of the ways we do things (especially the map) and have made it exceptionally interesting, to say the least.

Wee Society

Just like the Land of Nod, designers have to find a way to say ‘for children’ without overdoing it. The Wee Society has found a great, clean way to show off their products. Wee Society has many extra design elements that help with this, but the colors and design really help.

YOOKOSO Japan

Yookoso is designed from top to bottom. Between parallax scrolling and some killer photo manipulations, you immediately get interested in what they are selling. Even though there’s so much design and aesthetics, they keep manny of their elements common and you know exactly what they’re talking about.

Conclusion

I think lots of have abandoned this dominate style of creating websites because of ease in development, load times of different browsers and just the notion that people want to see less. However, if there’s a way to balance or incorporate the two styles (which there are), I think it’d be beneficial to start doing so and bringing excitement back to the web and making it different.

source:http://www.webdesignerdepot.com/2013/04/20-wonderful-design-heavy-websites/