Sites of the Week: Colibri IO, Pixelapse, Tickspot and more

Sites of the Week: Colibri IO, Pixelapse, Tickspot and more

This week are full of colorful websites showing their cool and amazing services. My special mention is for Colibri IO and Cloud306! Check out these sites and the whole selection, share with us what you think and stay tuned for the next week!

Take a look on all the other sites we’re featuring today. Also you can keep sending me your suggestions via Twitter twitter.com/FabianoMe and include #abdz_sites in the message.

DESIGN / CSS

cloud306 – cloud306.com

The Fastest Path to Private Cloud. Make the most of your own compute resources.

cloud306

Colibri IO – colibri.io

Get more Customers from Blogs, Social Media and Search Engines.

Colibri IO

APP / WEB APP / SERVICE

Tickspot – tickspot.com

Track Time. Hit Budgets. Repeat. Simple time tracking software that helps you hit your budgets.

Tickspot

Pixelapse – pixelapse.com

Version control designed around you. Every design iteration is automatically backed up as you work. No complicated interface. No commands to learn. Just save.

Pixelapse

COMMUNITY / PORTAL / STORE / EVENT

Teamgeek@Workteamgeek.co.za

We’re a team of digital experts that get their kicks from using tech to make people fall in love with your brand.

Teamgeek@Work

The Illinois School of Architecture – arch.illinois.edu

The Illinois School of Architecture is one of the oldest and largest schools of architecture in the country.

The Illinois School of Architecture

STUDIO / PORTFOLIO / BLOG

Designeat – designeat.com

Designeat is a small world of two – Marta and Bojan. Always creating stuff, constantly improving… Ux.Design.Development.Print.Illustration

Designeat

Poolhouse – poolhousedigital.com

Poolhouse is an independent digital agency hell-bent on crafting the best ad campaigns for candidates, causes and companies.

Poolhouse

THEMES / KITS

Nerdy – themeforest.net

Showcasing your work has never been easier. You can show wide width images and videos within a slider, stacked or even via a lightbox. On top of that, you control whether the content goes above or below your work. With this theme it really is all about the work.

Nerdy

Swatch – themeforest.net

Swatch is a flat, super configurable and fully responsive WordPress Theme. Swatch takes the new “Flat Design” philosophy and puts you in control of how the theme can look as much as possible.

Swatch

Posted in Blog | Comments Off on Sites of the Week: Colibri IO, Pixelapse, Tickspot and more

The essential ingredients for perfect parallax UX

thumbnailWith so many web technologies, platforms and programming languages, web designers and developers are still searching for new opportunities to engage visitors and turn them into regular clients.

There are all sorts of options for engaging users, but one of the most popular is parallax scrolling. Parallax scrolling uses a script to move elements on a webpage at different rates, creating the impression of depth.

If you like forced perspective photography you will probably like Parallax scrolling websites too. The effect can produce very heavy sites, but used properly it does create a spectacular and engaging visual effect.

The weight of parallax sites

The first obstacle when considering a parallax website is their large file size and the resulting increase in page load time. This is because you’re typically loading far more on a single page than you normally would.

The more you load, the heavier the page. For this reason parallax sites are best suited to situations when the user is willing to wait a little longer for information.

 

Parallax and SEO

If you stay informed about industry news you probably know that search engines (especially Google) regularly toughen their requirements for on-page optimization. The process of searching for information becomes more user-friendly but it doesn’t always coincide with site owners’ plans and abilities.

Currently, if you prefer one-page Parallax scrolling website you’ll have to optimize it for only one keyword. At the same time regular websites can optimize each page for a separate keyword/phrase. Consequently thoughtful separation of the home page can be quite effective, but you need to ensure that the content you’re designing for is promotable under a very narrow range of keywords.

 

Mobile parallax

You can’t escape the mobile web any longer, and that’s as true for parallax sites as any other. If you choose to use a parallax effect, you need to ensure that you’re translating the effect to mobiles properly.

Fortunately there are plenty of different libraries and scripts that help display pages with Parallax scrolling on mobile devices in a native way, some of my favourites are iScroll 4, Zynga Scroller, Stellar.js, and Scrollability.

 

Parallax scrolling and UX

Parallax sites are extremely engaging and do a great job of reducing a site’s bounce rate — but that only happens if you keep the the size down and ensure that the effect works correctly on mobiles.

Parallax sites allow us to tell stories, and those stories are a great way to engage visitors. Below we’ve gathered together some of the best examples of parallax sites, all of which have avoided the pitfalls above to successfully deploy their projects.

Michelle Lana

The essential ingredients for perfect parallax UX

 

Every Last Drop

The essential ingredients for perfect parallax UX

 

FK Agency

The essential ingredients for perfect parallax UX

 

Wild Life

The essential ingredients for perfect parallax UX

 

KitKat

The essential ingredients for perfect parallax UX

 

Von Dutch

The essential ingredients for perfect parallax UX

 

CR-V Honda

The essential ingredients for perfect parallax UX

 

Sonia Rykiel

The essential ingredients for perfect parallax UX

 

Atlantis World’s Fair

The essential ingredients for perfect parallax UX

 

Activate Drinks

The essential ingredients for perfect parallax UX

 

Soundscape

The essential ingredients for perfect parallax UX  

Tokio Lab

The essential ingredients for perfect parallax UX

 

Head To Heart

The essential ingredients for perfect parallax UX

 

Cosmo

The essential ingredients for perfect parallax UX

 

Geze Bewegt

The essential ingredients for perfect parallax UX

 

Cultural Solutions

The essential ingredients for perfect parallax UX

 

The White House Iraq timeline

The essential ingredients for perfect parallax UX

 

Atipics

The essential ingredients for perfect parallax UX

 

Bolia

The essential ingredients for perfect parallax UX

 

Bagigia

The essential ingredients for perfect parallax UX

 

Health Service Payouts

The essential ingredients for perfect parallax UX

 

Netlash bSeen

The essential ingredients for perfect parallax UX

 

Spotify

The essential ingredients for perfect parallax UX

 

Madwell

The essential ingredients for perfect parallax UX

 

Mario Cart Wii

The essential ingredients for perfect parallax UX

 

Zeus

The essential ingredients for perfect parallax UX

 

Soleir Noir 2012

The essential ingredients for perfect parallax UX

 

Drug Treatment

The essential ingredients for perfect parallax UX

 

NH Hotels

The essential ingredients for perfect parallax UX

 

Divine Write

The essential ingredients for perfect parallax UX

 

Spaziergang

The essential ingredients for perfect parallax UX

 

Vita Frute Cocktails

The essential ingredients for perfect parallax UX

 

Gjenfodt

The essential ingredients for perfect parallax UX

 

Have you created a parallax site? Which of these sites is your favorite? Let us know in the comments.

Polish-Inspired Pani Deco Font – only $15!
The essential ingredients for perfect parallax UX

Source

    

Posted in Blog | Comments Off on The essential ingredients for perfect parallax UX