Page 2 of 4

Mobile Design Strategies, in Podcast Form

The next Breaking Development conference gets underway next week in Orlando, but you don’t need to travel to the most magical place on Earth to get access to some of the top minds on mobile. Audio of the great talks from the Breaking Development in Nashville last year are now available for your listening pleasure (and education) on Huffduffer. You can download individual talks as MP3s or grab the iTunes feed to get all of them as a podcast. Breaking Development is a great resource on mobile design, development, and marketing so it is definitely worth listening to every single one of these.

Link: bdconf on Huffduffer

background-size property overwritten by background shorthand by Firefox

As I start to use new CSS3 properties more often new issues are arising that I didn’t have to deal with before. Building out a new responsive site now that is using retina images for the mobile site so I’m using the background-size property extensively. I ran into a bug in Firefox 11 where in some situations the property was ignored.

Here’s an example of the code that did not work in Firefox:

112
113
114
115
116
117
118
119
120
121
122
123
124
125
.author:after {
	background-size: 30px 30px;
	content: "";
	height: 30px;
	padding: 0;
	position: absolute;
	right: -32px;
	top: 0;
	width: 30px;
}
 
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
}

Turns out, using the background shorthand was overwriting the size. Adding the background-size property to the more specific author declaration fixed the issue.

It looks like this is actually correct behavior according to the spec. Using the shorthand overwrites all other background properties. From the Standarista site’s notes on CSS3 background properties:

If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values […].

I thought it was time to learn the more detailed background shorthand that includes the new properties like background-size and background-clip. However, the W3C’s spec for it isn’t actually supported by seemingly any browsers yet. Here’s what the new shorthand declaration of the code should be:

123
124
125
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top / 30px 30px no-repeat;
}

Unfortunately, that valid line of CSS breaks in every browser I tried it on and results in the image not displaying at all. I ended up needing to define the background-size property separately after the shorthand declaration:

123
124
125
126
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
	background-size: 30px 30px;
}

The actual code will vary depending on what you’re doing but the important thing is to not forget to include the other background properties even if you’re not specifying them in your shorthand.

Measuring Android Version Fragmentation

android-fragmentationandroid-fragmentation
Comparing Android version market share and adoption rates over time.

Android fragmentation is a dirty little buzzword you’ve likely heard everywhere from Angry Birds to Steve Jobs and probably in strategy meetings with us here at MarketNet about that big app idea your company has.

Just what exactly is fragmentation and how big of a problem is it for Android and your project? Chris Sauve at pxldot has done a great job summarizing and charting the issue on his blog post Android Measuring Stick.

One of the best things about Google’s Android operating system is that it’s open source and available for other developers and device manufacturers to pretty much do whatever they’d like with it. That means we can get cool things like fitness accessories and Fossil watches powered by Android, but it also means that there’s no one true version of Android out there that to develop for.

Right now there are three versions of Android still out there in numbers large enough to require support, and that’s ignoring the brand new Android 4.0 (also called Ice Cream Sandwich) that was released in November and is currently running on about 1% of Android devices. It’s easy to predict that in just a month or two there will be four versions of Android out there, each with huge numbers of users. Even if version 2.1 (Eclair) is “only” at a 7.6% share, with the number of total Android devices out there numbering in the hundreds of millions that is a lot of potential customers you could be turning away if your site or app doesn’t work with that version. Add in the diversity of screen sizes available and you’re starting to understand what a difficult and important issue market fragmentation can be for a mobile project.

Google Chrome Coming to Android Devices*

Google Chrome is finally coming to Android phones and tablets. A beta is available for download now if you’re one of the lucky few already running Android 4.0/Ice Cream Sandwich (hence the asterisk* in the post title.) No word on when (or if) Chrome will come to other Android versions or become the operating system’s default browser.

In general the user interface looks very intuitive and clean, particularly the tab view and tab switching functionality. Chrome for Android will also reportedly bring improved performance and better rendering of pages. Plus if you’re signed in with a Google account you can sync things like tabs and bookmarks across devices (phone, tablet, and desktop.)

Get more information and some hands-on impressions over at The Verge.

Update: Chrome for Android won’t support Flash. From Adobe, “Adobe is no longer developing Flash Player for mobile browsers, and thus Chrome for Android Beta does not support Flash content.”

Microsoft Says Goodbye to IE6

ie6-cake-300x200ie6-cake-300x200
Goodbye IE6!

If you’re a web developer, I hope you’re not all partied out from your New Year’s celebrations because there’s an even better reason to celebrate: Internet Explorer 6 usage in the United States has now officially dropped below 1%!

It depends on the project, but there is often little reason to spend the time and money it takes to attempt to provide the exact same experience for users of a 10-year-old browser. Even Microsoft agrees supporting IE6 should be a “low priority.”

Link: The US Says Goodbye to IE6

Our Favorite Web Design Trends of 2011

Last year was yet another huge one on the Web as things continued to move forward at a breakneck pace. The explosive growth of traffic from mobile devices influenced everything and meant huge advances in both technology and new ideas. Here are some of our favorite trends of 2011:

Responsive Design Goes Big Time

boston-globe-responsiveboston-globe-responsiveA responsive website uses fluid layouts, flexible images, and media queries to deliver an experience adapted for whatever width browser or device is being used. With the increasing number of mobile and desktop resolutions that must be accounted for, true responsive design solutions use CSS and media queries to flex to handle any width and adjusted layouts for popular breakpoints.

