And now...IE9

by Justin 7/28/2010 11:58:00 AM

As you may have heard by now, Internet Explorer 9 is currently in development and is expected to be released sometime in 2011. Microsoft has added several new features with IE9, the most exciting of which are support of CSS3 and HTML5 technologies.

Though Internet Explorer is still the most widely used browser, it has steadily declined since Safari, Google Chrome, and Firefox have been quicker to support these newer technologies.

Now with IE9, Microsoft is playing catch up. For a casual user, IE9 will likely run faster, but most of the upgrades are behind the scenes. For developers, this opens up the world of CSS3 selectors, like border-radius and text-shadow, as ways to deliver great looking content without using "heavy" imagery.

Though any release of a more modern browser is generally good news, most web developers hope that with the development of IE9 we can begin to sunset the support of IE6. Here’s to hoping that the added features in IE9 will be compelling enough to the IE6 user to make them want to upgrade. Wait, didn’t we say that when IE7 and IE8 came out?

Until then, all we can do is hope to see IE6 users drop to the point where we won’t have to continue the full scale support of 4 Explorer versions, Firefox, Safari, and Google Chrome. At least this is another step further down the road for Microsoft.

FYI, you can download a trial version here: http://en.softonic.com/s/internet-explorer-9

 

Bookmark and Share

Tags:

Technical

New Google Web Fonts API

by Justin 6/14/2010 4:22:00 PM

The challenge of using fonts on the web is not a new one (we discussed it most recently after SXSWi). For years designers and developers have been using the same 15 fonts on the web, only able to implement non-web fonts with workarounds like Flash text, javascript and text in images. Now, that's beginning to change.

In May, Google announced the launch of the Google Fonts API, which allows developers to use a select number of web fonts in their pages. All the fonts in the Google Font Directory have open source licenses so they can be used on any website, from a private blog to a large commercial site.

You can check out the full list of fonts that are part of the Google Web Font API here: http://code.google.com/webfonts.

Bookmark and Share

Tags:

News

The Buzz about HTML5 and CSS3 (SXSW)

by Justin 3/25/2010 4:37:00 PM

There was a lot of buzz this year at SXSWi about HTML5 and CSS3. HTML, HyperText Markup Language, has been the standard language of the Web since its beginning. Versions of HTML4 have been used since 1997, so it's been a long time since we've gotten a major update to basic web language. CSS, Cascading Style Sheets, allows developers to style elements on a web page, making pages standard and friendly for viewers. With the innovations of HTML5 and CSS3, developers can make websites faster to run, easier to develop and nicer to view.

HTML5 has several new elements for developers to use including semantic replacements for common elements on a page like headers, navigation and footer blocks. Gaining the most steam was HTML5's support for <video> and <audio> tags. When developers want video and audio to play on a website, they almost always turn to Adobe Flash Player. HTML5 could eliminate the need for Flash in some circumstances, allowing pages to perform faster and still look and interact the same way.

CSS3 has a whole host of new ways to style web pages including adding web fonts, rounded corners, shadows, shading, and much more. These attributes mean developers will be less reliant on images, decreasing the amount of time it takes for a page to load.

As is often the case in web development, cool new technologies take some time to be implemented. Currently, HTML5 and CSS3 have the support of four of the five major browsers, the exception being Internet Explorer. Expected to be released in 2011, Internet Explorer 9 will support HTML5 and CSS3, however, until large numbers of consumers upgrade to IE9 or other modern browsers, it'll be awhile before a lot of these techniques can be used.

Here's a great page for visualizing how browsers are supporting HTML5 and CSS3. You'll instantly notice how current Internet Explorer options don't measure up. 

Bookmark and Share

Tags: , , ,

SXSWi | Design

Hot Topic: Web Fonts (SXSW)

by Justin 3/24/2010 4:02:00 PM

The ongoing web font battle was again a hot topic at SXSWi. Now that there is a way to implement web fonts by using CSS3 techniques (in Firefox, Safari, Google Chrome and Opera browsers), they are gaining even more steam in the industry.

