I Say Potato Campaign Launch

Posted in Blog.

3qysk0

Today, Sutherland Weston launched a new campaign for the Maine Potato Board, “I Say Potato“, coinciding with the start of the harvest in Aroostook County, to get consumers informed of the many uses of Maine Potatoes.

I Say Potato WebsiteAs part of the talented team at Sutherland Weston, I helped to develop the campaign’s website at www.saypotato.com.

This campaign included the joint efforts of many talented people, and is showing up in many forms — print, video and web.

My particular role in the project was to take the design the team came up with and build it into a functioning website, using our in-house-developed content management system, Webbit.

A new video spot also debuted today, promoting the I Say Potato campaign. Check it out below.

Follow the campaign on Twitter at @SayPotato, or on Facebook to keep up to date as this fun campaign unfolds.

CSS Loading Icons

Posted in Experiments.

CSS Loading Icons · CodePen

Played around at lunchtime with some different styles for CSS-based animated loading icons. For each of these I used one HTML element and added some CSS keyframe animation to get them moving.

This has only been tested in Google Chrome. It should work to a certain extent in Firefox, and probably not at all in Internet Explorer.

Check out the Codepen example after the break, or check it out on Codepen:

Edit 1: Codepen crashed just as I posted this, so be patient… it’ll come back!
Edit 2: Codepen is back up. Enjoy.

CSS-Based Animated Accordion

Posted in Experiments.

CSS Based Animated Accordion | CSSDeck

I was recently asked to publish a codecast on CSS Deck. CSS Deck’s Codecasts are realtime playbacks of the coding of an example, so you can follow along and see how a piece comes together.

I decided to show off a CSS-based animated accordion I designed for Get Around Maine. This example only uses CSS to create an interactive accordion that expands as you hover over its slides.

Click here to view my first codecast, or check out the result below:

							    	

Playing around with CSS image filters and transforms

Posted in Experiments.

Today at lunch, I decided to play around with what CSS image filters and transformations can do. CSS filters will bring “Photoshop-like” styles to the web, easily editable and very interactive.

In this experiment, I tried making a basic image gallery example, playing around with simulating depth-of-field. Images that are not being hovered appear in the background, blurred out and grayed out a bit. When an image is hovered, it snaps to the front, in focus.

Right now this is Webkit-only, so only Chrome & Safari. Sorry Firefox & IE!
(Actually, I’m really not that sorry to IE…)

View the CodePen example below:

GoDaddy Goes Down & the Internet Goes Down With It

Posted in Blog.

GoDaddy goes down

Earlier today, internet supergiant GoDaddy got hit with a major attack by hacker @AnonymousOwn3r, claiming to be part of the hacktivist group Anonymous.

 

The attack, which apparently targeted GoDaddy’s DNS servers, caused potentially millions of websites to be inaccessible and, at the time of this writing, continues to do so.

@AnonymousOwn3r hasn’t claimed any motives behind the attack, but many believe has something to with GoDaddy’s former support of SOPA or their numerous other controversies.

Even if the motive behind the attack was some “noble cause”, it missed the target. Instead of just targeting the offender, GoDaddy, the attack caused damage to many other innocent websites, many of which rely on the internet for their business. And not only websites were taken down — GoDaddy-hosted email service went down with it, taking down other lines of communication for businesses and individuals.

Other Anonymous “members” have called out @AnonymousOwn3r for the attack, not wanting the group to be associated with it. (AnonymousOwn3r has made it clear the attack is an individual effort, not from the group)

 

Want to know why the “Dump GoDaddy Day” protest worked and got GoDaddy to reverse their stance on SOPA? Because it targeted GoDaddy and not their customers. Clients made it clear they were unhappy, many fled the service, and GoDaddy responded. Internet protests work — crude takedowns do not.

So what can be learned from all this?

Be careful working with a controversial company

Besides being a target because of their sheer size, GoDaddy has a history of controversial actions. This can make them a target for attacks, and today proved you can easily affected as an innocent bystander. Smaller hosts may provide a “safer harbor” and — added bonus — they tend to have terrific customer service!

Nobody is invincible

There’s a reason most web hosts guarantee 99% uptime — it’s impossible to promise 100%. Things can happen, from a massive DOS attack to someone tripping over a power cord. Or maybe, even just a giant storm.

Internet protests can work — massive takedowns will just piss people off

SOPA/PIPA got defeated because the internet banded together and showed what it would be like if the internet could be government censored. Netflix cancelled their plan of splitting the company and creating “Qwikster” because customers started canceling their service in protest. But denying access to millions of innocent websites doesn’t prove any points, it just makes you the target of anger.

By all means, protest GoDaddy. I’m not a fan myself. But protest the company, not their innocent clients.

 

In the meantime, need a quick way to check if a website you’re trying to access is really down? Is _____ down or is it just me? is a great free tool to check if your network is the problem or not. It even has a easy address to remember: isup.me/domain.com, where domain.com is the address you want to check.

Want to get away from GoDaddy, or looking to find a host? Give Site5 a try. Cheap, reliable hosting. (And it’s what this site is hosted on!)

Animated Coming Soon Page

Posted in Experiments.

Get Around Maine - Coming Soon

A while back, I needed to create a “coming soon” page for a client, Get Around Maine. Their domain was active and they had started promoting the website a bit, but the full website was still in development.

I put together a basic style to match their website, but then decided it needed something more — it needed to be animated.

Using some simple CSS keyframe animations, I got the collage background to scroll back and forth and the rays of light behind the logo to rotate slowly.

I felt that this added just a little something extra for visitors with modern browsers. Everyone else still gets a good looking landing page, without the animation.

The animation should work in most versions of Chrome, Firefox and Safari, as well as in IE10+.

Click through to view this example & its source code.

Skyrim-Inspired Drop Down Menu Experiment

Posted in Experiments.

Skyrim-inspired Drop Down Menu

Anyone who has played the popular video game Skyrim has seen their unique flyout menu system. I decided to attempt to recreate a similar style for the web.

With the exception of the background image, the entire experiment is CSS-based. I used some radial gradients, pseudo elements, and CSS transforms to achieve the effect.

Click through to view the experiment, with source code included.

Page Curl Box Shadow Experiment

Posted in Experiments.

Page Curl Box Shadow

I’ve seen this effect done plenty of times using images, so I set out to create the “page curl” shadow effect using only CSS. I like the depth it creates, giving the illusion that the corners of the box are slightly lifting off the page.

To achieve the effect, I used the :before and :after pseudo-elements to create the shadows and eliminate the need for extra markup. I then applied a box shadow and transform to them, and positioned them as needed.

I created several variations, with shadows on both sides, one side only, and the top & bottom of one side to show various effects.

As an extra measure, I added a linear-gradient to each box to give it some “shading” on the side that is supposedly lifting off the page.

I think this is simple, but effective way to add some depth to your designs. This effect should work in IE9+, with the linear gradient working in IE10+

View Example
(more…)

Pixleight Designs – New & Improved

Posted in Blog.

I decided the time was right to upgrade my portfolio website.

Formerly CV Designs, Pixleight Designs will be a source of my work examples, web design & development experiments, and thoughts & critiques on web design.

Visit my portfolio for examples of my work in web design & development.