Archive for the ‘Code Logic’ Category

« Older Entries

Multiple languages for your website, how NOT to do it.

Saturday, January 19th, 2013

Here at Zoom Creates we’ve been asked a few times if we can set up websites in multiple languages. “Yes” is our answer, but it’s always quickly followed up by a question about the page content. We ask, “Who is going to translate your content into these other languages? Would you like us to provide you with a translator?” Often, we get asked about automatic translation services, such as Google Translate.

“Google Translate is amazing. It can translate from your native language into (currently) 64 other supported languages, but how are you going to error proof it?” See, when you translate your copy into another language, you are trusting that bi-lingual person or service to get it right. If they botch your translation, you could suffer from looking like a fool to all the people who read your website in the new language, or you could even insult them without knowing. How are you to know exactly what the site says unless you are fluent in that other language?

So when you put that little flag icon on your site that implies “You can read all our pages in Italian”, people who speak Italian could be upset when all of your grammar is wrong, and your syntax is a mess. Your best bet is to hire a copy writer that can help you speak directly to your target demographic. Below is a fun little video that is pretty far removed for a real world example, but is still worth watching. Take it away Fresh Prince!

Tags: , , , ,
Posted in Code Logic, Marketizing | 2 Comments »


How to find out if there’s analytics on your website?

Tuesday, January 15th, 2013

What is Analytics?
Analytics data captures a lot of telltale information about your site’s visitors like where they come from, what pages they viewed, and how long they stayed. This is useful information, especially if you are preparing to launch a new site, brand, or product.

Is there Google Analytics on my website?
Your web developer may have already set up analytics for your site. Most likely they will have used Google’s free reporting software: Google Analytics. In this post I will show you how to check if your web developer added Google Analytics and where you can go to add it to your site.

Good Software Developers

An image of our lead developer enjoying the fact that analytics is loaded on our clients websites.

How to find the analytics code snippet:
Open a new browser window and go to your website. Do you see the analytics? Of course you don’t –it’s in the code! You will have to find the code that the analytics references (if its there.) While your website is still open, follow the directions for your particular browser below. After you input the command, a new window will open with the source code of the website your website. It’s not that hard and you won’t mess anything up.

Directions to find browser source code:
Firefox:
Click “Web Developer” in the “Tools” menu, then click on “Page Source”

Google Chrome:
Click “Developer” in the “View” menu, then click on “View Source”

Safari:
Click “Preferences” in the “Safari” menu, choose “Advanced”
Click the checkbox “Show Develop menu in menu bar”, close window
Click “Show Page Source” in the “Develop” menu.

Internet Explorer:
Click “Source” in the “View” menu

Are you the Google Analytics code I’m looking for?
Development code is called a language for good reason. If you don’t know the language it can look like gibberish. If you have ever traveled abroad, you know that a few key phrases is all you need to travel in country. Our key phrase for this adventure will be “UA-”. This is a prefix for what Google calls the “Property ID”. UA stands for “Universal Analytics” number and Google uses this as a way of tracking most of your visitors interactions with your website. If you have Google Analytics hooked up to your website you will find this in the code.

Feel free to go line by line to find it but for folks who believe that time is money, use the “Find” command in the Source Code window. The easiest way to do this is by using a keyboard shortcut. For PCs use “Control+F” or for Macs use “Command+F”. Then type in “UA-” the “Find” text box without the quotes. You are looking for  this text of Google account prefix followed by six numbers, a dash and another set of additional number(s), the last set is usually just one number.

Google's Universal Analytics code

It’s a lot easier to find things when there is a huge red arrow pointing at it.

Yes I have analytics, wait no I don’t. What do i do?
If you see this number, than Google Analytics has been setup for you and you will need to ask your developer or webmaster for access to this account.

If there is no reference of this number in the code you probably don’t have it. There are other types of analytics software that a developer may have set up for you, but these are often times very expensive and the bill on your credit card statement would probably clue you in before you read this. It’s not hard to add Google Analytics to your website, but to set up tracking, you need to have access to the source code for your website. This will usually take a developer to help you out, an emotionally secure developer, like the ones we hire at Zoom Creates.
See first image above.

Tags: , , , , , , ,
Posted in Code Logic, Marketizing | 2 Comments »


Fun stuff with MODx output filters

Friday, November 9th, 2012

Here’s a quick tip about one of the great built in features with MODx. Let’s say that you have a few pages that need some different code in the header of a site. Maybe it is some custom CSS or Javascript. With MODx’s powerful output filters, you can do some pretty cool stuff that will make your like much easier.

Let’s say that you have a part in your template that looks like this:

1
2
3
4
5
6
7
8

<!DOCTYPE HTML>
<html lang='en'>
<head>
    <title>[[*pagetitle]] | [[++site_url]]</title>
    <meta charset="utf-8">
    <base href="[[++site_url]]" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>

This is a super basic HTML5 head area. There’s definitely some more meta tags we’d want in there, and I’m including the google hosted jQuery, but this will work for now. Anyway, we want to put in some CSS code in there that only gets applied on certain pages. Here’s one way to do that pretty simply:

First, let’s add that style block to your template.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML>
<html lang='en'>
<head>
    <title>[[*pagetitle]] | [[++site_url]]</title>
    <meta charset="utf-8">
    <base href="[[++site_url]]" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <style type='text/css'>
 
        [[*Inline Style]]
 
    </style>
</head>

Now we can add a Template Variable named “Inline Style” to the system. I like to use textareas for these kinds of things so that you have a little bit more room to type in your new CSS rules. Don’t forget to allow this template to access this Template Variable.

Each page using this template will now be able to have some custom CSS injected into the head, through the use of this Template Variable. Now, let’s say that you want to have a default bit of CSS in there to start with. Well, you can do that with the Output Filter “default”. It looks like this:

8
9
10
11
12

    <style type='text/css'>
 
        [[*Inline Style:default=`body { background-color: #f00; }` ]]
 
    </style>

So now each page will have this CSS by default, and you can override that default CSS by putting something into the Template Variable. Pretty cool, eh?

There are a ton of different output filters, so you can do things like addition, check for value, basic if/else logic, convert strings to dates, and more! Check out the docs, and have fun with your MODx coding!

Tags: , , , , ,
Posted in Code Logic | No Comments »


Breaking 960: Responsive Web Design for Wide Screens

Tuesday, August 28th, 2012

Responsive Web Design is taking over—resizing, adapting and shifting content so that each visitor gets an ideal viewing experience, regardless of what device they are using. Responsive web design is great for so many devices, from phones to tablets to laptops, but I’ve been noticing that the majority of responsive websites don’t adapt much beyond a 960 pixel width. W3Schools shows that 85% of visitors have a screen resolution higher than 1024, which gives us good reason to start paying more attention to the use and aesthetics beyond 960. Plus, if the whole point of responsive design is to be able to view content on any size of device, shouldn’t we also accommodate wide-width screens? The big question then is, how do we effectively design websites for those higher screen resolutions?

The Problem with 960
The 960 Grid System is based on a 960 pixel width using 12 or 16 columns and 20px gutters. The 960 has become a standard. I’m not going to deny that this system works great, it gives a perfect underlying structure to work with and divides nicely into a variety of column widths for easy use. But, I use a monitor that is 2560×1440 and when I open a standard 960 grid website, it floats in the middle of the browser with wide columns on either side, usually with some type of repeating color or photo that fills the background. On one hand, you’ve got to love the white space. It focuses your attention to the important content and gives a site A LOT of breathing room. But on the other hand, you have so much dead space, why not put it to use?

Breaking away from the standard 960 is tough, and requires a great amount of consideration to keep the site from looking overly cluttered and busy. If we go big, we’ve got to do it right. We shouldn’t just fill the page because we have the space, it needs to have purpose, still look visually appealing, and content should make sense as to not overwhelm the user.

Break it up
On first thought, the obvious answer is to let the text columns expand to fill the extra space. Wrong! If there are really wide columns of text it greatly reduces the readability. In The Elements of Typographic Style, Robert Bringhurst says that a good measure or line length is somewhere between 45 and 75 characters. Any longer than this and your viewer can have a hard time scanning back to find the start of your next line of text and cause misread lines of content. Breaking items into more columns of text may be the answer to utilizing the extra width.

Make it Larger
Next, you’ve got to get the size right. In most cases the larger your device, the further you sit away from it. Example: An average person sits about 18 inches from their laptop, but about 7 feet from their big screen. If you’re further away, the site will need larger text so a viewer can actually read it from a comfortable distance. Also consider a taller line height (more space between lines of text). A sufficient line height will allow the text to be more scannable.

Reorganize and Prioritize
Lastly, content will need to be reorganized for the larger layout. With so much width to play with, why not explore the placement of the content, displaying hidden content, or bringing in additional elements. Maybe the footer becomes a sidebar column or the horizontal navigation becomes another vertical column, allowing the rest of the content to be closer to the top. With all this additional content shown on the page, look out for information overload. The larger content area can make the page look cluttered. You should only be adding content that adds value to the page and still keeps it’s visual appeal. The page should still have strong hierarchy, including a good amount of white-space with elements scaled appropriately.

With the number of large screens growing, there is good reason to start pushing the boundaries and exploring ways to make use of wide-screen environments. To do this right, consideration has to be given to the added space. Elements need to be broken up so that they make most sense. Text and images should accommodate increased viewing distances. And content should be reorganized and prioritized so it remains visually appealing, but still lets users easily find the information they are looking for. With all these considerations in mind, we should be well on our way to creating successful wide-width responsive designs.

Tags: , , , , , , ,
Posted in Code Logic, Design Love | No Comments »


Mark up your markup with schema.org

Friday, July 20th, 2012

If you haven’t already heard about it, schema.org provides a method to give additional semantic meaning to your markup. One of the benefits to using microdata on your markup is the possibility of a rich snippet being displayed on a search engine’s results page.

Here is how an address could be marked up with HTML:

1941 NW Quimby St. Portland, OR

And the styles applied to it:

.address { font-weight: bold; }
.address em { font-style: normal; color: orange; }

Results in the following:

1941 NW Quimby St. Portland, OR

This is how microdata can be applied using the above example:

1941 NW Quimby St. Portland, OR

The idea here is nothing new. Microformats such has hCard and hRecipe have been around for some time. One of the things that sets schema.org apart from the others is wide variety of objects it supports. Read more information at schema.org to get started!

Tags: ,
Posted in Code Logic | No Comments »


Animation with HTML and JS

Tuesday, July 3rd, 2012

We used to do a lot of animation in house with Flash and Action Script 3. There were some great tools and libraries out there to help with the position of items and opacity and all that not-as-fun-stuff.

One of my favorite libraries for AS3 was TweenLite from GreenSock. It made moving objects around super easy, and it was super fasts too. Luckily, they reciently released their awesome libraries for JavaScript, so I took to the text editor and made a quick fourth of July animation. Check it out below, and the code is after the break…

(more…)

Tags: , , , , , ,
Posted in Code Logic | No Comments »


​The Web Diet

Tuesday, June 26th, 2012

The Web DietIn any diet you need to cut the fat in order to see results. After recently starting a new diet, I’ve realized that I’m no longer eating for taste, but eating for fuel. This means giving up the “fluff” that might taste great, but that also does nothing for my figure.

To get results, sometimes you just have to streamline and give the body what it needs to run at its highest efficiency. The same goes for your website. A healthy site cuts out excess. It should be the site you need, not necessarily the site you want. Remove the bulk and nourish it with stronger, leaner content, a thoughtful design, and a healthy organizational system. If you fueled with all of these “ingredients” it can thrive and achieve a look and feel that will appeal to your target audience.

Looking to get lean? Check out The Web Diet breakdown:

CONTENT:

  • Make it useful. Your content should be helpful and relevant to your audience or potential customer. Always consider your customers’ goals and what they are looking for.
  • Say it well. Make sure your site contains well written, credible, and original content. If you’re not a great copywriter, hire a professional. Keep information updated and fresh to give your audience a reason to come back.
  • Make sure it’s accurate. Use good grammar and spelling, duh!
  • Keep it short. To draw in your visitors, keep your text to a minimum. People have short attention spans—they skim and want to get to pertinent information quickly.
  • Give a call to action. Let users know what to do next—buy, contact, email, or sign-up. Help them make their next decision and get them to do what you want to them to.

DESIGN:

  • Give a good visual impression. You would dress up for an interview, so do the same with your site. First impressions are important, so put your best foot forward and create a design that is clean and visually appealing.
  • Set the tone. The visual appearance of your site will give your audience clues to the type of experience they can expect. White and clean could signal professional and credible, while colorful and textural could read unique and creative. Make sure your tone is in line with your business goals and your audience needs.
  • Design to your audience. Your look and feel should speak to your target audience. Choose photos and graphics that add visual appeal and makes sense for your viewer and your product or service.
  • Keep it simple. Your design should let viewers focus on your message. Let your message breathe with adequate white space. Your color, fonts and imagery should lead the user where you want them to go.
  • Make it readable. Make sure your text size and font is legible and has enough contrast for easy reading.

ORGANIZATION:

  • Logical Navigation. Put navigation where your audience would expect it—generally at the top of the page. Choose navigation language that is logical and makes the most sense for your viewer. Pages should have clear names so users can intuitively move through your site. Limit the number of items in your main navigation—aim for 5-7 links.
  • Create Hierarchy. Content should be arranged to make the most sense. Break information into sections or paragraphs. Group like elements and put information where users would expect to find it. Hierarchy allows viewers to easily scan and absorb your content.
  • Make it easy to find. Don’t bury key information in your site. Users should be able to get what they want within 3 clicks or less.

Diets aren’t always the easiest, but the results are worth it. Remember, don’t do something just because you can—cut out the bulk. Focus on what is most important to fuel your audience and make your site fit their needs. Relevant content, purposeful design and logical organization will keep your site thriving and keep viewers coming back.

Tags: , , , , , ,
Posted in Code Logic, Design Love, Marketizing | No Comments »


Fun with Trigonometry

Monday, May 14th, 2012

To find the direction from one object to another, we need to use some trig functions. First we need to know the positions of those objects. Then we can find the change in X and Y. From there we can find the distance between them and the angle from one to the other.

Here’s an example: Point A is located at coordinates (-10, -20), and Point B is located at (110, 70). To go from A to B is a change of (120, 90).

To find the angle from A to B, we use the arc-tangent function.

var distX = objectB.x - objectA.x;
var distY = objectB.y - objectA.y;
 
var angle_radians = Math.atan2(distY, distX);
var angle_degrees = radiansToDegrees( angle_radians );
function radiansToDegrees(r){
    return r * 180 / Math.PI;
}

In Javascript and ActionScript, the Math function atan2 will take y and x, and return the direction in radians. That means the returned value will be between -π and π. to convert radians to degrees, we multiply by 180 and divide by π. In this example, the angle is about 36.87°.

To find the distance between them, we use the Pythagorean theorem: a2 + b2 = c2, or:

var dist = Math.sqrt(distX * distX + distY * distY);

In this example, the distance is 150.

Now you can set the rotation of the first object to look at the second object. OK, but how do you move it forward at a constant rate? If you update its x and y position by 120 and 90, respectively, it would reach the goal in one step. Not much of an animation. Instead, give it a speed and use trigonometry to figure out the change in the x and y positions.

var speed = 6;
 
var deltaX = Math.cos(angle_radians) * speed;
var deltaY = Math.sin(angle_radians) * speed;
 
objectA.x += deltaX;
objectA.y += deltaY;

First we decide what speed to use. This is in pixels per frame. Each frame the object will move by 6 pixels in its forward direction. Then each frame, calculate the change in the x and y positions using the cosine and sine functions. This time we need to use radians, not degrees. These functions will return a value between -1 and 1. Now just multiply by the speed and apply it to the object.

To make the object turn smoothly, as in the example above, is a little more complicated, so I’ll save that for another time. But to give you a hint, it starts with a turning speed. You can see how it’s done in the attached FLA: trigTest.fla

Tags: , , , , ,
Posted in Code Logic | No Comments »


Beautiful, Dynamic Words with Aierbazzi, jQuery, and @font-face kit

Thursday, May 10th, 2012

Roberto Cecchi created and posted his Aierbazzi (which means “weeds”) font to his web site back in 2008. He has been experimenting with fonts creating illustrations in a simple format, and he has posted creative use of this font for non-commercial applications. The letters in the font are placed one above the other, layering and building a new shape. It’s an interesting concept, and I wanted to re-share it here.

Demo:
Enter a word or phrase in to the box below to see how the illustration begins to emerge. On load, the illustration shows what “ZoomCreates” looks like. Numbers and symbols won’t work, so you must only use upper and lowercase A-Z characters. Also, no spaces allowed.

:ZoomCreates

(more…)

Tags: , , , , , ,
Posted in Code Logic | No Comments »


Getting More from Mobile Sites

Tuesday, April 24th, 2012

Mobile sites are generally designed for the on-the-go user. With this user-type in mind, mobile sites can become overly paired down to just the basic details that a user might need, such as directions, a phone number, and social media links. Yes, a mobile user may most-likely be on-the-go, but I think the mobile audience is shifting. When I’m away from work, I use my phone as my primary method of surfing the web, meaning I’m not just using it on-the-go. It’s the main way I access the internet and I’m now expecting more than the most basic functionality from a mobile site.

Like most people with smartphones or other mobile devices, you can find me using mine everywhere. I’m on it while I’m at lunch, estate saleing on the weekends and definitely on the couch while “watching” TV. Since I’m using my phone as my second computer, I would hope that the mobile site would have the same functionality of a laptop or desktop, but optimized for my mobile device. A mobile site has to accommodate every user, if they are out and about, or just laying in bed before they turn off the lights.

Because of this common over simplification, I often find myself clicking on “view full site” taking me away from the mobile version of the page. I’ll get frustrated when information on a mobile site isn’t intuitive or if a site is so pared down that I can’t find the information I’m looking for. And once I move away from the site, the user experience deteriorates. I have to pinch and zoom to read any text or sit waiting for pages to load. The mobile site experience becomes a missed opportunity. A better experience causes increased engagement, more conversion and a good chance someone will walk away feeling positive about your company or product.

A mobile site should create a focused experience, not a limited experience. To do this:

1. Information needs to be highly prioritized. Present the content that will be most important to the user first. A mobile site should focus on prime information pages upfront, but let you dive deeper if needed. The content users interact with should be adjusted to suit the size of their site— the same information from the full site may need to be presented in a different order from the full site to make more sense for the mobile user.

2. Navigation should be simplified, minimizing the user options. The navigation needs to be clear and intuitive to the user so they can find exactly what they are looking for. If needed, pages should include sub navigation so the user can still access any meaty details.

3. Your site should be touch-friendly. Buttons or links need to be large and easy to hit with a thumb or finger tip, based off of standard finger sizes (Apple suggests 44 pixels) Not only should it be click-able, but it should be in an area it can be easily clicked—buttons shouldn’t be placed too closely together, or you risk taking the user to the wrong link.

4. Images should be limited. Reduce the number of images to limit loading times.

The ultimate goal in having a mobile is to create a platform that is adapted to a device’s size, but mainly to what the user needs. We need to think about what mobile users want when visiting a mobile site, if it is to get things quickly on-the-go, or if they are using it as their main computer. A mobile site should not be limiting, but focused to give the user a valuable and positive experience that keeps them coming back for more.

Tags: , , , , , , , , ,
Posted in Code Logic, Design Love | No Comments »


« Older Entries