The history of fonts on the Web is a brief one. There are currently only about 10 fonts supported on the Web; every website in the world with any HTML content is using at least one of them. So why do you see other fonts when browsing the Internet? To make websites more interesting, designers and developers put text in images or Flash, which can support any font imaginable. But, among the many drawbacks, text found in images/Flash isn’t searchable, selectable or scalable (an increasingly important factor with the emergence of mobile browsing).

You may be wondering why more fonts still aren’t commonplace online. The real crux is finding a way for font designers to sell their fonts, while preventing site visitors from downloading them illegally. If agreed on by the major browsers, it appears the solution is the WOFF format: developers will be able to purchase and use fonts on the Web, but the end user won’t be able to download them.

Using web fonts would be the beginning of a whole new world in browsing for web designers and site visitors alike. With the implementation of CSS3, we hope to see a standard font format that will make web fonts an active part of the online experience.

Bookmark and Share

Tags: ,

SXSWi

iPhone Apps with HTML, CSS, and JavaScript

by Justin 3/23/2010 12:55:00 PM

With the use of smart phones steadily growing, developers have become increasingly aware that the future of the Web may very well be in our pockets and purses and not on our desks. This has led to the need for applications that are lightweight and optimized for smaller screens and touch screens.

This year at SXSW Interactive, I attended a jaw-dropping session that explained how to make an iPhone application using only basic HTML, CSS and JavaScript.

Speaker Jonathan Stark, a mobile and web app consultant, began coding in very basic HTML as a class full of developers and designers looked on with feigned interest… it was all code we've written a hundred times before. Then he explained the use of jQuery and jQTouch, JavaScript specifically for use on Apple iPhones and waited for the gasps…

By adding this JavaScript, his simple HTML code was immediately rendered on an iPhone as a really cool looking app: the buttons took on the iPhone format, the touch screen functionality was enabled and animations were activated when moving from one screen to the next. He went on to explain the capabilities of this script as the room sat in amazement.

There are many different ways to build applications, and sometimes you do need more complicated code to achieve more complicated design or function, but the bottom line of the session? "If you can build your app with HTML, CSS and JavaScript, then you probably should."

Stark’s discussion is a great example of what we can hope to see for the mobile web’s future: developers working together to dream up new ways to easily bridge the gap between standard web design and mobile devices. 

Bookmark and Share

Tags: , , , , ,

SXSWi | Technical | Design

Google Will Stop Supporting IE6 on March 1

by Justin 2/10/2010 9:57:00 AM

In a move that couldn't make the fellas in the Portland office any happier, Google announced that they will no longer support Internet Explorer 6. Beginning March 1, users of IE6 will notice that certain Google services, starting with Google Docs and Google Sites, will stop working well and eventually won't work at all.

Internet Explorer 6 has been a major headache for web developers everywhere. IE6 is well-known for bugs and incomplete, inconsistent, and often incorrect support for Web standards. Hearing that Google is beginning to phase out their support of IE6 gives developers around the world more confidence to do so themselves and encourage their users to download more recent browser software such as Internet Explorer 7 or 8, Firefox, Google Chrome, or Opera.

Google Apps senior product manager Rajen Sheth recently wrote, “The web has evolved in the last ten years, from simple text pages to rich, interactive applications including video and voice. Unfortunately, very old browsers cannot run many of these new features effectively. Many other companies have already stopped supporting older browsers like Internet Explorer 6.0 as well as browsers that are not supported by their own manufacturers.”

Even Microsoft itself won’t be supporting IE6 in its own Office Web applications. However, though Microsoft has been encouraging Windows users to update to IE7 and IE8, it intends to support IE6 through 2014.

Bookmark and Share

Tags:

News

Google Announces Page Speed Tool for Webmasters

by Justin 12/16/2009 3:24:00 PM

