Aerial Perspective Blog

Scooby-Doobey Doo... CSS?

noreply@blogger.com (Tim Avery) — Thu, 11 Feb 2010 02:53:00 +0000

Found this code why I was poking around on the net... So I had a little fun with it:

Overstock.com Groundhog Day Logo

noreply@blogger.com (Tim Avery) — Tue, 02 Feb 2010 16:59:00 +0000

I was asked to throw this together the evening before Groundhog's Day. Just a little animated gif. Check it out:

If you missed the animation, click on the image above to see it again!

This was a last minute decision by the Overstock.com Marketing executives to celebrate Groundhog Day. I do enjoy playing with the logo a little bit. Check out my portfolio to see some of my previous holiday logos.

jQuery jShare-it Plugin Preview

noreply@blogger.com (Tim Avery) — Mon, 01 Feb 2010 04:13:00 +0000

I was planning on releasing an updated 2.0 version of my original "j-ShareIt" plugin tonight. The new version "jShare-it" came out of the box at about 1/2 the size of the original in a slick new interface, with a nice combination of jQuery and CSS to make the widget highly customizable. The app is basically a version of the AddThis sharing widget, but cuts out their analytics and calls to 3rd party servers. The best part however, is the ability to make it look however you want. The out of the box version comes as a drop-down with large 64 pixel icons and 12 popular social media outlets. Take a look:

With a simple find and replace in the CSS the color scheme can be changed in a second:

The CSS is CSS3 but does degrade smoothly in IE6 and IE7 (mostly removing rounded corners). The actual script works in everything: IE6+, Firefox 3+, Chrome, 4+ and Safari 3+.

Using jQuery, when a user clicks on an icon for a social media outlet, the script attaches the post URL for the specific outlet, and then grabs the URL and title from the specific page the user is trying to share (using the encodeURIComponent variable).

var url = encodeURIComponent(self.location.href);
var title = encodeURIComponent($("title:first").html());

Just like AddThis it populates title and URL fields in the posting section of the said outlets. It's quite simple but there really aren't any good jQuery based widgets out there. Everything is sign up and go. With this free standing widget you have the control to do what you want with the code.

In the near future I will be adding more outlets, probably the top 25 or 30 in all, and develop a more compact version with small icons and text as opposed to the larger version. The big thing would be URL shortening integrated with bit.ly. I don't think it's out of the question, just a matter of coming up with a JSON call to bit.ly that returns the URL variable back to the script. We'll see what I can do.

In any event, like I said at the start, I was planning on releasing tonight, but the script I integrated for a smooth dropdown, had some issues, namely it conflicted with jquery.cycle in testing, which is a problem. There is no reason that it should interfere with any scripts. This week I am going to rework the script to something more standard and highly tested. I guess the actual release will have to wait a week!

Ikea... Dropdown Menu oops!

noreply@blogger.com (Tim Avery) — Mon, 25 Jan 2010 23:18:00 +0000

Ikea made a pretty big oops on their United Kingdom site today. On their homepage, somebody scheduled a large flash mod, but didn't set the wmode correctly. They used a variable in their embed tag I haven't seen used before, flashvars="wmode=transparent", when they should have just done wmode="transparent". This is still surprisingly a common mistake on sites that combine flash elements with good ol' html, css and javascript. Unfortunately, there is no way to fix this by assigning z-indexes to the holder for the flash element and the navigation, the flash must have the wmode set to transparent.

Click Image above to view larger

Here is their source code:

<div id="flashcontent_used" class="firstFlashContent" style="">
 <embed 
     width="900" 
     height="370" 
     flashvars="wmode=transparent"  <- The Rogue code
     quality="high" 
     bgcolor="#ffffff" 
     name="sultan_nlp" 
     id="sultan_nlp" 
     style="" 
     src="/ms/en_GB/flash/homepage/sultan_new_lower_price.swf" 
     type="application/x-shockwave-flash"
  />
</div>

Remove that line and add wmode="transparent" and everything would work kosher.

Click Image above to view larger

This is why edits edits edits (check out the blog post) are so important!

jQuery 1.4 Released Today

noreply@blogger.com (Tim Avery) — Thu, 14 Jan 2010 22:21:00 +0000

Today the jQuery team released the latest and greatest version of the most versatile javascript library on the planet. Cutting to the cahse, you can read about it here:

http://jquery14.com/day-01/jquery-14

