Many developers are familiar with problems of making a perfectly standard website display properly in Internet Explorer 6 browser. Usually a development process would consist of testing the site in Firefox or another standard compliant browser. Then, after opening it up in IE6, one would need to figure out why in the world it’s not displaying properly; trying to adjust the HTML/CSS code or applying some IE6-specific hacks to the code that have been known to work.

In years past, the most difficult part was to try to explain to a client why one should not use IE6. You would be lucky to find a client who is somewhat technically sound and would listen to you. But most of the time, they don’t really know or care what “W3C standard compliance” means for them, or what a browser is, in the first place. Microsoft made a genius marketing decision by putting the word “Internet” in their browser name, and to most non-technical people “Internet Explorer” is Internet.

Most importantly, the clients cared that IE has been the most popular web browser, and thus could not be ignored. At the end of the day this just meant extra time and headache for web developers (some horror stories have people spending up to 30% of their development time on IE6 fixes and adjustments).

Google has recently announced that it is dropping support for the Internet Explorer 6 browser on March 13. If you visit youtube.com in the IE6 browser you will now see a big exclamation message in red: “Your browser will be unsupported soon. Please upgrade to a modern browser.”, along with links to a few browsers to upgrade to. This is following a previous announcement of Google Docs and other Apps dropping support for IE6 on March 1st.

In the recent years, since the release of IE7 and IE8 there has been a push from the internet community to at least make the public upgrade their Internet Explorer browsers (if not switch from IE altogether), which included even tricking the visitors to upgrade their browsers.

Over the last two years the usage of IE6 has been dwindling down. But it still consists of 10-20% of the web usage depending on which resource you trust. So recently the problem has been getting better, but once in a while you still run into a client who is using IE6 and it is usually not a pleasant discussion.

Since now the developers have upgraded, and test the site in IE8, most don’t even care about IE6 anymore, until they run into a client who is using one; at which point the discussion begins of why the client is seeing weird things, and then eventually leads to developers trying to convince the client to drop the IE6 requirement. Some, after having learned their lesson, are even putting ‘No IE6 support’ in the initial proposal, to insure that no extra time will be spent on it after the development is over.

One of the biggest users of IE6 (besides old people) are many company employees who do not have permissions to upgrade their browsers at their work. This is a job for their IT department, and often times an IT upgrade of any kind for a company means spending money. In this case one really needs to push the ‘non-security’ aspect of IE6 to an employee hoping that it will get to the top. After all, no company wants to deal with viruses or potential data leaks. There is a speculation that the most recent hacking of Google by Chinese Government came from the security vulnerability of IE6. Thus Google’s recent announcements to drop support for IE6, does not seem like a mere coincidence.

So how does YouTube’s dropping support for IE6 help you and your developers? Well for one, it should be easier for you to convince the clients (or your bosses) to forget about IE6 and upgrade, if they still use it. Google and many other huge websites dropping IE6 really makes it legitimate. Before, it was just your word against theirs. Now you can cite examples of other companies dropping IE6 with Google being the biggest of them all. Another good stat to share is to show them how the usage of IE6 has been decreasing over the recent years.

During these discussions it is also a good idea to mention that they should always try to upgrade their browsers (especially Internet Explorer) to newest versions to avoid being outdated. People usually upgrade the things in their daily lives often, such as cell phones, gadgets, and even cars. Why should a browser be any different. Educating them to stay away from Internet Explorer in general may also be a good idea. IE7 has some problems with CSS rendering, especially with CSS dropdown menus (although not as many problems as IE6). Also, the fact that none of the IE browsers support HTML5 or CSS3 functionalities, really makes out IE to be the big anchor holding back the innovation on the web. After all, developers cannot fully build websites with new HTML5 or CSS3, if IE doesn’t support them and people are still using IE.

55528 Commentshttp://www.10e20.com/blog/2010/02/25/youtube-puts-another-nail-in-the-coffin-of-ie6/YouTube+Puts+Another+Nail+in+the+Coffin+of+IE62010-02-25+20%3A41%3A38Victor+Murygin

Bookmark this post:

Dynamic features such as Variables and Functions in CSS have been a hot topic of debate for a while. On one hand, programming-oriented people have been begging for these to be included in the next CSS installments, while countless others are pointing out the difficulties of including these inside CSS rules themselves. One of the main arguments against the Variables use is that it will be much harder to learn and decipher other people’s CSS if developers start naming their own variables for everything.

However, I think languages like Sass make a great compromise. Sass is a higher level language floating above CSS that allows Variables, Mixins (aka functions) and more readable code, while spitting out regular CSS code in the front-end. Visitors to your site can still see regular CSS code, but you can organize it by using a higher level language like Sass on your end.

Here are some of the main ideas behind the Sass language:

table

  padding: 2px

  td.p

    text-align: left

#content

  font:

    family: serif

    size: 1.1em

  p

    line-height: 1.5em

This would generate the following CSS:

table {

 padding: 2px;

}

table td.p {

 text-align: left;

}

#content {

 font-family: serif;

 font-size: 1.1em;

}

#content p {

 line-height: 1.5em;

}

As you can see, the Sass version groups and nests elements for easier readability and less size.

Define Variables in the beginning, like this:

!fontColor = #333333

!padding = 8px

You can then use these variables going forward like this:

#content

  color = !fontColor

  padding = !padding

  p

    padding = !padding / 2

If you’re not familiar with variables in programming languages, the main advantage to using variables is to define them once in the beginning and then use them throughout the code. This is useful if you are using the same colors or spacing sizes over and over. Later down the line, it makes it easier to just change the value of the variable in the beginning, than to change 20 different CSS rules.

Also, as you can see in the above example, Sass allows you to use basic math functions for further customization.

Mixins are equivalent of functions in programming languages. While variables let you reuse one property at a time, mixins lets you reuse whole sections of the code at a time.

First, you define the mixins like this:

=tableDesign

  table

    th

      text-align: center

      font-weight: bold

    td

      text-align:left

      font-weight: normal

or even specify arguments:

=left(!space)

  float: left

  margin-right = !space

Then you can use mixins like this:

#content

  +tableDesign

  +left(5px)

This will produce the following CSS:

#content table th {

 text-align: center;

 font-weight: bold;

}

#content table td {

 text-align: left;

 font-weight: normal;

}

#content {

 float: left;

 margin-right: 5px;

}

Overall, Sass gives you a smaller, more readable code, as well as the power of reusing code with variables and mixins (something many developers have asked for) while at the same time spitting out regular CSS code in the end.

Now, there are still some issues of using these higher-level languages, and I just want to point a few things out.

1. Don’t use these languages unless you know how CSS works inside and out.

I wouldn’t advise for someone new to bypass CSS and just start with a higher level language like this. You should really know what goes on behind the scenes, similar to how Dreamweaver and other WYSIWYG tools can be detrimental if a person doesn’t know basic HTML or what goes on under the hood. However, if you know how to code HTML by hand and know how Dreamweaver works, you can use it to your advantage for HTML content formatting to save time. Similar rules apply here.

2. It may get slightly problematic if you’re sharing your work with other people.

If you’re a sole developer, you should have no problem using your own code. Even if you work within a team of developers, I believe Sass can be utilized for everyone’s benefit. Even though some may loathe the idea of learning yet another language, if you know CSS and basic concepts of variables and functions, this should take you about 5 minutes to pick up. If you’re not familiar with programming concepts of variables and functions, it may take 20-30 minutes but overall this should be easy to grasp for a developer.

The only way this may cause problems is if you’re sharing your work with other developers, or if you’re transferring your site to another developer outside of your team and they just don’t want to deal with anything new.

3. While Sass seems to be a relatively supported language, beware of others that may be more buggy.

As far as I know, Sass seems to work just fine. However, there are many other dynamic languages and implementations out there without any standards or support. It’s important to do your research and beware of buggy platforms. You want to use these languages to simplify your life. If the platform itself is buggy (i.e., generates wrong CSS code at times), there is no point of using it, as it will cost you more time and headaches.

Other Platforms and Examples

