Two years ago I wrote a blog about “HTML5 the future of the web?” and now the future of the web is here. On December 17^th, 2012 the Worldwide Web Consortium (W3C) published the complete definition of the HTML5 specifications.

“Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning.”

“As of today, businesses know what they can rely on for HTML5 in the coming years, and what their customers will demand. Likewise, developers will know what skills to cultivate to reach smart phones, cars, televisions, ebooks, digital signs, and devices not yet known.” said W3C CEO Jeff Jaffe.

Check out the W3C announcement: http://www.w3.org/2012/12/html5-cr

As a new year approaches we often look for what the hot items or trends are going to be. For those of us who create websites the hot topic going into the new year is Responsive Web. With tablet and smartphone sales increasing and less users browsing through desktops, the way we design websites is rapidly changing. A million screens and we need to build for all of them. The solution is to make a website that works equally well on every device. The answer, responsive web design. In simple terms, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. In 2013 we will start to see more companies going towards a responsive design to accommodate their users browsing patterns. Read more about Why 2013 Is the Year of Responsive Web Design on Mashable.com.

Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration when testing. Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. To get stats of popular browsers in your country there’s only one source of mobile browser market share information: StatCounter.

Apple, Google, Samsung, and RIM default browsers are among the top browsers because they support touch events and are all based on the WebKit rendering engine. The next level of mobile browsers include Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS. These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems. Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

Below is a list of all the current mobile browsers, there special features, operating systems, and devices they can be found on. Some of the browsers do not come default on phones but are among the top browsers used today.

• Opera Mobile
  • Key Features: Multiple tabs, Zoom-in
  • Operating System: Windows Mobile, Symbian
  • Devices pre-installed with Opera:
    • Nokia N90
    • Sony Ericsson P1
    • Sony Ericsson XPERIA X1
    • HTC Touch Viva
    • HTC Touch Diamond
    • HTC Touch Diamond2
    • HTC Touch Pro
    • HTC Touch Pro 2
    • HTC Touch HD
    • HTC HD2
    • Meizu M8
    • Creative Zii
    • Samsung i900 Omnia
    • Samsung i8000 Omnia II
    • Sendo X
    • Motorola ROKR E6
• Opera Mini
  • Key Features: Compressed downloads for fast browsing, Zoom-in
  • Operating System: Java
  • Devices pre-installed with Opera Mini:
    • Motorola V980, E2, L7, i1
    • Nokia 2610,3120c, 2700 Classic, 2730 Classic, 3500c, 3600, 3600 slide, 3710 fold, 3720, 6085, 5130, 5230, 5500, 5310, 5610, 3110, 7373, 6131, 6233, 6600 slide, 5070, E65, N95, N71, N73, 5000, 3110c, 6288, 6103, 6080, 6303, 6300and 8800 Arte
    • Sony Ericsson K310i, K530i, K550, W200i, W760i, Z530i, Z550i, Z780i, W910i
    • Samsung X160, E570, E420, F480, X510, X650, E900, E250, U700, ZV60, D900i
    • LG K880, KU250, KE970, and KU311
    • SAGEM My411x and P9521
    • BenQ-Siemens EL71 and EF81
    • BenQ EZ1 fight
    • Orange Rio (ZTE-G X991)
• Skyfire
  • Key Features: Display rich websites with Flash or widgets like YouTube, customizable zoom feature
  • Operating System: Android, iPhone, Symbian, Windows Mobile
  • Devices compatible with Skyfire:
    • Android 1.5, 1.6, 2.0, 2.1, 2.2
    • iOS 3.1.3, 4.0, 4.1
• Safari
  • Key Features: Display rich websites like YouTube, zoom feature, excellent touch-based user interface
  • Safari accounted for 62.17 percent of mobile web browsing traffic in October 2011
  • Operating System: iPhone
  • Devices:
    • iPhone
    • iPod touch
    • iPad
• Google Android
  • Key Features: Display rich websites, zoom feature, touch screen interface
  • Operating System: Google Android
  • Devices:
    • Android powered phones
• Microsoft IE for Mobile
  • Key Features: Standard browser features
  • Operating System: Windows Mobile
  • Devices:
    • IE Mobile comes loaded by default with Windows Phone and Windows CE.
• Firefox Mobile
  • Key Features: Mutiple tabs, Awesomebar, password manager, Add-on support, PC-syncing
  • Operating System: Nokia Maemo, Windows Mobile 6.0 (alpha)
  • Devices:
    • Android 2.1 and above devices with an ARMv7 CPU
• Dolphin HD
  • Key Features: Gesture browsing, Webzine, tabbed browsing
  • Operating System:  Android, iOS
  • Devices:
    • Android
    • iPad
    • iPhone
• Blackberry Browser
  • Key Features: Standard browser features
  • Operating System: BlackBerry OS
  • Devices:
    • Blackberry devices
• S60 Web Browser
  • Key Features: Standard browser features
  • Operating System: S60
  • Devices:
    • S60
    • Symbian Mobile Phones
    • Nokia N8
    • Nokia E6
    • Nokia E7
    • Nokia C6-01
    • Nokia C7
    • Nokia X7
    • Nokia 603
    • Nokia 700
    • Nokia 701

The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units to build websites.

Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. Browser zooming is one thing and has been covered on QuirksMode. But what is a pixel on high resolution devices today? Why does the 640px × 960px iPhone 4 claim to be 320px × 480px in the browser? The truth is that there are two different definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.”

The hardware pixel

Most of us are familiar with the hardware pixel. It’s the smallest point a screen can physically display and is usually comprised of red, green, and blue sub-pixels. Light from these three sub-pixels is mixed to create the colors we see. Because the hardware pixel relates to a physical element on a screen it cannot be stretched, skewed, or subdivided. These properties make the hardware pixel like the atom: the unit of design on which we build everything.

The reference pixel and splitting atoms

Things are changing for the pixel. The w3c currently defines the reference pixel as the standard for all pixel-based measurements. Now, instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. This new pixel should look exactly the same in all viewing situations. The beauty of using a reference pixel is that it takes proximity to a screen into account. When using a phone that you held close, a reference pixel will be smaller on the screen than a projection you view from a distance. If the viewer holds their phone up so it is side-by-side with the projection, the pixel sizes should look identical no matter the resolution or pixel density the devices have. When implemented properly, this new standard will provide unprecedented stability across all designs on all platforms no matter the pixel density or viewing distance.

Continue Reading…

According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.

This rapid growth is fairly normal for the internet — the average web page was 14KB in 1995, 93KB by 2003, and 300KB in 2008 — but by burrowing a little deeper into HTTP Archive’s recent data, we can discern some interesting trends. Between 2010 and 2011, the average amount of Flash content downloaded stayed exactly the same — 90KB — but JavaScript experienced massive growth from 113KB to 172KB. The amount of HTML, CSS, and images on websites also showed a significant increase year over year.

There is absolutely no doubt that these trends are attributable to the death throes of Flash and the white knight, if-only-the-internet-was-a-damsel-in-distress emergence of HTML5 and its open web cohorts. It’s curious that the amount of Flash content hasn’t shrunk, though, which suggests that this year’s 33% increase in web page size is mostly down to a significant increase in website complexity and functionality, and not some kind of wholesale shift from Flash to HTML5.

The only real problem with the data is that HTTP Archive only began operating in October 2010 — and so there’s no way to find out the long time growth (or decline) of Flash. HTTP Archive, incidentally, constantly scans 16,000 websites — a list that was cobbled together from sources like Alexa and Fortune 500 — and records the total data downloaded, the number of individual HTTP requests required to fetch all of the content, the size of the JavaScript, Flash, and image content, and a bunch of other metrics. If you’re wondering about the odd spike towards the end, that’s where HTTP Archive increased its sample size from 16,000 to 50,000 — so presumably, the web’s top sites are smaller (or better written?) than the dregs.

So, what’s the actual significance of web pages that are almost 1MB in size? Not a whole lot, when you consider that caching will reduce that amount by 70 or 80% — and the more important statistic, at least as far as latency and rendering times are concerned, “total requests,” only increased from 74 to 85 over the last year (and again, caching will reduce that by 70% or more). One valid concern is mobile 3G and 4G surfers, where carrier data caps certainly haven’t increased by 33% over the last year — but even then, many popular sites have mobile versions that use significantly less than 1MB, and again, caching!

We would now expect the size of web pages to slow down a little, too. 2011 will have been the year in which many developers switched from Flash (or other technologies) to HTML5, and it’s unlikely that their first attempts will have been all that optimized. In 2012, JavaScript libraries will be refined, and cleaner ways of using CSS and HTML will be popularized. Even so, expect more mobile offerings that compress data, like Amazon Silk and Opera Mobile, to emerge as well.

Designers hold CSS close to their hearts. It’s just code, but it is also what makes our carefully crafted designs come to life. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. The common conception among Web designers is that a good style sheet is created by hand, each curly bracket meticulously placed, each vendor prefix typed in manually.

But how does this tradition fit in a world where the websites and applications that we want to create are becoming increasingly complex?

Keep Reading….

There are very few, if any, websites on the Internet that don’t undergo at least a minor facelift at some point in their lifecycle. If you own a business with a web presence, at some point, that site will need to be redesigned, whether it’s due to the changing nature of your business, or purely for aesthetic reasons.

Redesigning your company site can be a major undertaking, so we’ve put together a helpful list of things to keep in mind when considering a redesign.

1. Why Are You Redesigning?

This is perhaps the most deceptively complex, yet obvious question of all. Before undergoing any redesign, however, it’s important to understand what it is you wish to accomplish. Are you unhappy with the way your site functions? Do you simply want a better-looking site? Do you need to improve search engine rankings and sales conversions? Maybe the focus of your business has shifted and it’s time for new content.

These are all important factors to consider, so before you start, make a detailed list of what it is you wish to accomplish during the redesign. This will help guide you through the rest of the process and make sure you stay focused on the end goal.

2. What Type of Redesign Do You Need?

Now that you’ve decided exactly why you want to redesign your site, it’s time to decide just how far down the rabbit hole you need to go. Perhaps a small change in visuals and content is all that’s necessary. On the other hand, you may need to add new features or completely redo your underlying code base. Depending on your needs and budget, a large overhaul may be out of the question, or it may be the most cost-effective long-term solution, so take a moment to think about your needs going forward and work with your developer to strike a balance that best meets them.

3. What Does and Doesn’t Work Currently?

No matter how large or small the redesign, chances are there will be some elements of your existing site that work very well and some that don’t work at all. Now is the time to go through your site and identify these elements. Maybe your content is too verbose or your sales page isn’t very user-friendly. On the other hand, that photo gallery and the blog may be big-ticket items that do really well for your image and bring in lots of traffic. Some elements will need to remain (though possibly given a makeover), some will need to be cleaned up and some will have to go. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out.

4. How Is Your Site Being Used?

Along these same lines, don’t forget to take a look at how users are currently interacting with your site. This will help you identify great content and problem areas. Study your traffic statistics and site analytics for information on things such as entry and exit pages, sales conversions, and search engine keywords. This will help you to understand how visitors find your site and what they do once they get there. While you’re studying those statistics, also have a look at details like screen resolution and browser usage. This will help your developer determine what technical specifications your site should meet and whether a separate mobile version of your site is recommended, among other things.

5. Has Your Brand or Company Image Changed?

If you’ve undergone changes to your brand and company image, those changes need to be reflected in your site, even if the only updates are visual. Keep your logos updated and consider a color-overhaul if the corporate image or philosophy has shifted. Your website is often the first impression people get of your business, so it should grow and mature right along with the rest of your brand identity.

6. When and How Should You Launch Your Redesign?

When and how you launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. Maybe you’re simply making improvements and want to slowly roll out changes over time and unannounced. This unobtrusive rollout won’t give you a lot of buzz, but it will still accomplish your goals of improving the site’s performance and the user’s experience. On the other hand, a big relaunch around the holidays or at the start of a big promotion, or when announcing a major change in the way your business operates can both draw traffic and generate more interest.

7. How Do I Make the Transition Smoother?

Most people are a little intimidated by change. If you have a site that gets a lot of repeat traffic, a sudden, drastic change in form and function can be a bit off-putting to some users. Further, you don’t want this drastic shift to damage search engine rankings and suddenly destroy any and all backlinks you may have gathered over the years.

Try and keep vital elements of your site similar to their existing counterparts, such as the main navigation and header. Usually, your redesign should strive to be an evolution of your existing site, not a dramatic replacement. If the change is dramatic, make sure it’s clear and give your users a blog post or news announcement discussing the changes.

Similarly, you want to make things easy for the search engine spiders, as well. Moved content should be redirected via 301 redirects, for instance, and error pages should be helpful and transmit the correct header information and meta data. For human visitors, make sure those error pages contain helpful information that is, where possible, relevant to the content the user was trying to access.

Source: Mashable.com

“Where were you in 1996? If you were in cyberspace, surfing the World Wide Web, chances are you were waiting a long time for pages to load, laughing at the first Internet meme and suffering through some god-awful graphics.

My, how times have changed!”

Read the full article on Mashable...

Infographic courtesy Online University

The Expressive Web (Beta) was recently released by Adobe to showcase some of the newest and most expressive features that HTML5 and CSS3 can add to the web today. Personally I found this to be an amazing example of what’s in the future for web designers and developers.

The site highlights the following HTML5 and CSS3 features:

• CSS3 animation
• CSS3 gradients
• CSS3 media queries
• CSS3 shadows
• CSS3 transforms
• CSS3 transitions
• CSS3 web fonts
• HTML5 audio
• HTML5 canvas
• HTML5 forms
• HTML5 video
• Web storage

Each feature page contains:

• A demo of the feature.
• Data on browser support.
• Links to examples in the wild that use the feature.
• Links to more in-depth resources and tutorials.
• Detection and fallback strategies for the feature.

To read the full article about the development and design of the site visit Adobe Introducing The Expressive Web

With the rise of mobile devices, web development and debugging is more complex than ever. We have more browsers and platforms to support. We have more screen sizes and resolutions. And we’re building in-browser applications instead of the flat, brochure-ware sites of yore.

Luckily, we also have better tools. The JavaScript console is a standard feature of most major browsers. Both JavaScript and the HTML DOM offer native error handling. We also have services and applications that help us remotely debug our sites.

Read Full Article...