~ just web development & e-commerce blog


5/20/09

8 Layout Solutions To Improve Your Designs

1. Sliders and Carousels

Sliders, also known as carousels, are an organized, interactive and quite smooth way to present information. Sliders are a popular technique because they’re very usable, and you can put a good amount of content into a fixed, compact area – without a slider this content has to be placed somewhere on the page and in many cases you may have no space for it and you may deliberately want to show some information only “on demand”. This helps the user to focus her attention on one content block at a time which is helpful and convenient. And this is exactly where sliders may come in handy.

Examples of Sliders

Thumbnails and icons in the navigation area
When designing a content slider or an image slideshow, it’s best to provide users with icons or thumbnails in the navigation area to offer a simple and intuitive navigation. Thumbnails and icons give the user some orientation, explaining where they currently are in the slideshow and what navigation options are available (e.g. a slideshow can have a horizontal or vertical navigation). Besides, the user can quickly select a particular page on the slider.

In the slider used on the Coda site you can see that there are tabs provided at the top of the slider. They create a sort of "slider/tab"-element mixed together. This is an excellent idea, because by just looking at the thumbnails, the user can easily find a page in the element. Also, the icons add a very strong, memorable and clear visual support. Apart from icons and labels you can also use image thumbnails or even numbers for the same purpose.

Screenshot

Slider is used for navigation in product items
Opposite to the example above, sliders can be used not only to display large chunks of information, but also to help users navigate through dozens or hundreds of available product items in a convenient way. For instance, SourceBits (see the image below) uses multiple sliders (a horizontal and a vertical one) that provide users with an appealing navigation through CD covers.

The slider has large circular buttons on each end to indicate how the navigation works. There are smooth transitions, so the slider looks quite attractive and is comfortable to use. Also, you’ll notice that the illustrations are nicely spaced out, so it is easier to click on individual icons and it is also well-organized. Each item also has a nice lightning hover-effect.

Screenshot

Vertical content sliders with large horizontal “clickbars”
Let’s take a look at the slider used on QuickSnapper. It is a very functional vertical slider that works perfectly in the layout. The slider holds a large amount of snapshot items. It is very well organized, and it is easy to find the items within the element. The best part of this slider are the buttons on the bottom and on top of it. They are extended to the entire width of the slider. The large buttons make it much easier to use the slider.

For instance, if you’ve picked one of the presented items and then decided to check further items, you can simply click on the large bar on the top or at the bottom to navigate. That’s convenient and user-friendly. Also, if you go to the site and try it out, you will notice that the buttons also have very nice :active- and :focus-effects, which looks nice and improves usability.

Screenshot

Slider Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

2. Tabbed Navigation Elements

Basically, tabbed navigation is a technique that is very similar to sliders. You can keep a large amount of data in a compact area that is much smaller than what you would normally need. Tabbed navigation is a common practice, and there a few different ways to carry it out. We’ll focus on the use of tabbed navigation elements within a page, instead of focusing on the use of tabs for main content navigation. A tabbed element obviously separates different content blocks, yet combines them into one area that only takes up a small amount of space.

Examples of Tab Elements

Distinctive backgrounds, large clickable areas, clear separation
The first example comes from the "Performance" section of the Mac Pro website, and is a perfect example of a well-constructed tab element. The labels on these tabs are readable, have a large clickable area, and have a good visual separation, so they look exactly as most users expect them to look like. Also, you can see that the currently opened tab has a background matching the background of the main contant area. The inactive tabs have a slightly darker background, and a drop shadow from the content block to add depth and dimension. That’s a very simple effect, yet a very effective one.

Screenshot

Clean tabs with separation of buttons
Here’s another good use of tabs to present the information in a compact manner. The way Atebits’s layout was constructed, there was not a huge amount of space for multiple sections of content. Therefore, they placed the three sections into tabs, so the layout remains very clean and organized. Again, the open tab takes on the background color of the main content area, while the inactive tabs have a darker grey background. Also, you will notice a nice separation between the tabs to further define each individual button. A slight bevel is used to cleanly separate the buttons.

Screenshot

Clean separation of the entire tab set
Fontcase has another nicely designed tab set with a strong modern look and feel. Although this design doesn’t have a separation between the unopen tabs, the open one has a clear border. Also, you can see that there is a border above and below the set of tabs. These tabs make use icons and white space to support the text, making the tabs easier to use.

Screenshot

Tab Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

3. Modal Windows

Modal windows, or floating windows, are an excellent way to present additional information that has no space in the page layout. In modal windows, you can present larger images, extra content, alerts/tips that the user will easily notice, videos, and more. When you put information in a modal window, you need to make it clear for your users how to close the window.

It is also important that a link, a thumbnail, an icon, or any other graphic element that triggers the modal window to open is strongly (and clearly) related to the content of the modal window. A similar icon, header or visual can help users to establish a connection between the original link and the opened window.

Examples of Modal Windows

Modal windows for logins and signups
The most common element where modal windows are used (apart from “traditional” media-files such as images, audio, video, screencasts etc.) are login- and signup-windows. When you use a floating window for a login/signup, you are saving a good amount of space on each page. Also, the user doesn’t have to load an entirely new page just to login. They can login on any page on the entire website without their current session being interrupted – of course, if the designer of the site made sure that the login- or signup-process can happen behind the scenes with Ajax.

Grooveshark uses a nice signup-window on each page throughout its web-site. Notice that the login-button in the signup-window does not open a new page, but replaces the sign-up form below with the login-form input fields (using the accordion-effect, see below). That’s very convenient and user-friendly.

Screenshot

Fade out the page or/and use a drop shadow
If you are going to be using a modal window, it is very important to fade out the page behind the window in some way. This could mean using a semi-transparent backdrop, a drop shadow, or both. By doing this, you are making two important design decisions. First, you are bringing the users focus toward the floating window and away from the page behind the window.

Also, you are adding more depth and separation between the window and page, to give the appearance the window is actually physically floating. In the screenshot below (KissMetrics) , you can see a login form contained within a floating window, and the page behind is faded out. By the way, notice, how well the cancel/sign in-buttons are visually designed, too. Beautiful design.

Screenshot

On RealMacSoftware a dropshadow is used behind the window instead of the entire page being faded out. This technique still works nicely by creating depth and separation.

Screenshot

Modal Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

4. Rollover Elements

A rollover element is another design element that is nowadays gaining on popularity, particularly in corporate web-sites, portfolios and product sites. The main idea behind the rollover element it that when users hover the mouse over some site element such as a button, the content in some other layout area is displayed automatically. Take a look at the examples below to get a better understanding of what exactly is meant.

Examples of Rollovers

Rollover tabs
Below you’ll find a screenshot of the Miro’s homepage where a large and very well-designed rollover element is used. This element is similar to a slider, yet it doesn’t use a button to slide through pages – the sliding takes place automatically.

Screenshot

Subtle rollover hover elements
TaoEffect is a brilliant example of a rollover element that present additional information in a very beautifully styled and clean layout (this effects was used on the Coda-site first, but we chose to use this example instead). The information is presented in a very user-friendly way; all you have to do is hover over the button.

If you visit the site, you can see that this rollover has some nice and soft animated transitions. The opening transition is a vertical wipe with a fade. Finally, you can see that the background is semi-transparent. There is also a highlighted border that adds a clear separation from the other content.

Screenshot

A content map with rollover elements
OneHub uses a rollover element for another effect. Similar to a map, the site page is split into a number of chunk with hints; when a visitors hovers over a hint, additional information is displayed automatically. This effect can be particularly useful for sites that are supposed to showcase product’s features or provide users with explanations or an introduction.

Screenshot

Rollover element integrated in a slideshow
Another interesting design approach is presented by SquaredEye – the carousel menu uses rollover effect on the trigger elements to let the users preview previous and next navigation item. In some situations this approach can be useful.

Screenshot

Tooltip/Hover Element Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

5. Progressive Layouts

A “progressive layout” is one way to describe a series of content chunks that are supposed to be displayed on a site in a specific order. This is a quite uncommon way to organize information, but it still can be seen on many sites. A progressive layout helps users to move through a long series of information easily.

Examples of Progressive Layouts

An entire site consists of progressive pages
The entire portfolio Sursly.com (shown below) is based on a progressive layout. You can see the "Go" button in the upper right corner of the page. Each page is accessed from the page before it. This progressive system of pages is a substitute for a navigation bar or menu. Of course, the main disadvantage of such layout is the simple fact that it is quite hard to navigate and rather serves the purpose of interactivity.

Although single pages in such layouts can be bookmarked (using the #-anchor), they make it impossible for random visitors to get a broader overview of available navigation options immediately. Besides, such layouts usually have only one “direction” of navigation – forward. It’s not good from the usability point of view.

Screenshot

Progressive Vertical Page
Danny Blackman (the example below) shows a portfolio that is constructed solely on a progressive layout of content. There are separate elements, all displayed vertically on a single page. An auto-scroll feature is provided to bring the users from element to element throughout the page. Again, no menu or main navigation is used, just buttons bringing the user from one element to the next, or back.

Screenshot

ScrollTo Script

  • ScrollTo - This is a JQuery plugin that can be used for vertical progressive layouts, like the one shown above.

6. Grids

No article about layouts would be complete without a mention of grids. Grids are often considered to be the fundamental part of any balanced, ordered and concise web layouts. Many designers consider them to offer the most effective way to communicate a large amount of information to the users. Grids can be used solely to display information, without the use of any other techniques. A good grid system will join all of the content of a page into one flowing layout, but still allow for readability and scannability of individual sections.

In the website below, you can see a very strict grid layout in use. There is only a page of content on the entire site, so this page has a good amount of information. However, the information is organized into a clean grid with two columns, creating a strict, strong and solid layout with the fair amount of spacing; the content is readable and scannable.

Screenshot

Using different backgrounds to separate sections of a grid
When making a grid, you may have a large amount of information in a very compact area. You need to make it clean and organized, but don’t have enough room for a good amount of (positive and negative) white space. Therefore, you can use different backgrounds for each sections of a grid. Instead of spacing between grid sections, you just need a small amount of padding, and it will still look nice. On Valleycreek.org (see the image below) you can see this very tactic being used to create a very well-constructed content layout. You can see that a very thin line is used to divide sections, but aside from that the color contrast provides a separation that is distinct enough.

Screenshot

Grid Generators, Templates, and Tools

7. Accordions

Accordion menus are based on the same concept as sliders and tabs: it takes a large amount of information and encapsulates it in a smaller area. Accordions are blocks organized in a vertical or horizontal manner such that once a tab is clicked, a content-block slides upon the other one – similar to an accordion, hence the name.

Examples of Accordions

Functionality and large clickable areas
Alex Cohaniuc uses a very well-designed and accordion menu. Keeping portfolio items in the accordion is reasonable because it keeps (unnecessary) details about each project hidden and displays them on demand. This accordion is well designed for several reasons. First, you will notice that the headers of each canvas a very large, making them easily clickable. Also, you can see that each header uses a triangle to symbolize whether the accordion tab is opened or not. Finally, in this design, the header of the current tab has a distinctive background color.

Screenshot

Horizontal content slider
Jason Reed uses the accordion to keep the content of the entire website on one single page. Instead of having the appearance of a totally out of place element, this accordion takes on the same styling and color as everything else on the page. In addition, this accordion is horizontal (although the navigation options have a vertical orientation). Also, take a look at the tabs. First, you will spot a significant amount of space between each of the tabs. These tabs, or headers, don’t have a separation like you saw it in the last screenshot, so a good amount of space was used to separate here instead. Also, large and readable labels are included in this accordion. These little details are important, because the user needs to know exactly what to expect in each tab.

Screenshot

Accordions containing images and information
Marius Roosendaal uses another excellent vertical accordion to “hold” portfolio images. Each content block is an image showcasing a work, same as before. However, this one includes textual labels for each image. You can see that a small button is used to show/hide these descriptions. You can also find a link to a larger, more in-depth view of the portfolio item. You can’t present huge amounts of information in an accordion this small, so it is always good practice to include a link to more information if possible.

Screenshot

Accordion Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

8. Mega-Drop-Down-Menus

Navigation doesn’t have to be a simple set of links; recently it is “reinvented” to present not only available navigation options, but also the hierarchy and structure of the site’s content. The so-called "Mega" drop-down menus are commonly seen in e-commerce or product layouts as a way to show detailed information about products. Menus such as these are a new trend, and are quickly catching on because they can instantly provide users with the information that they are looking for – without a single click, quite similar to the concept of a rollover element.

Examples of Mega-Drop-Down-Menus

A classic example for a mega drop-down menu is the Guide Index on Ruby On Rails Guide. The menu serves as a well-organized and nicely presented secondary navigation menu. Notice that on contrary to the menus presented above, this menu uses a “switcher” icon on the right hand side to trigger the drop-down menu at the bottom. Also notice a nice soft shadow that gives the menu depths and helps it stand out.

Screenshot

Multi-level menus with information
Porsche (shown below) is a perfect example of the technique explained above. Porsche’s homepage contains a multi-level menu that allows users to navigate to all of the cars manufactured by Porsche without a single click. On the third level, a window with information about the selected car can be found. The window contains an image, many links, and quick information about the car. Of course, the large content block is a large clickable area, hence all details and features can immediately be clicked. For a better understanding of the technique, click on the image below and visit the full page.

Screenshot

Search results displayed in a drop-down-list
A recent trend that is related to this technique is the tactic of including search results in a "drop-down" menu. This technique is used in the Media Temple Knowledge Base. Instead of using an entirely new page to show users the search results, designers chose to display results in a drop-down list, which updates while you type. However, take note of the fact that a link is provided to full search results on a page, which is not to be forgotten in such situations.

Screenshot

Providing extra information in drop-downs
Once again, on Gateway.com you can see a mega menu being used to show information about products, along with links. The products in this drop-down are very well-organized and the images are included to add visual support. This menu provides a bit of information too, such as the price listed for each computer. This helps the user pick products before viewing the page, because many potential customers are likely to be interested primarily in price – at least in the initial stage of the purchasing process. Mega menus such as this ultimately make navigation easier and offer a better way to present information that users are looking for.

Screenshot

Menu Scripts

Further Resources

You may be interested in the following related posts:


Source: http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/

Related Posts Plugin for WordPress, Blogger...
There was an error in this gadget

Followers

Follow by Email

Tags

Tips (218) News (216) Knowledges (150) Google (149) Web Development (46) Funny (44) Internet (39) eBay (34) SEO (28) Sweden (26) Free (23) Mobile Phones (23) Apple (22) Thailand Post (22) E-Commerce (21) Google AdSense (21) IT (21) Software (21) iPhone (21) ไปรษณีย์ไทย (21) Facebook (20) Jobs (20) Opensource (20) Android (19) Forward Mail (19) Google AdWords (19) ไปรษณีย์ (19) Microsoft Windows (18) IKEA (17) Microsoft Office (17) DTAC (16) Google Analytics (16) Google Apps (16) Ubuntu (16) Firefox (14) Microsoft (14) Phishing (14) Bangkok (13) Kasikorn Bank (13) Security (13) บทความดีๆ (13) Google Chrome (12) WordPress (12) Bank (11) Domain Name (11) Seminar (11) Gmail (10) Google Maps (10) Joomla (10) Scripts (10) Ads (9) Bangkok Bank (9) Coupon (9) Paypal (9) Twitter (9) Business (8) Doogle (8) Download (8) IKEA Bangkok (8) IKEA Thailand (8) Javascript (8) Linux (8) Thailand (8) Toyota (8) Web 2.0 (8) Website (8) World Cup 2010 (8) Yahoo (8) ASEAN (7) BTS (7) Books (7) CSS (7) E-Banking (7) Email (7) GoDaddy (7) Internet Banking (7) Olympic 2008 (7) Swedish (7) Youtube (7) ภาพลวงตา (7) 3G (6) AEC (6) AIS (6) Amazon (6) Google Logo (6) Google Translate (6) IKEA Bangna (6) Jaturamitr (6) Sigve Brekke (6) Technology (6) Telenor (6) bcc (6) ซิกเว่ เบรกเก้ (6) ซิคเว่ เบรคเก้ (6) Browsers (5) Doodle (5) Education (5) Hotmail (5) Joke (5) Kbank (5) Norway (5) Office (5) Social Media (5) Steve Jobs (5) Thai King (5) True Move (5) Web Standard (5) iPad (5) iPod (5) ประชาคม เศรษฐกิจอาเซียน (5) รถไฟฟ้าBTS (5) ABAC (4) Affiliates (4) Apps (4) DBD (4) EMS (4) English (4) Google Docs (4) Google Thailand (4) Happy New Year (4) Hi5 (4) Hybrid (4) IE (4) Information (4) Make Money (4) PHP (4) Panda (4) Payment (4) Photoshop (4) SMS (4) Skype (4) Social Network (4) TPS (4) jQuery (4) รถจดประกอบ (4) ลดน้ำหนัก (4) Ajax (3) Bicycle (3) Bike (3) Birthday (3) Blogger (3) Brands (3) Bualuang iBanking (3) Central (3) Certificate (3) China (3) Credit card (3) Design (3) Flood (3) Google Office (3) Groupon (3) HTML (3) Happy Birthday (3) Icon (3) Lazada (3) Leadership (3) Manufacturing Production System (3) Marketing (3) Mobile Banking (3) Monorail (3) Movie (3) Notebook (3) Online Payment (3) Prototype js (3) Search Engine (3) Slide (3) Sports (3) Toyota Production System (3) Training (3) Wifi (3) iPad2 (3) iPhone 5 (3) ค่าจอดรถ (3) น้ำท่วม (3) บัตรประชาชน (3) พม่า (3) ภาษี (3) รถคันแรก (3) ลดความอ้วน (3) ลดต้นขา (3) สวีเดน (3) หุ้น (3) เพื่อน (3) 1-2-CALL (2) 2012 (2) ATM (2) AdSense for domains (2) Airport (2) Amadeus (2) Angry Birds (2) April Fools (2) Bing (2) Black Friday (2) Blackberry (2) Blog (2) CEO (2) CMS (2) Canon (2) Christmas (2) Co-Creation (2) Coke (2) Condo (2) Cool (2) DOS (2) Dhamma (2) E-Business (2) Ebates (2) Evernote (2) Fashion (2) Fellowship (2) Flash (2) Freelance (2) Games (2) Go Online (2) Google Bar (2) Google Buzz (2) Google Chrome Thailand (2) Google Search (2) Google Wave (2) Google Zeitgeist (2) Google+ (2) Hack (2) Hostgator (2) IE6 (2) Instant WordPress (2) Jailbreak (2) K-Merchant on mobile (2) K-Payment Gateway (2) Kaizen (2) Khao Yai (2) King (2) King of Thailand (2) Krungsri (2) LINE (2) Language (2) Logispost (2) Logo (2) MBA (2) MRT (2) MSN (2) Mesothelioma (2) Microsoft Word (2) New Year (2) Outlook (2) PSD (2) Paul Octopus (2) PocketPC (2) Putty (2) QR Code (2) Rabbit Card (2) Ranking (2) Resume (2) SMEs (2) Sense-making (2) Settrade (2) Song (2) Spotify (2) Starbucks (2) Sticker (2) Suvarnabhumi (2) Templates (2) Thaksin (2) The Asbestos Test (2) The Golden Jubilee (2) Time (2) Top 10 (2) Toyota Prius (2) Usability (2) VISA (2) Video (2) Virus (2) VoIP (2) Volvo (2) Wallpaper (2) Web Hosting (2) Webinar (2) Wedding (2) WhatsApp (2) Windows 8 (2) WordPress Multisite (2) Zeitgeist (2) instagram (2) ขายบ้าน (2) ข้าวโอ๊ต (2) ความรัก (2) ตับอักเสบ (2) นาธาน (2) บัตรประชาชนหมดอายุ (2) บุตรบุญธรรม (2) รถไฟฟ้าบีทีเอส (2) วันหยุด (2) สาธุ (2) อันดับ (2) อาหารและเครื่องดื่ม (2) เขาใหญ่ (2) โฆษณา (2) โลจิสโพสต์ (2) ใบขับขี่ (2) "The world map of social networks" (1) #WeLoveKing (1) #jj_forum (1) +1 (1) 10100 (1) 11/11 (1) 18 มงกุฎ (1) 2bbit (1) 4G (1) 4shared (1) 8.9 Quake (1) 80s (1) ABTC (1) API (1) ASUS (1) AVOS (1) AWeber (1) AYF (1) Abbreviations (1) Abhisit (1) Adobe (1) Adobe CS3 Web Design - Workflow (1) Adsl (1) Agoda (1) Air Asia (1) Airport Link (1) Almería (1) Amazeballs (1) Amazing Thailand (1) Amit Singhal (1) AmitSinghal (1) Android 3.0 (1) AnyID (1) Appointment slots (1) Asbestos (1) Asia (1) Asian (1) Asian Martial Arts (1) Atari (1) Auctiva (1) Australia (1) Autopatcher (1) Ayutthaya (1) BIS (1) Bangchak Green Station (1) Bangkok Eye (1) Bangna (1) Bank Note (1) Bank of Thailand (1) Beer (1) Benchmarking (1) Bhuddism (1) Big Mac (1) Bloomberg (1) Blue Ocean (1) Bosch (1) Bridge (1) Brushes (1) Bryant Park (1) Bug (1) Bungkan (1) Burma (1) Business Intelligence (1) Button (1) CC (1) CC Salon (1) CDN (1) CERN (1) CN22 (1) Calendar (1) Call Center (1) Canon MP258 (1) Carl-Gustav Alexander Tartagni (1) Carlaches (1) Cars (1) Categorizing (1) Central Festival Eastville (1) Central World (1) Chat (1) Chillaxing (1) Chinese New Year (1) Chocolates (1) Christian (1) Chromebook (1) City Mart Supermarkets (1) Clock (1) CloudFlare (1) Coca-Cola (1) Coins (1) Commencement Address (1) Company (1) Company Slogans (1) Competition (1) Condom (1) Condom Holder (1) Connecting rod (1) Corporate Culture (1) Craigslist.org (1) Creative Commons (1) Cultural Intelligence (1) Cultural Research (1) Cultural differences (1) Cultural shock (1) Culture (1) Curfew (1) Cylinder block (1) Cylinder head (1) Cylinder liner (1) DBD Academy (1) DFP (1) Danone Activia Women Lead (1) Database (1) Daylight Saving Time (1) Delicious (1) Dell (1) Dell Vostro 5470 (1) Denmark (1) Desert flower (1) Diamond (1) Digital Camera (1) Digital Signage (1) Dinner (1) Dinosaur leg (1) Direct Deposit (1) Dog Lovers (1) Door mat (1) Doteasy (1) Download Statusbar (1) Dream (1) Dreamhost (1) Drive in Australia on Thai licence (1) Driver (1) Drivers (1) Driving Permit (1) DropBox. Box.net (1) Dubai (1) Dynabook (1) E-mail Marketing (1) E16 (1) E4 (1) EU (1) East vs West (1) Easter (1) Eating (1) Egg (1) Enom (1) Entrepreneur (1) Entrepreneurs (1) Error Code (1) Euro 2012 (1) Events (1) Evernote Food (1) Expensive Car Gallery (1) Export (1) Expressway (1) Ext JS (1) Eyelashes (1) FaceLook (1) Facebook Email (1) Facebook Keyboard Shortcuts (1) Facebook Video Calling (1) Fast Browser Search (1) Favicon (1) Female Entrepreneurs (1) Filename List (1) Filmjölk (1) Finnish (1) FireScope (1) Firebug (1) Flappy Bird (1) Flash Drive (1) Flash mob (1) Flintstones (1) Flixya (1) Flu (1) Followers (1) Font (1) Food (1) Foods (1) Football (1) Forex (1) Foursquare (1) Framework (1) Frenemy (1) Fried Ice-cream Recipe (1) Fuel Economy Label (1) Funny 3G Commercial (1) Futsal (1) GPS (1) Gasket (1) Geek (1) Gen Y (1) George C. Marshall (1) Gift (1) Gigtide (1) Goals (1) Gold (1) Google Caffeine (1) Google Calendar (1) Google Campus Ambassador (1) Google Chart (1) Google Cloud Connect (1) Google Data Center (1) Google Drive (1) Google Flights (1) Google Goggles (1) Google Instant (1) Google Latitude (1) Google Map Maker (1) Google Mobile (1) Google Offers (1) Google Project Glass (1) Google Search-based Keyword (1) Google Sites (1) Google Spreadsheets (1) Google Street View (1) Google Sync (1) Google Trader (1) Google Translator Toolkit (1) Google Trends (1) Google Voice (1) Google Wallet (1) Google Website Optimiser (1) Google's Easter Egg (1) Google's Zurich office (1) Google+ invite (1) Google-certified ad networks (1) Googley (1) Goonline.in.th (1) Graduate Programs (1) Great Places (1) Green (1) HDTV (1) HTML5 (1) Handwrite (1) Happy (1) Harddisk (1) Health (1) Hello (1) Helpdesk (1) Herika Fernanda (1) Hi-speed Train (1) Hide My WP (1) High and low context cultures/ communication (1) High and low context cultures/communication (1) High- and low-context cultures/communication (1) Home (1) Homeplus (1) Hostel (1) How to Sleep FREE in Bangkok (1) How will you be maintaining yourself financially while you are in Australia? (1) Hurricane Katrina (1) Hysteria (1) IA (1) ICT (1) IKEA Jobs (1) IMEI (1) Ice Skater (1) In-App Payments (1) India (1) Instant Pages (1) Interbrand (1) International Alphabet (1) Invest (1) Investment (1) Invoice (1) Isetan (1) Jack Welch (1) Japanese (1) Jawbone (1) Jike (1) Jonas Seidler (1) Jordgubbar (1) Junk mail (1) KTB (1) Kanelbullar (1) Kitty (1) Kiwi (1) Kleenex (1) Kopimism (1) Korea (1) Krating Poonpol (1) L'Arc~en~Ciel (1) LHC (1) LMFAO (1) LOVE AT FIRST FLIGHT (1) Languages (1) Laos (1) Laptop (1) Larry Page (1) Laws (1) Layout (1) Learning by doing (1) Legsie (1) Let It Snow (1) Life (1) Lifestyle (1) Lingon (1) LinkedIn (1) Links (1) Lively (1) LivingSocial (1) Local business center (1) London 2012 (1) Love Mosaic (1) Love instagram (1) Loy Krathong (1) Lub D (1) LubD (1) MP145 (1) MP258 (1) MV (1) Mac (1) Maestro Card (1) Managing Diversity in International Context (1) Managing across cultures (1) Manchester United's Thailand Message (1) Map Your Valentine (1) Marcom Trainee (1) Mark Zuckerberg (1) Martin Luther King Jr. (1) McDonald's (1) McDonalds (1) Media Temple (1) Mega Project (1) Mega Upload (1) Merry Christmas (1) Michael Jackson (1) Microsoft Download Manager (1) Middle age (1) Money (1) Moneybookers (1) Most Expensive Car in the World (1) Motorola (1) Multi Monitors (1) Multi-communicative (1) Multi-touch (1) Multitask Mode (1) Music Beta (1) MySQL (1) Myaing Hay Wun (1) Myanmar (1) NECTEC (1) Name Card (1) Nano break (1) Nawamin City Avenue (1) Nawamin Festival Walk (1) Nero (1) Nestle Joya Ice cream (1) Netscape (1) New Media (1) New Orleans (1) Newsweek (1) Nexus (1) Nielsen (1) Nike Plus (1) Nike+ (1) Ninja (1) North Korea leader (1) Nose Gel Dispenser (1) Nyponsoppa (1) OK (1) Oficio (1) Okay (1) Oktoberfest (1) One Day One Price (1) One-2-Call (1) Online Ads (1) Online Business (1) Orkut (1) PC (1) PCWorld (1) PMP (1) Page peel script (1) PageRank (1) Passport (1) Pasta (1) Path (1) Pattaya (1) PayPal Mobile (1) PaySbuy (1) Payment Gatewayม Verified by Visa (1) Pee mak dance (1) Philippines (1) Phone Remote Control (1) Photobomb (1) Piston (1) Piston Displacement (1) Place (1) Playa Case (1) Poem (1) Police (1) PopupPress (1) PopupPress - Popups with Slider & Lightbox for WP (1) Portable Wordpress (1) Present (1) Prinsesstårta (1) Printer (1) PromptPay (1) Prototype (1) QZone (1) Qingming (1) Queen (1) RE-CU (1) Rare Earth (1) Recall (1) Red Bull (1) Reindeer Rudolph the Red Nose (1) Review (1) Rich (1) Riddle (1) Roaming (1) RockMelt (1) Rooftop Bars (1) Router Default Password List (1) Royal Crown (1) Russia (1) Räkor (1) SCB (1) SCB Virtual Credit Card (1) SEX (1) SPS (1) SPSS (1) SQL (1) SQL Dump File Splitter (1) SQLDumpSplitter (1) SSD Host (1) SSD โฮส (1) SSH Command (1) SWIFT (1) Sabertooth filet (1) Salary (1) Samsung Galaxy Tab (1) Santika Pub (1) Scalado (1) Schengen (1) Screenshot (1) Selfie (1) Semlor (1) Sergey Brin (1) Server (1) Shaolin (1) Shopping Online (1) SiPH (1) Siam Paragon (1) Signature (1) Silence of Love (1) Simsimi (1) Singhal (1) Skrill (1) Slogans (1) Smartphone Ergonomics (1) Smoking Kid (1) Snow (1) Solar city (1) Sopa (1) Space (1) Sparkling Mineral Water (1) Spettekaka (1) Spinning (1) Spotify's competitor (1) Stanford (1) Statistics (1) Staycation (1) Stephenson (1) Stereotypes (1) Still Mineral Water (1) Stock (1) Strategy (1) Study (1) Subway (1) Sudoku (1) SugarSync (1) Supply Chain (1) Symbian (1) Symbols (1) Synaptics (1) TH Sarabun PSK (1) THITEE (1) TMB Bank (1) Tablet (1) Taiwan (1) Tarad (1) Taxi (1) Teach Parents Tech (1) TechHive (1) Tesco (1) Tesco Homeplus (1) Thai Airways (1) Thai Stars (1) Thai police (1) Thailand Eco Car First Car Show 2012 (1) Thaitrade (1) The ASEAN Way (1) The Best Spinner (1) The Best Spinner API (1) The Church of Kopimism (1) The Evolution of Search (1) The Kite Runner (1) The Mall (1) The Monkey Banana and Water Spray Experiment (1) The Social Network (1) Themes (1) Timeline (1) Tip (1) Top Ten Most Expensive Cars (1) TouchPad (1) Trailer (1) Trashion (1) Travel (1) Trojan (1) Tsunami (1) Twiends (1) Ultrabooks (1) Unblock Blocked Number (1) Under30CEOs (1) Unlock Code (1) VMware (1) Valentine (1) Valentine's Day (1) Valve (1) Valve cover (1) Varmrökt lax (1) Virtual Store (1) Virtual drive (1) VitaFresh (1) Vk (1) Vodafone (1) Vuvuzela (1) Waris Dirie (1) Waze (1) Web Analytics (1) Web Application (1) WebOn (1) Western Union (1) WhatsApp for iPad (1) WhatsPad (1) WiMP (1) Widget (1) Wikipedia (1) Windows Mobile (1) Wine Bridge Plus (1) Wonder Wheel (1) Woraphan (1) World Happiness Report (1) Worship Day (1) Wushu (1) XHTML (1) XML (1) Xbox (1) Yahoo Pipes (1) Yahoo mail (1) Yandex (1) Yangon (1) YouTube Instant (1) Young Entrepreneurs (1) Young Female Entrepreneurs (1) Za Cosmetic (1) Zebra Crossing (1) bitthailand (1) cheat (1) cheating (1) e-waste (1) earthquake (1) fastest car in the world (1) file (1) findpeopleonplus.com (1) goo.gl (1) hiybbprqag (1) iOS 5 (1) iTunes (1) iframe (1) indoswiftjobinproduction (1) japan (1) march 11 (1) mbrzxpgjys (1) most expensive car (1) most expensive car in the world 2011 (1) multitouch (1) okidoki (1) rename (1) search (1) siwapp (1) smtp (1) tabienrod (1) tokyo (1) windows (1) กทม. (1) กรมธนารักษ์ (1) กรมศุลกากร (1) กรมส่งเสริมการส่งออก (1) กระดาษทิชชู่ Kleenex (1) กระทรวง ICT (1) กระสอบทราย (1) กลิ่นปาก (1) กล้องวงจรปิด (1) การดื่มน้ำ (1) การทักทาย (1) การนอน (1) การสร้างแบรนด์ (1) การอ่าน (1) การเลือกตั้งนอกราชอาณาจักร (1) ก่อการร้าย (1) ก้านสูบ (1) ขงจื้อ (1) ขงเบ้ง (1) ขนตาปลอม (1) ขยะ (1) ขยะมีพิษ (1) ขยะอิเล็กทรอนิกส์ (1) ของขวัญ (1) ขับรถช่องขวา (1) ขายของ Online (1) ขายยาออนไลน์ (1) ขายส่ง (1) ขาเรียวสวย (1) ขาใหญ่ (1) ขี้ (1) ข้อคิดนักบริหาร (1) ข้าว (1) ครีมเทียม (1) ความจริงวันนี้ (1) ความหมายของการให้ของขวัญ (1) คางสองชั้น (1) คำพังเพย (1) คำพูด (1) คืนภาษี (1) คู่มือรับสถานการณ์น้ำท่วม (1) ค่าครองชีพ (1) ค่าไฟ (1) คําคม (1) จ.บึงกาฬ (1) จดทะเบียนบริษัท (1) จักรยาน (1) จั่นเจา (1) จีน (1) ชาญคอนเดค (1) ชานมไข่มุก (1) ชุดหมีกันน้ำ (1) ซิลิโคน (1) ซู ชิ หมิง (1) ซ่อมนาฬิกาโบราณ (1) ดราม่า (1) ดอทอะไร (1) ดารา (1) ดูแลรถ (1) ตกเครื่องจนตกหลุมรัก (1) ตัน ภาสกรนที (1) ตัวอย่างหนังสือรับรองการทำงานภาษาอังกฤษ (1) ตั้งค่า APN (1) ตั้งชื่อบริษัท (1) ตามรอยพระราชา (1) ต้อหิน (1) ถนน (1) ถมทะเล (1) ถ่าน (1) ทอง (1) ทองเค (1) ทะเบียนบ้านหาย (1) ทะเบียนรถ (1) ทางจักรยาน (1) ทางด่วน (1) ทางม้าลาย (1) ทำงานน้อย (1) ทำตาสองชั้น (1) ทำนายดวง (1) ทำบุญวันเกิด (1) ทีทำงาน (1) ที่ดิน (1) ท่องเที่ยว (1) ท่านผู้นำเกาหลีเหนือ (1) ธนบัตรใหม่ (1) ธนาคารกรุงเทพ (1) ธีรศิลป์ แดงดา (1) ธุรกิจ (1) นนทบุรี (1) นวัตกรรม (1) นังเมียโง่ (1) นามบัตร (1) นาฬิกา Royal Crown (1) นิทรรศการ (1) นิวออร์ลีนส์ (1) น้ำอัดลม (1) น้ำแร่ที่มีฟอง (1) น้ำแร่ไม่มีฟอง (1) บทขออโหสิกรรม (1) บทขออโหสิกรรมเเละอฐิษฐานจิต (1) บทอฐิษฐานจิต (1) บราใต้ผิว (1) บัตร APEC (1) บัตรประชาชนหาย (1) บางบัวทอง (1) บีทีเอส (1) บึงกาฬ (1) บ้านน้ำไม่ท่วม (1) บ้านร้อน (1) ประกันสังคม (1) ประหยัดน้ำมัน (1) ปริมาตรกระบอกสูบ (1) ปลอกสูบ (1) ปลาดอลลี (1) ปลูกคิ้วถาวร (1) ปะเก็น (1) ปัญหาเชาว์ (1) ปิยมหาราชการุณย์ (1) ปูอัด (1) ผลรวมดี (1) ผลไม้ (1) ผังเมือง (1) ผู้ชายเที่ยวกลางคื (1) ผู้นำ (1) ผู้ว่า กทม. (1) ผู้ว่ากทม. (1) ผ้าป่า (1) ฝรั่งเศส (1) ฝาครอบวาล์ว (1) ฝาสูบ (1) พ.ร.บ.จราจร (1) พระสังฆราช (1) พระเจ้าทันใจ (1) พันธมิตร (1) พาสปอร์ตรถยนต์ (1) พิธีการศุลกากรไปรษณีย์ (1) ภาษีพาณิชย์อิเล็กทรอนิกส์ (1) มอมเหล้า (1) มะเร็ง (1) มีคุณภาพการศึกษา (1) มือของแม่ (1) มุ้ย (1) ยายกินลำไยน้ำลายยายไหลย้อย (1) ยุโรป (1) รถหาย (1) รถไฟฟ้าBTSเสีย (1) รถไฟฟ้าบีทีเอสเสีย (1) รถไฟฟ้าสายสีเขียว (1) รวมคำถวายกฐิน (1) ระบบสัญญาณกันขโมย (1) ระหว่างประเทศ (1) รัฐบาลสวีเดน (1) รูดอล์ฟ (1) ฤกษ์แต่งงาน (1) ลดต้นแขน (1) ลดพุง (1) ลดไขมัน (1) ลองใจ สามี (1) ลัดดาแลนด์ (1) ลาซาด้า (1) ลานเบียร์ (1) ลิขิตฟ้าชะตาดิน (1) ลุยน้ำท่วม (1) ลูกสูบ (1) วงล้อมหัศจรรย์ (1) วัดบวรนิเวศวิหาร (1) วันช้างไทย (1) วาล์ว (1) วิดพื้น (1) วิถีตัน (1) วิธีลดความอ้วน (1) วิธีลดต้นขา (1) วิธีลดต้นขาใหญ่ (1) วิธีลดหน้าท้อง (1) วิธีเช็คเบอร์ตัวเอง (1) วีซ่า (1) วีซ่าออสเตรเลีย (1) ศัลยกรรม (1) ศัลยกรรมที่เกาหลี (1) ศัลยกรรมน่องแบบเกาหลี (1) ศาลาเวลา (1) ศิริราช (1) ศิริราชใหม่ (1) ศูนย์ปฏิบัติธรรมวชิรญาณ 200 ปี (1) สถาบันผลิตนักธุรกิจอสังหาฯ (1) สบู่เห็ดยามาบูชิทาเกะ (1) สวดมนต์ข้ามปี (1) สวมแหวน (1) สวมแหวนเสริมดวง (1) สสว. (1) สัมภาษณ์งาน (1) สัมมนา (1) สามัคคี (1) สาวหล่อ (1) สำนวนไทย (1) สุขภาพ (1) สุภาษิต (1) สุริยุปราคา (1) สูตรสำเร็จในชีวิต (1) หญิงหล่อ (1) หนีตามกาลิเลโอ (1) หมู่บ้านมิตรประชาเพลส (1) หยุดราชการ (1) หลินปิง (1) หิมะ (1) ห้องทำงาน (1) อกสวย (1) อกหัก (1) อนุโมทนา (1) อริยะ (1) อริยะ พนมยงค์ (1) ออสเตรเลีย (1) อันดับโรงเรียน (1) อาคารภูมิสิริมังคลานุสรณ์ (1) อายัดบัตร (1) ฮวงจุ้ย (1) ฮวงจุ้ยห้องน้ำ (1) ฮิสทีเรีย (1) เกมนกบินลอดท่อ (1) เกษตร-บางใหญ่ (1) เขื่อนคลองท่าด่าน (1) เคน ภูภูมิ (1) เครื่องซักผ้า (1) เงินบำนาญชราภาพ (1) เงินเดือน (1) เงินได้พึงประเมิน (1) เชงเม้ง (1) เชื้อรา (1) เช็งเม้ง (1) เซาะกราว (1) เซ็นทรัลเฟสติวัล อีสวิลล์ (1) เติมวัน (1) เตียงนอน (1) เตือนภัย (1) เทพกรีก (1) เนียน (1) เบอร์มงคล (1) เพชร (1) เพลง (1) เพลาข้อเหวี่ยงม Crank shaft (1) เพิ่มวัน (1) เมนูอาหารคุมน้ำหนัก (1) เมืองใหม่ (1) เรนเดียร์ (1) เรื่องย่อ (1) เรื่องเหลือเชื่อ (1) เว็บบิส (1) เศรษฐกิจ (1) เศรษฐกิจถดถอย (1) เสื้อสูบ (1) เสื้อเชิ้ต (1) เสื้อแดง (1) เหล็กดัด (1) เอี๊ยมกันน้ำ (1) เฮอริเคน แคทรีนา (1) แก้ว พงษ์ประยูร (1) แก้สระลอย (1) แขนใหญ่ (1) แบตเตอรี่ (1) แบรนด์ (1) แยกขยะ (1) โครงการบ้านหนังสืออัจฉริยะ (1) โฆษณากูเกิลโครม ประเทศไทย (1) โฆษณาไทยประกันชีวิต (1) โต๊ะทำงาน (1) โต๊ะเก็บเงิน (1) โฝวกวงซัน (1) โฟร์แชร์ (1) โรคขาดผู้ชายไม่ได้ (1) โรงพยาบาลจุฬาลงกรณ์ (1) โรงเรียน (1) โรงเรียนดีมีคุณภาพ (1) โรงเรียนที่ค่าเทอมแพงที่สุดในประเทศไทย (1) ในหลวง (1) ใบ CN22 (1) ใบขับขี่หมดอายุ (1) ไขมันใต้คาง (1) ไข่ (1) ไข่เจียว (1) ไข่ไก่ (1) ไข้หวัดหมู (1) ไทย (1) ไปษณีย์ไทย (1) ไม่ได้ใส่ถุง (1) ไอศกรีมทอด (1)