An interesting point was raised by Brendan Davis in my recent post “Responsive Web Design and Scrollbars: Is Chrome’s Implementation Better?”: are RWD breakpoints affected by high pixel-density screens?

The short answer is: no — but we need to delve a little deeper and look at the problems they can cause.

What is Retina?

“Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. The technology is used in recent iPhones, iPads, MacBook Pros and other high-end devices.

For example, the MacBook Pro 15″ has a resolution of 2,880×1,800 or 220 pixels per inch. At this scale, most people are unable to notice individual pixels at typical viewing distances — applications and websites would be too small to use.

Therefore, the device reverts to a standard resolution of 1,440×900 but the additional pixels can be used to make fonts and graphics appear smoother.

What’s the Problem?

Standard-resolution bitmap images can look blocky on a Retina display. A 400 x 300 photograph is scaled to 800 x 600 pixels but there’s no additional detail. This can be noticeable when compared to smooth fonts and other high-resolution images.

Real-World Usage

If you look around the web, you’d be forgiven for thinking everyone has a Retina display. Currently, it’s only available in high-end devices, but these are coveted by developers so it leads to a disproportionate volume of online discussion. In the real world, the percentage of people using similar displays is in low single figures.

Let’s put it into context: if you’re not developing for the 1% of IE6/7 users, you probably shouldn’t be too concerned about people using Rentina — especially since they can still view your website.

That said, Retina-like screens will eventually migrate to all devices. There’s little reason to fret now, but there’s no harm in some forward planning. Let’s look at the options in order of recommendation…

1. Use SVGs and CSS3 Effects

The clue is in the name but Scalable Vector Graphics are … scalable! It doesn’t matter how big an SVG becomes — it will always be smooth because it’s defined using vectors (lines and shapes) rather than individual pixels.

SVG is not practical for photographs but is ideal for logos, diagrams and charts. The primary drawback is a lack of support in IE8 and below but you could always provide a PNG fallback or use a shim such as Raphaël or svgweb. See also: How to Add Scalable Vector Graphics to Your Web Page.

You may also be able to replace some images entirely. For example, titles, gradients, corners or shadows defined as graphics can be reproduced using CSS3 alone. They will render at a better quality, result in fewer HTTP requests and use less bandwidth.

2. Use Webfonts Icons

The more I use webfonts icons, the more I love them. Like SVGs, fonts are vectors so they’re scalable so you can use font sets which contain icons. They’re ideal for small, frequently used shapes such as email envelopes, telephones, widget controls and social media logos. They also work in every browser including IE6+.

There are plenty of commercial and free icon font sets available:

• Typicons
• Font Awesome
• Iconic
• Foundation

Or you can use a hosted font service such as We Love Icon Fonts.

I recommend creating your own small set of custom icons using online tools such as Fontello or IcoMoon.

3. Use High-Resolution Images When Practical

Retina has four times more pixels than standard screens. If you have a 400 x 300 image (120,000 pixels), you’d need to use an 800 x 600 alternative (480,000 pixels) to render it well on a high-density display.

However, the high-resolution file size may not necessarily be four times larger. Every image is different but if it contains solid blocks of color or details which can be omitted, it may be practical to use a 800 x 600 image and scale it in the browser.

Be pragmatic: if the standard image is 200Kb and the high-resolution version is 250Kb, there is negligible benefit using image replacement techniques. Use the better version throughout.

4. Use CSS Image Replacement

There will be times when high-resolution versions of your image are four times larger — or more. In those circumstances you may want to consider image replacement techniques, i.e. the standard image is replaced by larger alternative on Retina displays. The following media query code could be used:

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

The drawbacks:

1. You will need to create and maintain two sets of images.
2. Some browsers will download both images.

Remember that many of these users will be using smartphones or tablets on slower mobile networks. Detecting the connection speed would be more beneficial than determining the pixel density.

5. Use JavaScript Image Replacement

Retina display detection can be implemented using the following code:

var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)
);

Once a Retina display is determined, you could:

1. Loop through all page images and extract the URL.
2. Append ‘@2x’ to the file name and attempt to load the resulting image URL using Ajax.
3. If found, replace the current image with the high-resolution alternative.