Google recently announced the launch of their Site Performance feature as an addition to their webmaster tools. The new tool shows you information about the speed of your site and gives suggestions for making it faster. We are always conscious of page speed as we build sites; users won't stick around to view your content if they have to wait for your pages to load. Not only that, but faster sites engage users, leading to better conversion rates for things such as purchases or email signups.

The Performance Overview shows the average time it takes for your site pages to load and rates your site against average speeds across the Web. You can delve into specific pages to see what their exact load time is, and see Google’s suggestions for improvements. All you need is a Google account to set your site up to use the webmaster tools. It’s a great collection of tools for developers, webmasters and anyone with a website.

You can set up a Google account here.

Bookmark and Share

Tags:

Dare to Compare

by Justin 8/4/2009 4:25:00 PM

Do I need a Newport or Newport H2? Which sandal is best for hiking?

We recently added the ability to compare products on the KEEN website to answer questions like these. Shoppers can easily add products to their comparison chart from the product wall, detail page and search results page.

The chart displays a photo of each product being compared along with bright green dots that clearly show the features of each product in an easy-to-read format. To give shoppers the most flexibility, the cart can be printed, saved to a KEEN account for later use, or emailed to the customer or a friend. Shoppers can also buy products directly from the chart! It’s a friendly way for KEEN to help customers compare lots of important information and make informed purchases.

Behind the scenes, extensive CSS work allowed us to make the comparison chart information rich and easy to read. When more than three items are being compared, the chart automatically adjusts to a scrollable frame for easy viewing, and the printed version maintains the same clear format. Check out KEEN Footwear to compare products now.

Bookmark and Share

Tags:

Designing Customized Blogs with WordPress

by Justin 6/9/2009 12:03:00 PM

Through our experience and research in building blogs for clients, we now recommend using WordPress over other customizable blogging platforms. Since its inception in 2003, WordPress has become the largest self-hosted blogging tool in the world, used by hundreds of thousands of sites and seen by tens of millions of people every day.

Using WordPress’s publishing platform allows us the freedom to create customized, unique blogs without having to reinvent the wheel for each project. Best of all, by allowing template customization, our clients’ websites and blogs can share the same design aesthetics. Creating a seamless look between the two allows our clients to communicate with their consumers through a blog, while maintaining the impact of their website.

We’ve recently built blogs for SmartBank and KEEN using the WordPress platform. The SmartBank Blog has enhancements including pictures of the authors and a built in RSS feed feature allowing users to sign up for email blog updates. The KEEN Blog features the same navigation and background as the ecommerce site and an RSS feed.

The WordPress platform also offers a number of free and easy-to-use plugins. We’re currently building a mobile website for a client and implementing a plugin to automatically divert blog traffic to a mobile-friendly version of the blog. By simply uploading the files to the clients’ server, their blog will be instantly converted. And, of course the look and feel of the mobile blog is customizable too!

You can learn more about WordPress benefits here, or feel free to contact us to discuss adding a customized blog to your website.

Bookmark and Share

Tags:

Make Your Website Mobile

by Justin 5/19/2009 4:27:00 PM

1.3 billion people can access the Internet from their mobile phones, making the mobile web a new marketing channel predicted to generate $150 billion by 2011. Building a mobile-specific version of a website is important because of the different needs. Mobile users want a quick-loading site that provides important information like directions or contact info.

With recent advancements in mobile technology, you can still provide a rich user experience, balanced with an attractive fast-loading site. Because a mobile website is usually a stripped down version of the full site, most code can be repurposed for the new project.

If you are ready to create a mobile-specific website, here are a few tips:

  • Keep it simple – provide simple pathways to information, as it is more difficult to maneuver a mobile device. Divide content over multiple pages to keep each page as friendly as possible.
  • Make contact information and directions easy to find and available on each page of the site.
  • Scrolling on a mobile device can be tedious. Repeat navigation at bottom of each page so users don’t have to scroll back to the top.
  • Use brief, descriptive text and few graphics to aid in load time. Make sure the graphics that you use are small, optimized thumbnails.
Bookmark and Share

Tags: