Five Tips for Responsive Web Design

If you’ve been discussing a website redesign with just about anyone these days, you’ve no doubt heard the term “Responsive Design” come up one, or a hundred times. Responsive Design, one of the more effective ways to approach designing websites for mobile devices, is all the rage. And rightfully so.
Every design and development decision made during the process of designing a user experience for a website ultimately ties back to your main goal: creating a relevant, intuitive, and impactful experience for your audience. And with the latest projection having mobile audiences, whether on phone, phablet (really large phones), or tablet, outpacing their desktop brethren this year, not having a plan to meet mobile audiences on their terms is a surefire way to deliver a crummy user experience that frustrates audiences and undermines your brand.

But, whereas, even just a few years ago, designing for mobile audiences was viewed as a luxury, and meant accounting for just a few types of devices, thanks to the unrelenting pace of innovation (have you SEEN how many phones Samsung offers?!), website design today means delivering user experiences to a seemingly infinite variety of screen sizes and resolutions.

This is where Responsive Design comes into play.

In short, Responsive Design is a very efficient, cost-effective way to make your website’s layout adjust on the fly for hundreds of different screen sizes your information can be displayed on. With a little bit of smart front-end coding, and thoughtful user experience design planning, a Responsive website will customize how it presents content and delivers the user experience for an almost infinite user base.
As they say, anything worth having takes hard work. And as with any designed solution, there’s a difference between good and great. So what exactly goes into executing a successful Responsive Design plan for mobile websites? To help answer this question, I’ve pulled together a non-technical primer to hopefully provide some insight into to key issues to be aware of if you’re planning a website redesign that includes Responsive Design.

Your Content
Too often, content is added to a website far after design comps have been approved and site development is in full swing (if not completed). But as I’ve discussed before, Designing with the Real Deal, aka, your content, is invaluable in helping designers and developers plan and create a user experience, especially for mobile, that effectively helps you reach your goals.
Unless your design firm is creating your content for you, it’s probably going to be hard to get your content ready early on in a website redesign (after all, you’ve got a job to do that isn’t designing websites). But having the content early in the initial design phase pays big dividends and makes it far more likely that the design solution you fell in love with will translate properly when real content is added.

Limiting Functionality
Mobile phones have limited capabilities compared to desktop computers, so while designing mobile-friendly wireframes and design comps early in the process tells you what your content will look like on a mobile device, what about making sure key features of your desktop site actually work on a phone? Design processes like mobile-first attempt to address this by limiting initial planning only to what’s possible on mobile, and then adding from there.
We prefer not to design for mobile-first, but rather be mindful of decisions we’re making during initial design, and simply have a plan for dealing with them as we translate to mobile devices. This often means turning off certain features that won’t translate well to mobile. Whatever process you prefer, as long as you keep in mind how you plan to deliver a great experience across all platforms by working with what they offer, you’ll be fine.

Responsive Frameworks
As interactive design for mobile has taken off over the last few years, responsive “frameworks,” custom libraries of code, like Foundation and Twitter Bootstrap, have been introduced to speed up the process. What they do is instantly provide a grid or general foundation for rapid prototyping of different mobile layouts and functionality, letting designers spend their time on the details of an effective brand experience (that’s what separates you from the crowd, after all).

Image Sizes
With an incredible range of screen sizes and resolutions, websites need a way to deliver images effectively to everything from a 27” iMac to a Samsung Galaxy II. In a nutshell, CSS Media Queries are little pieces of code that analyze the size of the user's browser window, then instantly deliver the proper code for that specific browser. Here's a great example of media queries in action - just click at the top of the page and watch the site resize images on-the-fly. Pretty cool!

Retrofitting Responsive
You have a website you’re happy with, but just want it to be mobile friendly? Absolutely doable, but be prepared to engage in a meaningful discovery process and make some compromises. Depending on the current design and structure of the website, this could be straightforward, or could require some intensive cosmetic surgery. It all depends on how your site’s HTML and CSS are written, and how well your site’s design lends itself to mobile layouts. The only way to find out is to audit your site’s existing code and discuss priorities and potential complications.

A word of caution with retrofitting: expect the unexpected. When you retrofit website code, there are usually unexpected surprises, and things may take longer than estimated. Choices about functionality that may have worked perfectly on a desktop also may turn out to be non-starters in a mobile environment. While retrofitting is not an ideal approach, it’s likely to be more cost-effective than remaking your entire site. So if you’re happy with your site’s design and have no user experience or CMS issues to address, retrofitting may be a good approach.

If I had only one piece of advice to give though, it would be that like any successful design and development engagement, planning thoroughly and thoughtfully for Responsive Design process early on is the best way to ensure fewer hiccups at the end of the project. It’s also the best way for your brand to deliver a great user experience to every audience, no matter where they are.

13 Simple Tips for Improving Your Web Design

1. Have a polished, professional logo--and link it to your home page. "Your logo is an important part of your brand, so make sure it's located prominently on your site," says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. "Use a high-resolution image and feature it in the upper left corner of each of your pages," she advises. "Also, it's a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it."

2.Use intuitive navigation. "Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site," says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide "secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar."

Why is intuitive navigation so important? "Confusing navigation layouts will result in people quitting a page rather than trying to figure it out," Gatti says. So instead of putting links to less important pages--that detract from your call to action or primary information--at the top of your home or landing pages, put "less important links or pieces of information at the bottom of a page in the footer."

3. Get rid of clutter. "It's very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options," explains Paolo Vidali, senior digital marketing strategist, DragonSearch, a digital marketing agency.

To keep visitors on your site, "make sure pages do not have competing calls to action or visual clutter [e.g., lots of graphics, photographs or animated gifs] that would draw the visitor's eyes away from the most important part of the page." To further keep clutter down on landing pages, "consider limiting the links and options in the header and footer to narrow the focus even further," he says.

4. Give visitors breathing room. "Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer," says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.

"Controlling white space through layout will keep users focused on the content and control user flow," adds Paul Novoa, founder and CEO at Novoa Media. "With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website."

5. Use color strategically. Using "a mostly neutral color palette can help your site project an elegant, clean and modern appearance," says Mark Hoben, the head of Web design at Egencia, the business travel division of the Expedia group, who is also a believer in using color wisely. "Employing small dashes of color--for headlines or key graphics--helps guide visitors to your most important content," he explains.

It is also important to use a color palette that complements your logo and is consistent with your other marketing materials.

6. Invest in good, professional photography. "Website visitors can sniff out generic photos in a second--and they'll be left with a generic impression of your company," warns Zane Schwarzlose, community relations director, Fahrenheit Marketing. "Your company isn't generic. So show your visitors that by investing in professional photography."

"We strongly recommend that our clients invest in professional photography or purchase professional stock photos," says Gatti. Good photographs "draw the eye, providing an emotional connection to the written content." Poor quality photographs or photographs that have nothing to do with your message, on the other hand, are worse than having no photographs.

Bonus photography tip: "If you want to draw attention to a particular piece of content or a signup button, include a photo of a person looking at the content," suggests Elie Khoury, cofounder and CEO of Woopra, which provides real-time customer and visitor analytics. "We are immediately drawn to faces of other humans--and when we see that face looking' at something, our eyes are instinctively drawn there as well."

7. Choose fonts that are easy to read across devices and browsers. When choosing fonts, keep in mind that people will be looking at your website not just on a laptop but on mobile devices. "Some large-scaled fonts may read well on [a computer monitor], but not scale or render well on mobile, losing the desired look and feel," explains Novoa. So he advises using a universal font.

8. Design every page as a landing page. "Most websites have a design that assumes a user enters through the home page and navigates into the site," says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. "The reality, though, is that the majority of visits for most sites begin on a page that is not the home page," he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.

9. Respect the fold. When asked for their top design tips, almost all the Web designers CIO.com queried immediately said: Put your call to action in the upper portion of your website, along with your phone number and/or email address (if you want customers to call or email you). Regarding home page images, "I recommend going against full-width sliders and encourage sliders or set images that cover two-thirds of the width allowing for a contact form to be above the fold," says Aaron Watters, director, Leadhub, a website design and SEO company.

10. Use responsive design--that automatically adapts to how the site is being viewed. "Rather than developing a site for each device, a responsive site is designed to adapt to the browser size," making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.

11. Forget Flash. "Thanks in part to the ongoing dispute between Adobe and Apple, the days of Flash as an Internet standard are slowly coming to a close, so why stay on the bandwagon when there are other options that are much more Web and user friendly?" asks Darrell Benatar, CEO of UserTesting.com. Instead, use HTML5, he says. "HTML5 is gaining more support on the Web, with search-engine friendly text and the ability to function on many of the popular mobile operating systems without requiring a plug-in. The same can't be said for Flash."

12. Don't forget about buttons "The 'Submit' or 'Send' button at the bottom of a Web form can be the ugliest part of a website," says Watters. So he encourages designers to make form submission buttons "so appealing visitors can't help themselves. They just have to click it." In addition, "when a visitor hovers over your submit button, it should change color, gradient, opacity or font treatment," he says.

13. Test your design. "Whether you are trying different placements for a call to action or even testing different shades of a color, website optimization can make a big impact to your bottom line," states Lindsey Marshall, production director, Red Clay Interactive, an Atlanta-based interactive marketing agency. "A user experience manager at Bing once remarked that Microsoft generated an additional $80 million in annual revenue just by testing and implementing a specific shade of blue!"
source:
http://www.cio.com/article/734408/13_Simple_Tips_for_Improving_Your_Web_Design?page=4&taxonomyId=600028

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/
 

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

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/