Thinking » Topics » Designing for the Web Canvas
It is not often that web designers have to accommodate browsers that are considered “best of breed”. Maybe we are snobby when most of us design for Safari or Firefox and then “fix” things in other browsers, but, everyone has their preferred way of working. Internet Explorer is usually stricter in its interpretations of CSS, which makes some use it as a standard and other wince , but I digress…
So it was with extra frustration that I had to investigate a rendering bug in Safari / Webkit. Granted, it was happening only on an older version, Safari 4, and Safari 5 has been out for more than a few months now. But still, when you think Safari or Firefox are better browsers, it’s a wake-up-call to realize that like any browser, they have funny bugs and issues.
Microsoft has officially released IE9 to the public, making IE6 even older! Microsoft has improved leaps and bounds since those days however, and the new IE9 is a testament to that.
Benchmarks abound; you can actually see the difference. Even on older hardware having the GPU render the canvas helps immensely. Now instead of everything loading at roughly the same speed, you can actually witness IE9 rendering the entire page, and waiting for Flash to finish! This really helps with the responsiveness and smoothness while you are browsing around, notably scrolling under low-end hardware.
CSS3 and HTML5 Support
Although it doesn’t support everything, Microsoft has really stepped up supporting a large number of these new standards. Let’s hope this continues, and help remove some of the negativity around Internet Explorer. If you’re interested in what exactly IE9 supports, head on over to Microsoft’s MSDN page.
Integrated Tracking Protection
In the world of spam, tracking, and targeted advertisement, this is a great new addtion. IE9 Includes the ability to add pre-made, managed, and custom tracking lists. This helps protect you from people attempting to track your behavior, including your searching, surfing, and buying habits. However, it cannot protect you until you set it up. It is very straight forward: just click on the Cog in the upper right, safety, tracking protection. From here click “Get a Tracking Protection List Online…” and select one (or more) lists you want to use to help protect your privacy.
Media Query Support
One of the more interesting aspects of CCS3 is Media Queries. It really adds a new layer of creativeness to the designers and how they can create a flowing, unique, and engaging website at various levels of screen size and hardware. You can read more about an actual use of these in a previous post from J.
Back in December, 2010, the owners of Garden Grille were about to soft launch a new bakery concept a few doors down from their successful vegetarian restaurant. The new cafe would feature only vegan – devoid of animal products, no honey, eggs, milk or cheese – baked goods and desserts, as well as a handful of gluten-free options. In addition to the baked goods, the cafe would offer an extensive menu of fresh pressed juices, which very few – if any – cafes offered in the area. The cafe was to be called Wildflour.
In November 2010, before the initial build-out phase was complete, Oomph sat down with the owners, Rob and Uschi, to develop a branding plan and to set goals for print and web projects. After a long winter of getting the cafe running, testing products, perfecting the menu, and gathering information for the new website, Wildflour is now poised to attract customers who are started to venture outside again after a long winter.
The site is a simple WordPress theme, and the homepage is running the NextGen gallery, which Oomph found was a pleasure to work with. Since Wildflour has an active Facebook presence, Oomph decided to feature the Activity Stream right on the home page. That way, daily specials are written once to Facebook for those users, and consequently show up on the homepage. Special areas for announcements are available in the theme, as well as a blog which the staff at Wildflour will start to flesh out with healthful tips and more information about the products featured in the cafe.
Best of all, unlike some restaurant sites, the menu is plain HTML text – no PDFs to download or Flash to load – which makes one of the most important features easy to access on mobile devices. It’s also just quicker for people who want to check out the menu right away.
So next time you think you need a healthy beverage to perk you up, or a slow-brewed pour-over coffee, or just a place to relax and indulge in a dense piece of chocolate torte, check out www.WildflourVeganBakeryCafe.com, and head on down.
Endeca is a search and business intelligence company whose focus is business on the web. When they wanted a new blog that would focus on trends and insights for eBusiness, the team at Oomph decided it was time to use CSS3′s @media declarations for responsive template designs to optimize the site for multiple mobile and desktop devices.
The result was a super flexible theme, built on WordPress, that scales according to the user’s device size. One set of templates displays content in a few different ways, optimized for the iPhone, Android, iPad and desktop monitors of all sizes. Visit the site, grab the window corner to resize it, and watch what happens. Just one catch: current versions of Internet Explorer don’t yet support CSS3 (version 9, which is right around the corner, does add support).
For the developers out there, read on for a quick run down of what we did and how it works.
As a professional web shop, our HTML / CSS developers are frequently taking a professional graphic artist’s vision of a website’s look and feel and converting it to work with this unique canvas we call a website. The graphic artists’ digital toolbox is full of powerful applications like Adobe Photoshop, that provide near total control over the final presentation, on a fixed sized canvas, down to the pixel.
There’s one big problem: the web developer’s canvas just isn’t that controlled or robust. And it’s not just that the unique characteristics of web layout or the code that defines how a web page should look lacks a good way to pull off a design element (which it does, often enough). There’s a bigger problem: several kinds of interpreters trying to understand the canvas, each with its own quirks and limitations. Welcome to to the world wide web canvas.