There were a number of changes and upgrades, including the inclusion of sizzle.js into the new version (I'll talk about sizzle in a later post). I heard someone today complaining about jQuery saying it was "lazy" to use a library and not write your own .js from scratch (a "flash" guy... I think he is afraid jQuery is more useful than Flash--well it is..). Yes good idea, let me sit down and write something as good as jQuery form scratch to use for my projects or any. Let's be honest, the gusy who created jQuery are some of if not the best. If you think you can do better than them than go for it. You will be at it for weeks, if not months and years, and by the time you think you have something, they will be continuing moving forward with their kick-ass library.

Using a library like jQuery has NOTHING to do with laziness, and everything to do with being efficient and productive. Somebody else has done the ground work, created a code base, and made it publicly available to use. This is a god-sent in this industry and I applaud and thank the guys at jQuery for the work they have done. So to the point here it is, the latest minified version

http://code.jquery.com/jquery-1.4.min.js

Additionally, Google has provided a copy of jQuery hosted on their servers. This copy of jQuery is automatically minified and gzipped – and served from Google’s fast edge cache servers.

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

Include the above URL directly into your site and you will get the full performance benefits of a quickly-loading jQuery.

That's it for today. Grab the latest copy of jQuery and make some amazing stuff happen on the web.

Smashing Magazine Likes My Design.. Sort of

noreply@blogger.com (Tim Avery) — Wed, 13 Jan 2010 18:36:00 +0000

Checking out Smashing Magazine today, the company I currently work for, Overstock.com got a nod in terms of usability, intuitiveness, and simplicity. I like to think I had a hand in at least the third item, after all, I did the final design for the homepage and header, and have come up with a number of "swiss-style" improvements across the site.

Smashing said,

"Other online retailers should aspire to its virtues: a concern for the needs of the consumer, intuitive and effective tools and a clean crisp layout."

Combined Screenshots from the article

There were some negative comments, however, I haven't been involved in the actual product pages or search and navigation pages in terms of design and layout, so I haven't been able to have any influence there. Oh well

Read the entire article by clicking here

Combing YUI and CSS Tools reset.css

noreply@blogger.com (Tim Avery) — Tue, 12 Jan 2010 07:14:00 +0000

The Reset stylesheet is used to reduce browser inconsistencies in things like default line-heights, margins, padding, font-sizes, etc. These styles are intentionally very generic and are based off the "CSS Tools reset.css" and the "Yahoo YUI reset.css" files, which can be found below:

CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/

Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css

Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.

/* Version 1.0 Aerial Perspective combined YUI and CSS Tools reset.css*/
/** 01/11/10**/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; color:#000000; }

table { border-collapse:collapse; border-spacing:0; }

body { line-height:1; }

fieldset, img { border:0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup {  font-style:inherit; font-weight:inherit; }

ins { text-decoration:none; }
del { text-decoration:line-through; }

ol, ul { list-style:none; }
li { list-style:none; }

caption, th { text-align:left; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }

abbr, acronym { border:0; font-variant:normal; }

sup { vertical-align:baseline; }

sub { vertical-align:baseline; }

/* remember to define focus styles! */
:focus { outline:0; }

/*because legend doesn't inherit in IE */
legend { color:#000; }

input, button, textarea, select, optgroup, option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }

/*@purpose To enable resizing for IE @branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size:100%; }

Download a copy without having to copy and paste by clicking below:
my combined version of reset.css

Edits, Edits, Edits...

noreply@blogger.com (Tim Avery) — Mon, 11 Jan 2010 22:39:00 +0000

Now by no means am I a spelling expert, grammar aficionado, or professor emeritus of the English language--but I like to think that most of the time I am on top of spelling when it comes to putting things into production on the web (just don't read my past blog posts, they are filled with my lack of edits). At least when it comes to major items, like large banners, headings, or images with text on them. Basically, anything that gets special attention from users will usually get special attention from an editor. In my case the editor is my girlfriend. She is a member of the grammar and spelling police and usually catches all my mistakes before they make me look like a moron. With that said it is one of my biggest pet peeves to see major mistakes of the spelling nature online. Take for instance this large ad from a major online retailer I came across this morning (you don't have to be a genius to guess who, but I won't divulge that information up-front)--I for one am excited about the "Vancuver" Olympics... What about you?

I for one am excited for the 2010 "Vancuver" Olympic Games

Now in this case I don't feel all that bad to point out the flaw. I mean this is a pretty big mistake. I actually can't compare it to anything else, because I don't think I have seen anything this blatant. Nothing at least in recent memory. The point is, everyone should have an edits process, whether a one man operation, or a billion dollar a year company. Don't just create something and push it out the door. Create something and check it yourself, then have someone else check it, and if you are really concerned have a third person. It doesn't matter if its a copywriter, or your mother-in-law.

Real designers Use Papyrus Shirt

noreply@blogger.com (Tim Avery) — Fri, 08 Jan 2010 22:27:00 +0000

I don't use this blog all that often, but I came up with this today as part of an ongoing joke at work about Papyrus and what a "useful" and "wonderful" font it is. I figured it was worthy of a post. I guess I need to start posting here more often since I started using my other blogs.

AP Site Redesigned

noreply@blogger.com (Tim Avery) — Mon, 07 Sep 2009 22:27:00 +0000

Spent Labor Day weekend working on re-skinning the Aerial Perspective site. I am going away from the business version of the site, and moving towards more of an informational site. The center piece being the blog, and a minimalistic look and feel. I got rid of most of the links at the top of the page and have went with a tabbed version, so for the most part, the entire site is hosted on one page. The tabs are simple: Blog, Portfolio, About and Contact. I haven't really figured out what I am going to put in them yet, but it should come shortly.

The site was built with a pretty basic system. I used a modified 960 gridder layout, along with jQuery, a modified version of jQuery Tabs, and of course the base HTML and CSS. I stuck with a green color, but it much brighter than the old site, and I incorporated more of a black and white color scheme than before.

More to come in the next couple weeks.

Our very own "Share This" like the AddThis Widget - Preview

noreply@blogger.com (Tim Avery) — Wed, 13 May 2009 17:39:00 +0000

We are currently developing our own "Share This" widget like the popular Add This Widget that you find all over the web. We were asked to develop this because the "Add This" widget pulls analytic information to addthis.com. With our widget the analytics information is yours and yours only! This is highly customizable and works in all the testing we have done for it. We are still working out how the final skin will look and what the "Share This" button will look like, but otherwise, it's pretty much there!

Here is a sneak peak:

As you can see the widget is powered via jquery--a script library that is seemingly endless. I put this together using a tutorial and information provided by Mark S. Kolich from http://mark.kolich.com. (That links to the actual post about the widget). We have styled even our basic design up just a little from his, but the programming side and info he provided was the key to making this work! So thank you Mark for the work you did--in the end it helped us develop a cool tool!

Our final version with code for a free download will be made available in the coming weeks, so keep your eyes peeled for it!

Linking Communities Project

noreply@blogger.com (Tim Avery) — Thu, 09 Apr 2009 06:31:00 +0000

Several months ago, we posted about a possible project for the Great Salt Lake Bird Festival. We took a risk and did a pre-mockup hoping to catch them with something spiffy before they even had talked with us. Initially it looked good and we had a verbal go-ahead. Unfortunately, things didn't pan out for several reasons, and we were left scratching our heads. Perhaps the only good to come of the whole ordeal was another client, with a new project, Linking Communites, Wetlands and Migratory Birds. We hopped at the chance to work with the group, and after several months working out the details we have our first mockup ready to go. Take a look:

We went ultra clean, mostly on a grid layout sticking to a simple sans-serif font set. The colors are derived from a sky blue and the rust off the head of a bird called an American Avocet. We even worked out a simple logo. Not sure if they have one at this point, but we like our vision:

We added a light version of grass green, pulling in the 3 colors that best represent the planet, and linking them via a bird silhouette breaking up a simple box.

Hopefully, the client will be pleased with this work, and we can move on to designing the page layouts. We will be using the jquery library for most of the interactive portions of the site, and Coppermine Photo Gallery, along with Blogger for the blog. And of course, we will try to push the use of Twitter for quick updates any time from anywhere. Check back soon to see what other new projects we are working on!

Citizen Blues Launches!

noreply@blogger.com (Tim Avery) — Wed, 04 Mar 2009 04:22:00 +0000

Check out http://www.citizenblues.com, where you can find killer deals on jeans, one at a time. We designed the User Interface for the site, and Sam Hart developed the ODAT program that is the real brain-work behind the site. The official launch is right about now. So check out the site, maybe pick up a pair of jeans and see what else comes form the guys at Citizen Blues in the future!

One Deal at a Time

noreply@blogger.com (Tim Avery) — Sun, 08 Feb 2009 17:21:00 +0000

One of our latest projects and one that we have high hopes for, was the design of an ODAT (one deal at a time) site for a new and on the rise company called Citizen Blues. We won't go into the specifics of what they will be selling, although the image below hints at it. We can tell you that the site should officially launch in the 2nd half of February.

After we completed our designs and coding, we handed the templates off to a brilliant developer named Sam Hart to take care of programming the actual inner workings of the site. He has developed his own ODAT programming and will be building it into the wireframes we developed, to bring the site to life. Here is a screen shot of the work we did:

Our initial design was actually blue as opposed to the silver, but the client wanted to go for a slightly different look than we had envisioned for them. Building a brand is all about creating an identity that is unique, memorable and relates clients to your product, or more specifically your brand. We wish Citizen Blues the best in this endeavor and hope they have built a brand that will last and be very successful.

State of the Sam Blog Design

noreply@blogger.com (Tim Avery) — Mon, 19 Jan 2009 06:58:00 +0000

Our intern from last semester and transitioning project manager Sam, wanted to start a blog about politics. We couldn't bear letting her use one of the horrendous templates out there, so over the weekend we whipped together a template that fit her personality and threw it out on the web for her at http://stateofthesam.blogspot.com/.

Here is snapshot of the blog (click for larger version)...

This design is definitely not our typical style. We have been taking a more liberal and simple route lately to conform to what is "hot" in design, but felt that this would definitely stand out and wasn't to outrageous!

Do you need a a blog designed? Comment here or contact us using the contact tab and we can throw something together for you!

Help Us Help You!

noreply@blogger.com (Tim Avery) — Fri, 12 Dec 2008 06:44:00 +0000

Earlier this week our intern, soon to be project manager--Samantha, informed us that we had lost a potential client because they assumed we only did websites based on the packages listed on our services page. This is obviously a glitch on our part, and due to the fact that we are still pulling the site together, and some pieces aren't quite finished. The services page, being one that needs a lot of work.

So please, help us help you! If you have a question, use our contact form on either the homepage, http://www.theaerialperspective.com, or via the form on the contact page, and we will get back to you in a speedy manner! Being up front, we can tell you that our typical cost for design is $50/hour, while for programming, data mining, consulting, coding, etc, we charge $75/hour. We can also set up "custom" jobs if you have something specific that won't require a ton of work. We tend to be pretty easy going and can often work out a deal to help you... help us!

"And Here... We... Go.."

noreply@blogger.com (Tim Avery) — Mon, 01 Dec 2008 06:51:00 +0000

Heath Ledger as the Joker in the smash hit The Dark Knight said it best as he waged war on Gotham and our hero the Dark Knight, BATMAN! That's kind of how we feel tonight here at Aerial Perspective Web and graphic Design. Our official launch of the brand new site will be at 12:01am On December 1st, and be an exciting and we are sure interesting ride.

So check out the site, and let us know what you think, and what you need!

Almost There!

noreply@blogger.com (Tim Avery) — Thu, 27 Nov 2008 06:37:00 +0000

We're almost there. The new site homepage is basically finished and we are working on plugging in all the other portions of the site. It's pretty exciting around here to finally get this thing off the ground and fully functional!

Also, our fall intern Samantha Sargent, from the University of Utah, is going to continue with us into the spring semester as our Project Manager! Sam has done a great job promoting AP, and working as our initial contact for many clients. Thanks for your hard work Sam!

As a great man once said (quite recently), "Yes we can." And yes, we can get this ship afloat and on the way!

Direct Approach

noreply@blogger.com (Tim Avery) — Tue, 25 Nov 2008 08:44:00 +0000

A couple of weeks ago, we tried a direct approach to connect with the Great Salt Lake Bird Festival coordinator in hopes of snagging the bird fest as a new client. Their current site is a bit on the awkward and outdated side - http://www.greatsaltlakebirdfest.com - and in terms of overall usability it is a bit clunky. We went as far as to design and build a demo version of the homepage to try and show them what the possibilities were for their site. Currently there are numerous birding festivals around the nation, and all the websites promoting these events are for the most part, on the sad side. Below is a screen shot of what we came up with...

We wanted to give the bird fest folks a modern, sophisticated-yet-fun, and easy to use and navigate site. Thus far we haven't heard back from them and are wondering if the approach we used was a little to forward. In any event, we wanted to show some of the stuff we are working on right now and try to spread the word.

So if you run a bird festival and are looking to modernize... Let us know!

Over a year in the making!

noreply@blogger.com (Tim Avery) — Tue, 25 Nov 2008 08:29:00 +0000

When we started Aerial Perspective in August 2007 with a soft launch, we didn't expect to pick up clients at the pace that we would be just a year later. In August 2008 we launched a new site, but got caught up in a lot of projects and never finished what we had hoped would be a great site. Finally, after a few months and a little free time in between jobs, we have managed to throw together a new layout, and get the site up and running. Today we launched the new homepage with a built in blogger.com blog to keep updates flowing and talk about what we are working on.

Tomorrow we plan on hooking up the back-end for the rest of the site and get all the other portions up and working 100%. There is still a lot of work to come, but everything should take shape in the next week. So just over a year and three soft builds, it looks like theaerialperspective.com will be fully functional!

Check back soon and often to see whats new and what we have on our plates!