Fortunately, the hard work’s been done for you at retinajs.com. While it only adds 4Kb weight, high-density display devices will download images twice — although the second time will occur as a background process after the page has loaded.

My advice: be practical and keep it simple. Don’t spend inordinate amounts of time attempting to solve minor rendering problems on devices with proportionally few users. Of course, none of that matters when your boss receives his new iPad and starts to complain about image quality…

OK people, we need your input.

SitePoint would be a lonely place indeed without you, our readers — and we’d like to hear what you have to say about us. We’ve published a SitePoint Network Reader Survey, and if you have a few moments, head over there to fill in a short questionnaire. It is brief, we promise; we reckon it’ll take you about four minutes to go through. Nobody likes surveys that read like novels, right?

To make it worth your while, we’re giving away a 16gb 4th Generation iPad to one lucky entrant. Thought that’d make you smile …

Thanks for your time, and for being a loyal SitePoint reader!

Without wanting to blow our own trumpet too hard, the SitePoint network provides thousands of pages of web development resources. But the web moves forward too rapidly to document everything. It’s frustrating to type the name of some new HTML5 API into Google only to be faced with a six year-old W3Schools article (no offense W3Schools, but your SEO success often surpasses the subject matter!)

Vendors such as Mozilla, Microsoft and Apple offer some great information, it’s usually biased toward their own browser’s features. The W3C specifications are impartial, but more aimed at browser builders than web developers. So you normally end up using snippets from half a dozen places because there’s no single documentation repository.

Until now.

In an amazing show of solidarity, Adobe, Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia, Opera and the W3C have joined forces to create WebPlatform.org; a definitive, community-driven library of web developer resources.

Tim Berners-Lee:

People in the web community —- including browser makers, authoring tool makers, and leading edge developers and designers —- have tremendous experience and practical knowledge about the web.

Web Platform Docs is an ambitious project where all of us who are passionate about the web can share knowledge and help one another.

The wiki-based site is an early alpha release which is only available in English, but you’ll find information about HTML5, CSS3, animation, media queries, audio, video, canvas, SVG and more.

As well as the documentation, there are tutorials, a blog and Q&A section where you can ask and respond to questions from other members.

It’s early days for WebPlatform.org. The content is not as complete as other resources and the system is a little buggy but, assuming the stewards pull their weight, it could become a great guide for web developers.

Have you signed-up to WebPlatform.org? Can the contributing vendors disregard their own interests for the good of the web?

I realize you have better things to do than watch share prices but a monumental event occurred this week. Apple became the world’s most valuable company. Ever. Its share price reached almost $665 which propelled the company’s worth to $621 billion.

Apple overtook Microsoft’s record of $621 billion in 1999. Admittedly, that would equate to $850 billion today, but Apple’s valuation remains impressive.

Those of you under the age of 30 possibly don’t remember that Apple almost went bankrupt 20 years ago. The company’s focus on expensive all-in-one machines didn’t always match the market’s desire for cheaper and faster computing devices. Microsoft dominated and, even today, Windows is used on 90% of home and office PCs. This, combined with doomed forays into early digital photography, CD players, interactive TVs and games consoles (does anyone remember the Bandai Pippin?) pushed Apple to its knees.

Apple’s rebirth started in 1997. Steve Jobs returned as CEO, re-evaluated the product line, and launched the Jonathan Ive-designed iMac. The machine wasn’t technically better than any other PC but it was different, looked great and appealed to a mass market. Over 800,000 units sold within five months.

Apple never looked back and, while some of their business ethics would make Gordon Gekko wince, there are some great lessons we can follow…

1. Imitation Over Innovation

Apple didn’t invent the PC, MP3 player, smartphone or tablet. They enter a market, take existing concepts and apply a different approach or extra polish to make them desirable.

Consider the iPad. Microsoft and other companies dabbled in the tablet market for many years but cut-down hardware combined with desktop software was never successful. Apple made their tablet a larger, more powerful smartphone. They enhanced rather than reduced an existing technology.

2. Attention to Detail

It’s the small details which make Apple’s products shine. There are few iPhone features which excel over other products on the market, but there’s no one product which beats the iPhone.

Those who buy Apple devices rarely question the company’s design expertise. If anything, those customers begin to doubt their own knowledge if they want a feature Apple don’t provide. Wouldn’t it be great if your clients held you in such high esteem?

3. Offer a Complete Package

Where do iPod, iPhone and iPad users buy their apps, music and movies? I suspect Apple’s after-sales business is more profitable than their branded product line. Why invest in your own research and development when you can claim a 30% cut of another company’s revenue?

While I’m not suggesting you can apply sales ‘taxes’ to your client websites, you can certainly up-sell hosting, support, maintenance, updates, training and consultancy services.

4. Charge a Premium

Apple do not compete on price. There are thousands of IT suppliers jostling for business at the lower end of the market but none are as successful.

Apple make a healthy profits on every sale. Some prices veer toward extortionate, but people pay because of the perceived value. A cheap smartphone may offer the same facilities as an iPhone but it lacks the brand appeal.

In addition, when the iPhone 5 is released there will inevitably be stories about lack of availability. Do Apple always fail to appreciate demand? Or do these stories make the iPhone appear more “exclusive”? There’s one guaranteed way to make people desire your product: tell them they can’t have one!

5. Achieve Cult Status

Apple has a passionate, quasi-religious following. Many devotees buy every one of their products regardless of need or reviews.

While few of us can hope to achieve cult status, it’s worth remembering that clients approach you for your expertise. They want solutions to problems — not excuses, technical restrictions or in-depth explanations.

If you can get a job completed effectively on time and on budget with the minimum of effort from the client, they won’t hesitate to use your services again.

Do Apple deserve their valuation? Are they a shining example of good business practices? Can we learn more from their rise, fall and subsequent comeback?

Outside the Apple.com site, Safari rarely receives a mention on the web. It’s a solid, dependable browser. Safari is the default on Mac OS and the only “real” browser on iOS. But it’s never taken the world by storm despite being available on several platforms.

Safari 5 has been around since June 2010 and Safari 6 was launched with Mac OS X 10.8 Mountain Lion (more about that later). Let’s look at the new features for users…

• Unified Smart Search
  Safari now matches Chrome and IE with a single address/search field. The bar analyzes bookmarks and history to determine where you want to go.
• Enhanced Tab Functionality
  Tab View provides a swipe-able list of tabs. Opened tabs are saved to iCloud so they’re available on your Mac, iPad, iPhone and iPod.
• Social Sharing
  The Share button allows pages and links to be added to your reading list, bookmarks or sent to the web via email, Twitter or Facebook.
• Improved Performance
  Thanks to multi-core JavaScript processing and hardware acceleration.
• Privacy Controls
  Safari 6 adds the new “Do Not Track” feature.
• Offline Reading List
  Page content can be cached so you can continue reading when you don’t have a net connection.
• RSS has gone
  I use RSS and you may too. We’re in the minority and Apple has dropped the feature.

But who cares about that fluff — we want shiny HTML5 tools! Apple has obliged with an updated webkit engine which includes…

• Web Audio API
  Sounds effects can be created and customized in JavaScript.
• CSS filters
  Apply visual filters such as blurs, gradients, brightness, hues, inversion, etc.
• HTML5 media synchronization
  Multiple events and effects which require precise timing can be synchronized.
• Redesigned Web Inspector
  The tool now includes a snippet editor for code testing and a Safari Extension builder.

There are also a number of iOS mobile-specific features including web inspector remote debugging, support for file uploads (about time), and “Smart App Banners” which indicate when a native app is available.

Great stuff. Safari 6 is available on OS X 10.8 Mountain Lion and it’s also compatible with 10.7 Lion via the Software Update. However, Lion users do not get features such as sharing, notifications, Tab View or iCloud tab synchronization. A shame, but think yourself lucky…

What About Everyone Else?

Those on OS X 10.6 Snow Leopard and earlier versions cannot upgrade and are stuck with Safari 5. Could Apple fragment the Safari market in the same way Microsoft did with IE? Perhaps not to the same extent, but it remains a concern.

Apple has confirmed that Safari 6 will not be available on Windows. While they stopped short of stating it had been dropped forever, that seems likely.

Safari on Windows was never successful. The browser felt a little odd and did not adopt standard UI conventions. That didn’t matter — as I wrote back in June 2007:

It’s easy to test against any Windows or Linux browser. Free virtual machine software allows you install versions of Internet Explorer, Firefox, Opera, Konqueror and even Lynx.

However, the big unknown browser is Safari. It’s undoubtedly popular, but is impossible to test unless you have a Mac. Until now…

Apple has announced a version of Safari for Windows. This is an intelligent strategy from the company. Windows and Linux-based web developers now have no excuse for not testing their sites and more will become Safari-compatible.

I doubt many Windows users will switch to Safari, although I can see it being useful for Mac fans who use Windows at work. For now, it’s web developers who will benefit the most.

Apple are removing a vital tool from a large proportion of developers. While Chrome uses webkit, the browsers have differences. Even this week I discovered a site layout issue which affected Safari but not Chrome or other applications. Without the Windows edition, I would have presumed it worked.

Safari may not enthrall Windows users, but it enabled developers to make a site work on Mac OS and iOS. Despite their success, Apple’s browsers are dwarfed by others and, without testing, web sites and applications will inevitably break.

It may not be fair, but users will simply blame their device.

Have you tried Safari 6? Is Apple right to drop support for Windows and older OSs?

We’re only three weeks into 2012 and what an enormous year it’s already been on the Web.

SOPA has been proposed by the United States Congress, with big internet names such as Wikipedia and Reddit observing a 12 hour blackout in protest. Apple, now well known for revolutionizing industries far and wide are expected to launch their new “Bliss” education initiative in an event in the next 24 hours. But what’s happening at SitePoint this year?

We’ve been very busy, working on some exciting new projects. One I want to introduce you to is DealFuel.com. We’ll bring you super cool savings on tech products, books, and tools from SitePoint and others. Sign-up to receive all the details on the first deal.

We’ve also got some exciting new book launches lined up on topics like CoffeScript, jQuery, and UX … to name just a few. So it’s going to be a BIG year. But enough about what’s happening here at SitePoint!

What do you think will happen in the tech world in 2012?

• Is Android going to maintain it’s diminishing lead over iOS?
• What new releases are Apple going to give us in 2012?
• How will Facebook’s IPO pan out?

Following a year of thorough testing and debugging by 125 contributors, the final gold version of jQuery Mobile has been released. If you’re developing mobile applications for iOS, Android, Blackberry, Bada, Windows, WebOS, Symbian or MeeGo, you should certainly investigate what jQuery Mobile offers.

Before we go any further, I should clear up some confusion. Despite the name, jQuery Mobile is not jQuery for mobiles! It’s an interface framework which requires the standard jQuery core (1.6.4 is supported at this time). It could be likened to jQuery UI for mobile devices or, more accurately, projects such as Sencha Touch.

In essence, jQuery mobile helps you build cross-platform mobile web applications using HTML5. Common elements such as pages, toolbars, dialogs, lists, navigation and form fields are styled and transformed into an attractive iPhone-inspired mobile interface.

Impressively, jQuery Mobile provides A-grade support for all modern platforms including: iOS 3.2+, Android 2.1+, Windows Phone 7+, Blackberry 6+, WebOS 1.4+, Firefox Mobile, Opera Mobile 11, Meego 1.2, Kindle 3 and Kindle Fire. Lesser browsers such as Blackberry 5, Opera Mini, and Symbian will work but features such as Ajax navigation may be disabled. Older browsers will still receive a functional, non-enhanced HTML-only experience.

A-grade support also extends to the desktop editions of IE (7+), Chrome, Firefox and Opera. That should make testing significantly easier for developers.

How to use jQuery Mobile

The jQuery documentation is impressive:

• Quick Start Guide
• Documentation and Demonstrations
• jQuery Mobile Gallery

Those with a little HTML experience can implement basic multi-page templates and transitions using markup alone:

<!DOCTYPE html>
<html>
	<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div id="one" data-role="page">
	<div data-role="header">
		<h1>Page One</h1>
	</div>
	<div data-role="content">
		<p>Hello world</p>
		<p><a href="#two" data-role="button"data-transition="slide">Show page 2</a></p>
	</div>
</div>
<div id="two" data-role="page">
	<div data-role="header">
		<h1>Page Two</h1>
	</div>
	<div data-role="content">
		<p>Hello again</p>
		<p><a href="#one" data-role="button">Show page 1</a></p>
	</div>
</div>
</body>
</html>

Those requiring more sophistication can access the API to configure the defaults, define events and modify themes.

Building Your Own Theme

If you’re not keen on the subtle blue and gray iPhone design, the theme can be tweaked using CSS. If that’s a little too much effort, try the ThemeRoller application. The whole design can be modified by dragging colors on to interface elements and downloading the customized CSS file.

Suitable File Sizes?

jQuery Mobile’s JavaScript code is contained in a 24KB minified and gzipped file. A further 7KB is required for the CSS theme and 32KB for the jQuery 1.6.4 core. That’s a total of 63KB — a reasonable download for the slowest of connections. Don’t forget that you’ll probably require fewer graphics too.

jQuery Mobile looks great. It won’t magically convert your existing project to a mobile app but it’ll make the task far easier, more reliable and it’ll work on multiple devices.

Are you intending to use jQuery Mobile in your next project?

Steve Jobs’ influence did not end with his untimely death. Adobe has announced they are abandoning further development of the Flash platform on mobile devices. The news, first revealed by ZDNet, includes the following statement:

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates.

Adobe will refocus development efforts on AIR and HTML5 applications.

Apple and Jobs were scathing about Flash’s failings. The plugin was accused of being buggy, causing security issues and draining mobile batteries. I’m not a Flash developer, but Jobs’ comments about it being a closed proprietary system seemed particularly hypocritical.

Whether Apple was protecting users or their own market interests doesn’t matter. As a technology, Flash was never ideal for low-powered mobile platforms. Adobe’s plugin had its problems, but it was surprising they made it work on any mobile device.

Ironically, the latest modern smartphones and tablets should be powerful enough to run Flash. However, is it commercially viable to create multiple versions of the plugin for different devices when Adobe are unable to tap into Apple’s sector?

So does this announcement mark the beginning of the end for Flash? This decision must have been difficult but rumors of Flash’s death are premature. HTML5 offers an alternative, but user demand for cross-platform (desktop) videos, games and interactive applications are likely to keep Flash around for many years. But, if you’re developing mobile applications, HTML5 has suddenly become a far more attractive proposition.

Were you surprised by Adobe’s announcement? Does it affect your current development plans?

Everyone at the SitePoint network extends their deepest condolences to the family, friends, colleagues and admirers of Steve Jobs, who died October 5, 2011 following years of battling cancer.

The co-founder of Apple will forever be remembered as a true visionary who changed the way people thought about and used computers and the internet.

We at SitePoint share the sadness of his passing, and we celebrate the immense contribution he made to our culture.

http://www.apple.com/stevejobs/

Over the last decade, mobile technology has evolved more rapidly than any other area of computing. My first mobile – purchased just 12 years ago – felt like a brick, and although it could send and receive text messages, that functionality lay so many menus deep, I never used it. As a voice-only device, my first mobile merely replicated the functionality of a landline telephone.

View post:
BuildMobile: Mobile Finds Its Voice

When I joined the team I have been working with recently, they were trying to create a graph using Core Plot, a popular third party library. It didn’t go well though, there were two big problems. First, they couldn’t use a custom image for the graph’s background, as was required by the designer.

Read More:
BuildMobile: Creating a Graph With Quartz 2D

In part one of this mini series, we tackled the question of implementing a slider when you want to create a range of values, not just one. If you haven’t read part one, you’ll be feeling a little bit lost so I advise you go and check out iOS Range Slider: Part One . Still with us?

More:
BuildMobile: Wicked iOS Range Slider: Part Two

“ I believe Apple’s brightest and most innovative days are ahead of it. And I look forward to watching and contributing to its success in a new role. I have made some of the best friends of my life at Apple, and I thank you all for the many years of being able to work alongside you.

See more here:
BuildMobile: Thanks Steve