Coined by Ethan Marcotte back in 2010, responsive web design went all the way from unproven concept to misused buzzword in 2011. When the responsively redesigned BostonGlobe.com launched in September it signified loud and clear that responsive design wasn’t just for designer portfolio sites anymore. Responsive concepts can and should be considered for any new site developed in 2012.

Learn more: Responsive Web Design: What It Is and How To Use It, Responsive Web Design: The Book

@font-face Brings Beautiful Type to the Web

typekittypekitWeb typography has been something designers have been forced to struggle with from the earliest days of the Web. As a developer, reminding the design team that they need to choose a web safe font and their options are still just “Arial or Verdana” always results in dropped heads. No more. The ability to embed nearly any font you want using @font-face puts all the power and creativity back into the designer’s hands. Add to it CSS3 properties such as text-shadow and tools such as Lettering.js and FitText, and suddenly the Web is a more beautiful place.

A technology that was around long before 2011, embedding web fonts using @font-face exploded last year and saw some major advances as more type foundries licensed their fonts for web embedding. With more quality fonts available (and many available for free), most projects that MarketNet works on now end up including embedded fonts for headings or navigation elements.

Also in 2011, Typekit, an innovator and leader in hosted web fonts, was acquired by Adobe. The acquisition signifies broad support for @font-face and should mean the inclusion of Typekit capabilities in future releases of Adobe’s Creative Suite tools.

Learn more: Modern Techniques for Web Typography, The Essential Guide to @font-face, @font-face face off

Constant (and Automatic) Browser Updates

firefox-updatefirefox-updateInternet Explorer 6 was released over 10 years ago and it’s lack of capabilities and bugs could still end up restricting a web project in 2011. Crazy, right? Fortunately a similar issue shouldn’t be able to occur again. Web browsers are finally updating as quickly as web technology and ideas are, and more importantly they’re doing it automatically without needing users to be savvy enough to know that they need to update their computers.

Google Chrome has been pushing out autoupdates for a while now (and still does it the best), but in 2011 the teams behind both Firefox and Internet Explorer announced they would be doing the same. Now on an aggressive six-week release cycle, Firefox went from version 4.0 to version 9.01 between April and the end of the year. In December, joyous noises were heard from developers across the globe as Microsoft joined the party with the news that Internet Explorer all the way back to Windows XP would now autoupgrade to the latest available version.

Learn more: Mozilla’s Right: Bring on the Browser Updates, IE to Start Automatic Upgrades across Windows XP, Windows Vista, and Windows 7

What Will Be the Trends of 2012?

What new tech will be out in 2012? Will Google TV or the rumored new Apple TV set make an impact? How will Android Ice Cream Sandwich influence mobile design? Mobile will continue to grow and will influence many companies to target mobile first when launching new projects.

Color Thief

From the creator of the original javascript lightbox comes Color Thief, a jQuery plugin that analyzes the colors in a given image and returns the dominant color and the color palette. Has some incredible usage possibilites both from from a design angle and also in improving usability. Definitely looking for an excuse to use this on a project.

Amazon Announces New Kindles, New Cloud-Accelerated Web Browser

amazon-kindle-fireamazon-kindle-fireSome huge technology announcements from Amazon today as they introduced three new Kindle devices, a new $79 Kindle, the Kindle Touch, and the Android powered Kindle Fire tablet. As a web agency, the most interesting device is the new 7″ tablet. So far the iPad has largely been the only tablet to capture enough market and mindshare that it is even considered during the design and development of new web sites. With the Kindle Fire’s low price ($199) and Amazon’s ability to slap it front and center everyday on the homepage, the tablet has a strong chance to make a significant impact.

Equally interesting is the announcement that the Kindle Fire will feature a cloud-accelerated web browser called Silk that splits the work of fetching and rendering web sites between the device and Amazon’s cloud services. The browser promises to speed web browsing by reducing DNS requests, caching site data on Amazon Web Services cloud, optimizing site files such as images, and prefetching webpages based on aggregate browsing data.

Continue reading → Amazon Announces New Kindles, New Cloud-Accelerated Web Browser

No Flash Support in Internet Explorer 10 Metro

ie10-screenshot-300x167ie10-screenshot-300x167
The touch friendly, Metro-style version if IE10 will not support Flash or other plug-ins. (Image: Favbrowser.com)

Microsoft’s Internet Explorer 10 will not support any browser plug-ins when running in the new slick Metro mode. Most notably, that means no Flash support and a reliance on HTML5, JavaScript, and other standards-based technologies for video and other interactivity. When running in standard desktop mode, IE10 will support both plug-ins and extensions.

Metro is the touch-friendly, full screen interface that will run on top of Windows 8 and be the main mode for touch devices such as tablets. According to Microsoft, “running Metro style IE plug-in free improves battery life as well as security, reliability, and privacy for consumers.”

This is another big blow for Flash, which is already not supported on many mobile devices including iPhones and iPads. While there are still things Flash does better (or more consistently across browsers) than HTML5 and JavaScript, developing in Flash is making less and less business sense as mobile web usage continues to explode.

Source: Metro style browsing and plug-in free HTML5