Sass runs on Ruby. I don’t believe they have made it to work on PHP yet, but here are some other dynamic CSS implementation examples:

• xCSS framework – This is an object-oriented CSS framework that runs on PHP5 and has limited overhead.
• “Supercharge Your CSS with PHP” tutorial – Even though I’m not too crazy on this one, as it does not make the readability better, you can basically use PHP to dynamically write to CSS.
• Variables in CSS – Here’s another way to introduce variables in CSS via PHP. I find it better for readability than the above example. Although this one still doesn’t have the Nesting or Mixins ability like Sass. It is also developed by one person without any community support.

Who knows, perhaps in the future Variables and Functions will become part of the next CSS standards. But for now, these higher level languages can be useful in the right hands.

If you have any other good dynamic CSS implementations, please feel free to share!

51003 Commentshttp://www.10e20.com/blog/2010/01/27/reviewing-sass-a-dynamic-css-language/Reviewing+Sass%2C+a+Dynamic+CSS+Language2010-01-27+17%3A56%3A24Victor+Murygin

Bookmark this post:

We recently completed our website redesign and relaunch, which is always an exciting moment! Many factors come into play when the idea of a redesign is on the table, besides making it aesthetically cleaner and functionally smarter. Why redesign? What was not working with the existing layout? What is working? How can it be better?

Let’s take a look at the old layout. The width was optimized for the least common denominator monitor size/resolution. The button to access the 10e20 Blog was not included and separate from the main navigation, making it harder to find. The fancy stock photos looked a bit cheesy.

Initial visibility
It is nearly impossible to design a website to look exactly the same in every browser, computer platform and screen resolution. Fewer than half a percent of users still have 640×480 (I jack mine up to 1280×1024); however, we wanted to extend the existing layout’s width and optimize for 1024×768 monitor resolution. The page’s initial visibility is then optimized for this and has most of the important content above the fold.

Scrolling is always a key consideration and we opted to have no horizontal scrolling and allow the content to extend vertically down the page.

We wanted to add some motion to the page. Something that could be changed easily and as often as we wanted. This animation would freshen up the design and add a little flavor as it aged. Flash is the best option for this and when used correctly Flash can be both effective and visually appealing.

Page Readability
The homepage uses a basic two column grid that makes reading the text easy. The interior pages keep this format with a right hand sidebar.

Page Aesthetics
All the elements line up and have enough white space to allow the eye to flow from one section to the next. Another problem with our previous layout design was the blog and how it was not uniformly designed to work with the rest of the layout. Now we combined the two seamlessly — the only difference in the layouts is that the content in the right hand sidebar changes to be more blog relevant.

Add a Favicon
The little icon that you see at the top of a browser window and in your bookmarks list are Favicons. This is a subtle way in building the brand on a website. When a visitor sees one it can be a strong indicator that they are in the right place. Here we took the ‘e’ that is in the 10e20 logo and used that as a favicon.

Social Media
A Twitter feed was added to the bottom section beside our latest blog posts. This feed shows specific tweets that mention 10e20 directly. Above this feed is 10e20’s latest tweet from Charlie.

So this brings us to the new layout design. Check it out below or just look around if you’re on it!

324914 Commentshttp://www.10e20.com/blog/2009/08/11/re-launching-a-website-from-a-designers-perspective/Re-Launching+a+Website+from+a+Designer%27s+Perspective2009-08-11+21%3A14%3A05Patrick+Winfield

Bookmark this post:

Flash websites have been the fear of SEOs since the inception. Many of us have to constantly battle clients who want a pretty flash website and don’t want to understand the technical jibber jabber about why it’s not good for search engines. We try to explain as best as we can why “Flash sucks,” and why you should stick to HTML sites. But ultimately you can expect them to win with a simple argument: “But it looks so pretty.”

The truth is, there are some businesses that can benefit from a great visual presentation that a simple HTML site cannot give. If your niche is a high valued clientele, or you have a website that sells art or some other product that needs a great visual presentation, then getting a visually stunning site may be the priority. In the real world people do like pretty things that move.

There is a compromise that can be reached between Flash and SEO. The myth that anything flash is bad has to be broken. What is truly bad for SEO is a website that consists entirely of one Flash file. But if you’re a skillful developer who has SEO on his mind AND must meet the client’s demands for a visually stunning animated site, you can solve this by creating an HTML site and strategically integrating Flash files as well as aesthetic imagery into the site.

And if you already have an all Flash site, in most cases you can recreate the exact same thing with an HTML/Flash combination, and in others it would just take some design changes to achieve the goal.

Here are a few website examples that combine Flash and HTML into visually appealing sites that are also SEO-friendly.

The above are just a few examples of the techniques. They may not be appealing to all, but with a skillful designer/developer, the possibilities can be endless.

Here is a list of things to keep in mind for the developer, whether you’re creating a new HTML/Flash site or trying to fix the mistakes of the past by redoing an all-Flash website:

1. Create the navigation in HTML/CSS with real HTML URLs for each page (unlike in Flash where the whole website is on one page). There are plenty of free HTML/CSS navigational menus available on the web.
2. Have all the text in HTML/CSS on all pages (not within Flash files).
3. Place all the cool looking animations in Flash strategically throughout the HTML website so that it is seamlessly integrated with the rest of the site. Thus, instead of the whole website in one Flash file, you will have several Flash animations placed inside the HTML pages.
4. Use images and backgrounds creatively to visually fill in any disconnect between Flash and HTML. If you do this right, most of the casual users won’t be able to tell a difference nor will they care.
5. Javascript can also be used to move, hide or show navigation or sections of text, and many Flash sites use this technique. However, an important note here is that Javascript should ONLY be used to move the existing HTML sections. The text itself, as well as navigation and other links, should be in HTML so that they are visible in the source code (and thus read by search engines). If you hide the text and navigation within the Javascript, the search engines will not be able to read them and we are back at the same problem as we had with Flash.

Now, it may take a bit more time, and thus more budget to create separate Flash files, HTML and Javascript tricks. But if you’re a business that caters to high-end clientele and can afford it, the benefits should be greater than just an all-in-one Flash site.

After all, what’s the point of having the best looking site if nobody can find it?

312512 Commentshttp://www.10e20.com/blog/2009/07/31/integrating-flash-into-an-html-site-in-an-seo-friendly-way/Integrating+Flash+into+an+HTML+Site+in+an+SEO+Friendly+Way2009-07-31+18%3A21%3A31Victor+Murygin

Bookmark this post:

I get angry when I see companies buy pricey media such as print, television, radio or outdoor and they don’t take advantage to tie that media buy to the web in an effective way. What do I mean by this?

Take for example a large billboard on the side of the highway that has a message about a specific offer from a company, and the only web address displayed is the company’s main domain name eg, www.company.com I feel that this is a wasted advertising opportunity to have just your main domain name listed. Much in the same way Danielle pointed out when off-line link-bait is often not leveraged properly on-line, targeted messages, spaces, interactivity and landing pages should be created and matched on-line for off-line media buys.

I believe that every advertising buy should have a targeted message behind it and accordingly specific media creatives and goals to go along with it.

Recently I found a couple of examples of companies that are tying print and TV to web pretty well – Marathon Oil, Prudential, Fidelity, Chrysler and Burger King:

Marathon Oil print ad:

www.marathon.com/garyville

Prudential print ad:

www.prudential.com/retirementincome

Fidelity print ad:

www.fidelity.com/rolloverleader

Another company that’s doing it well from Television spots to the web is Chrysler with the Jeep brand. They have an interesting campaign which features singing animals having fun around the 2008 Jeep Liberty. The TV spot is very catchy and they use the web URL www.jeep.com/sessions to bring visitors into the site and have an interactive view of their Jeep Liberty. A truly great and targeted campaign.

A couple of reasons to have specific landing pages for these TV, print and off-line campaigns are as follows:

1. targeted messaging.
2. better interactivity and audience response.
3. higher conversion.
4. tighter tracking, analytics, and return on ad spend (ROAS) information.

When are some good times to use specific URL’s and landing pages for off-line advertising and marketing?

1. Trade show exhibitor – if you are spending thousands to go to a trade show and display as an Exhibitor, you want to make sure you can track and manage those leads. Create a specific landing page for booth visitors to follow up with your company and put that on your print at the show. For example, if I am a chemical company and I exhibit at a scientific show in Boston, why not create a campaign and page around www.chemicalcompany.com/bostontrade2008 and have targeted lead/follow up forms on that page so that you can channel and track leads. A special offer always works well.
2. New product launches – with a new product launching, take advantage of the internet’s great interactive media capability. Don’t just send the traffic to your company’s main homepage and let all the traffic from a targeted message be lost in the rest of your site.
3. PR campaigns – drive traffic to a specific message on your site and as above, leverage the web’s interactivity to track response from users.

In some cases a campaign is worth creating an entire micro-site. An example of this is Chrispin Porter + Bogusky’s creation of WhopperFreakout for Burger King.

When using off-line media, don’t be afraid to match the on-line component pound for pound. The results will astonish you, and your target audience will be that much more pleased and responsive!

Don’t forget to subscribe to the 10e20 RSS Feed!

14678 Commentshttp://www.10e20.com/blog/2008/01/30/leveraging-the-web-for-off-line-media-buys/Leveraging+the+Web+for+Off-line+Media+Buys2008-01-30+19%3A49%3A42Jake+Matthews

Bookmark this post:

Okay, you might not have had that two billion dollar idea, but that doesn’t mean you can’t partake in its features. APIs (Application Program Interfaces) allow programmers to access publicly available services from widely known services, which can make your “web 1.0″ (sorry about the moniker, folks) site more welcoming to users looking for something new.

The concept and utilization of APIs is simple. Many well-known sites share some portions of their site code so that you can experience similar functionality on your website without having to navigate to the original site. One of the most well-known APIs available is the Google Maps API, which allows you to embed Google Maps on your web page with just a little bit of code. Ever track a package on a website and see a Google Maps page showing your package’s progress as it travels from shipping facility to shipping facility? Didn’t it look cool to see Google Maps on that third-party website? That’s what you can do by unleashing the power of APIs.

APIs are available for just about any well-known online community or site today. Take a look at what’s available at your fingertips:

• YouTube
• Facebook
• Google APIs (includes Google Maps, AJAX Search, Google Calendar, Google Checkout, and others)
• del.icio.us
• Flickr
• Yahoo! Answers
• MediaWiki, which includes Wikipedia
• Netvibes

These are just some samples of APIs that you can reference for integration into your website application.

What does this mean for me? Let’s take a look at an example in one of our very own client websites, JohnnyJetAways.com. We combined Google Maps with the client’s vacation home system data, and the information can be plotted on a very familiar map, provided by Google, as seen in the screenshot below:

You don’t necessarily need a whole website overhaul if you already have an established site, so APIs make it much simpler and more fun for you and your users.

3793 Commentshttp://www.10e20.com/blog/2007/04/12/apis-an-easy-way-to-make-novel-websites-familiar-and-fun/APIs%3A+An+Easy+Way+to+Make+Novel+Websites+Familiar+and+Fun2007-04-12+15%3A19%3A37Tamar+Weinberg

Bookmark this post:

Part of my job is to take the vision of a client and translate it into a tangible website. In some cases it is an extension or an arm to their business (e-commerce website for an existing shop, enhancements to an existing website) in others it is the entire business.

When you’ve got your entire business, your future business, one that doesn’t exist yet but will exist as soon as I complete my work, in someone else’s hands – you’re going to be anxious. You’re going to do whatever you can to ensure that what you’ve planned is going to come out as you’ve planned it. I liken it to how one might feel when they’re building a house.

But would you tell your builder that you want rooms built without doors but with windows and fully expect them to listen and execute? Would you argue back and forth with said builder because you’ve watched a lot of TV shows or had a friend who built their own house?

When does your approval based process come back to bite you in the butt? At some point you’ve changed from an advisor and a partner in this project to a hired contractor.

And clients, how do you make what you want clear at the appropriate times? How do you know when to let go? My favorite posts on the blogs and forums I read are about the client / developer relationship.

I’ve put together these warning signs that somewhere along the way you’ve become a pair of hands. In some cases it can be right from the start of the project and small signs become glaring roadblocks once the project has started.

For those on the development side, how have you dealt with these types of clients? For the clients and those shopping for a web development or marketing company I think it’s important to understand what it is you are buying, and decide at some point to trust the company you are buying it from.

I’ve been there myself recently. In the beginning of the planning process for our wedding I became a nightmare client, a client that I would probably try to break up with. I know nothing about flowers but there I was drawing sketches to be followed. I had limited time to take away from work, but how hard could making a veil be, it’s a piece of fabric that will sit on my head right? I hired a coordinator and checked in with her constantly to make sure things were going the “right way”.

At some point I had to get a grip, concentrate on the big picture and let it go. Let the people I hired actually do their jobs. Trust that I did my research properly and focus on my responsibilities regarding the wedding. It was my wedding coordinator that finally gave it to me straight and let me know that I was risking sabotaging my own wedding. (That’s actually a lot more dramatic sounding than it was).

As a project manager (or the “coordinator” for the websites we build here), I’m glad I was able to take something away from that experience to apply to my work.

Here are some signs that you are no longer a contributor but are now a set of hands.

The client talks about how they helped build a website for their friend and things were done differently.

A little knowledge can be dangerous. After a few learning experiences, I’ve found that the best way to handle this type of thing is to find out exactly what was done on the previous project, what the role was, and then point out what the differences are between this project and the previous project. This will help the client to understand why things may not be going exactly as they did on the other site, and also allows the client to talk about their past experiences with the web.

The “do it yourselfer” who after a few layout revisions figures out how to use MS Paint and designs their own homepage.

Don’t get me wrong. If a client wants to design their layout then they should go for it (if they can provide the raw files and fonts). But it was included in the contract for a reason.

I’ve found that when a client is taking elements of the project into their own hands it is because there might be a problem with them expressing what modifications they would like to a graphic or logo. It’s helped me to push and try to have a deeper conversation with the client about what they are looking for.

Excessive use of the word “just”.

I always shudder when a client tells me they “just” want to make a certain change. To this client every thing you might do seems simple, and if they only had the time to read that book about web development they wouldn’t need you. This is the most challenging item on my list. What are some of your experiences with these types of clients? Clients, what have been your experiences with web development companies?

Number of questions you get asked, goes down in direct relation to the amount of commands you get.

At one point it was “What do you think about removing all content from the homepage and replacing it with a flash movie?” Now it’s “We’re going to remove all content from the homepage and replace it with a flash movie.” Now it’s up to you to determine whether or not the work is out of scope, how it will affect the overall timeframe, how it will affect the overall goals of the project, and since it was a command rather than a presented idea, the client has already made up their mind that this is a requirement.

Which leads me to the following:

An outside project manager is introduced to the account.

I find this always complicates things. The client is in the middle of the spec or design process and they get nervous about the decisions that have to be made. They hire someone; maybe it’s a friend, who has a website, to be the project manager on their side. You are told, “It’s just that I don’t have the time to focus on the project as much as I should” or “All this tech stuff is Greek to me. My friend here has a website so they will be able to give you what you need”.

This means that now the clients ideas are being communicated to an “expert” whose job it is to translate to us and the game of telephone gets bigger. In these cases I’ve found its best to require that the client be involved in all communications and calls with the new project manager.

In some cases it’s early enough to walk away when you see any of these issues cropping up. In other’s it can be too far into the project to walk away without at least trying to turn things around. What have you done in similar situations?

Don’t forget to subscribe to the 10e20 RSS Feed!

3826 Commentshttp://www.10e20.com/blog/2007/04/09/how-to-tell-when-you-are-simply-a-pair-of-hands-on-a-project/How+to+Tell+When+You+are+Simply+a+Pair+of+Hands+on+a+Project2007-04-09+15%3A02%3A13Danielle+Winfield

Bookmark this post: