610 Design » apple

CSS3 Media Queries

schoey — Thu, 19 Aug 2010 11:25:28 +0000

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the tag.

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

CSS Tricks – using jQuery to detect browser size
The Man in Blue – using Javascript (this article is written 6 years ago)
jQuery Media Queries Plugin

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

Large size: 3 columns sidebar
Smaller: 2 columns sidebar (the middle column drops to the left column)
Even smaller: 1 column sidebar (the right column shift up below the logo)
Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

A List Apart

Large size: navigation at the top, 1 row of pictures
Medium size: navigation on the left side, 3 columns of pictures
Small size: navigation at the top, no background image on logo, 3 columns of pictures

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

Conclusion

Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.

Source: Web Designer Wall

11 UI Kits for iPhone and iPad Development

schoey — Tue, 08 Jun 2010 11:07:53 +0000

These are great for communicating early mockups and ideas, but when it’s time for those ideas to make the jump from paper to the computer screen, it’s helpful to have a library of UI elements at your disposal. Since we love saving you time, we’ve found some for you. Here are 11 UI Kits for iPhone and iPad Development.

1. iPad GUI Kit in PSD Format

2. iPhone GUI PSD 3.0

3. Free iPhone Toolbar Icons

4. Ultimate iPhone Stencil for Omnigraffle

5. iPhone UI Vector Elements

6. Free iPhone Toolbar Icons

7. Yahoo! Design Stencil Kit

8. iPad GUI PSD

9. iPad Vector GUI Elements

10. iPad Stencil for Omnigraffle

11. iPhone PSD Vector Kit

Source: web design ledger

What’s the bug up Apple’s Appholes?

610design — Tue, 18 May 2010 10:53:07 +0000

Seriously, what’s gotten into Apple?

For the past decade of Steve Jobs’ second go-around as CEO at Apple, the company has secured a strong following of loyal customers by playing the role of the David in a world of tech Goliaths. You can see it in the famous Mac vs. PC ads: Apple is the everyman, and its competitor (Microsoft) is the stuffy, out-of-touch "Man."

But recently, Apple has either lost touch with its customer base or just has a bug lodged up its data port.

In late February, Apple purged 6,000 apps it deemed "too sexy." Late last month, Jobs posted a scathing 1,700-word essay on Apple’s Web site about why he hates Adobe Flash.

More recently, the company made Ellen Degeneres apologize on national TV for airing a spoof commercial that suggested the iPhone was difficult to use. And Apple threw an epic hissy fit when a Gizmodo blogger leaked photos of a new iPhone prototype.

The Gizmodo fallout prompted "Daily Show" host and admitted Apple lover Jon Stewart to label the company’s execs "Appholes."

"Apple, you were the rebels, man, the underdogs, people believed in you," said Stewart. "But now, are you becoming the Man?

In reality, Apple hasn’t been an underdog for years. Its iPod and iTunes’ success helped the company grow out of its "niche" status. And Apple really took off after the iPhone became an instant hit in 2007.

Apple’s market value is now about $245 billion — just shy of Microsoft’s $270 billion. And Apple’s revenue this year is expected to be on par with Microsoft, at around $61 billion.

Consumers still love Apple

It’s highly unlikely that Apple’s newfound status as "tech giant" and the associated attitude-copping will be a turn off for consumers.

"It’s going to take a lot more that a few controversies with Gizmodo, Ellen, or Adobe to halt the Apple momentum," said Jason Schwartz, author of Apple Revolution: The Religious Tech Wave of Decade 2010. "If anything, all the media attention adds to the appeal."

Apple did not respond to requests for comment, but most analysts agree that Apple’s products speak for themselves.

"People don’t care that Apple has been defiant — they’re used to Apple getting on its high horse," said Laura DiDio, principal analyst at ITIC. "As long as it keeps producing good products, consumers’ love fest with the company will continue."

This isn’t the first time that Apple has demonstrated a bit of arrogance. The company has stared down the music industry, created a notoriously tough admissions process for its App Store and maintained high prices on its Macintosh computers despite every other computer company slashing prices.

There are some skeptics out there who think Apple may have gone too far this time.

"We’re clearly seeing a backlash brewing against Apple, analogous to the backlash against Facebook," said Adam Hanft, CEO of marketing firm Hanft Projects. "Think back to the famous 1984 commercial — in a way the tables have turned. Apple is now in control much more than IBM ever was."

The comparisons to "Big Brother" IBM are perhaps apt, but there is a big difference. IBM and Microsoft made computers and software that were built to support business customers, and eventually those products trickled down to consumers. Apple, on the other hand, has always put consumers first, which has bought it a whole lot of good will with its customers.

"Apple’s close attention to consumers gives it more latitude to play some of these dominant games than Microsoft or IBM ever had," said Christopher Collins, consumer research analyst at Yankee Group. "But that doesn’t mean if you rub people the wrong way, it won’t affect customer behavior in the long run."

Collins said Apple’s strong stance against Adobe Flash could lead people to other products, namely Google’s Android platform, which will support Flash in its next release. Flash support is needed to view a significant amount of content on the Web, including a large share of online videos.

ITIC’s DiDio, who recently conducted a survey of 500 Apple users, found that customers are clamoring for Flash support, but said they would continue to buy Apple products even without it.

IPad sales quickly topped 1 million in a matter of weeks, and the iPhone shows no signs of fading.

"People will vote with their feet," said Hanft. "Will they punish Apple? It’s doubtful. Do you know anyone who moved their accounts when there was all that populist outrage against the banks?"

(CNNMoney.com)

iPad Already Changing the Way Web Sites Are Built

610design — Mon, 05 Apr 2010 11:40:45 +0000

While much of the iPad rhetoric centers around it jumpstarting the nascent tablet market, the iPad is already having a wide-ranging effect on businesses before it has even been officially released. Already, many major media companies are changing the very way they build Web sites to accommodate Apple’s tablet.

The iPad presents a problem for many media-centric sites because it does not display Adobe Flash, a platform that runs much of the animations and interactive elements on sites, not to mention being the platform for nearly three-quarters of the video on the Web.

For sites that rely on Flash to create functionality, which includes nearly all of the major media businesses, iPad users won’t be able to view all of their content. When your business model is built on providing content, that’s a problem.

Normally a first generation device with these sorts of limitations wouldn’t worry major organizations, but this is Apple we’re talking about. The company that single-handedly threw the entire music industry on its head. Even though companies have no way to know just how much traffic they’ll be getting from the as-yet-to-be-released tablet, they’re confident it will be a big enough deal that they can afford to design entirely new Web sites specifically for the iPad.

Several major companies have already developed iPad-ready Web sites which will run alongside their current Flash-based sites for computer users. The New York Times will have an iPad version of its site. The Wall Street Journal is following suit, as is NPR Radio. These sites are also changing the layout of their content to better fit the iPad’s screen size and take advantage of its touchscreen navigation.

CBS has also reportedly been working on an iPad-friendly version of its video site so that iPad users can watch full episodes of CBS shows without needing Flash.

A video player platform called Brightcove has also developed a version of its software that is not Flash-based and that can run on the iPad. Many of Brightcove’s customers have specifically asked for solutions to iPad video problems.

“These customers are excited about the possibilities of the iPad, but they also have concerns about what it will take to deliver great video experiences in this environment,” said Jeff Whatcott, Senior Vice President of Marketing, on the Brightcove company blog.

Some of those very customers, such as the New York Times and Time magazine, are using Brightcove as part of their full transition, while other sites will simply use the Brightcove player to play iPad-friendly video on their current pages.

Considering the amount of time and effort that goes into designing, coding and maintaining a completely separate version of a site, this is a major vote of confidence in the iPad.

Of course, this transition away from Flash has been a long time coming. The iPad is only the catalyst. The most common solution for converting to non-Flash sites is the latest form of code called HTML5. HTML has been the foundation of the Internet for nearly two decades and the latest update to the platform, HTML5, institutes many features that render Flash unnecessary.

There has been a push to convert to HTML5 for a couple years and for several reasons, less Flash dependence being one of them. The conversion to HTML5 has been slow because sites have invested so much time and effort into other platforms, such as Flash, and previous versions of HTML. The iPad is turning into just the kind of incentive many companies need to make the jump.

Even YouTube, which has a dedicated app on the iPad home screen to circumvent Flash, has been toying with HTML5.

There are other benefits beyond iPad traffic for companies to consider, too. For instance, HTML5 will make it possible for many other devices, most notably the iPhone and other smartphones, to view full Web pages without Flash. That would eliminate the need for many companies to maintain separate sites for mobile devices.

Web design expert Jeffrey Zeldman pointed out on his site that the pressure from Apple to convert to HTML5 is a good thing, even for non-mobile sites.

“Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first,” Zeldman said.

When considering the amount of growth that sites have seen and will continue to see in mobile traffic, the iPad may just be the first of many reasons to rebuild.

As John Gruber, noted tech pundit, put it: “If you think people using iPhone OS devices [including the iPad] are an important segment of your intended audience, you can no longer build a Flash-dependent web site. (And if you don’t think people using iPhone OS devices are an important segment of your intended audience, you’re probably wrong.)”

Source: Dan Hope TechNewsDaily LiveScience.com Dan Hope

Behind the Adobe-Apple cold war

610design — Mon, 01 Feb 2010 12:37:58 +0000

(Source: CNN Money): If you were watching Steve Jobs’ iPad demo closely Wednesday, you would have seen it briefly as he showed off the device’s Web-surfing chops: the blue Lego of death. For everyone who has tried to play Farmville on an iPhone, or watch Hulu on an iPod Touch, the little blue icon is already familiar. It signifies that Adobe’s Flash plug-in is not on the device, and that no matter how many times you try to load that game or video it just ain’t going to work.

For those who live their life on the Web, Apple’s seemingly resolute refusal to put Flash on its mobile devices (it works just fine on Apple’s notebook and desktop computers) is a bit of mystery. Flash has become ubiquitous on the Internet, providing the software environment for tens of thousands of online games, and millions of video streams, as well as those annoying animations that ask if you would like to “skip intro.”

Rumors crop up every time the iPhone gets a refresh that Flash is coming, and then, like some awkward kid passed up at the school dance by the most sparkling student on the planet, Adobe’s Flash gets left out. As with all things Apple (AAPL), no real explanation has been made by Jobs or his team as to why they prefer to give Flash the brushoff. “We have regular conversations with Apple,” says Adrian Ludwig, Adobe’s group product marketing manager Flash platform. “That specific question has never been answered.”

But of course, this being an Apple-obsessed world, there are numerous theories as to why Apple keeps snubbing Adobe’s Flash platform. The common theme in all of them: control. By letting Flash onto its devices, Apple cedes some aspect of control, and in the company that Jobs has built magnificently as control freak in chief, that apparently, does not fly.

For Adobe (ADBE), here are the hurdles the company faces in getting its all-important technology onto the most talked about devices:

Flash hasn’t kept up with the times

The technology was developed originally as a so-called “runtime environment” in the PC world, and that means it grew up running on Intel’s X86 chip architecture. Why that is important in today’s mobile world is that most mobile gadgets, including the iPhone and presumably the iPad, use a different chip architecture: ARM. And current versions of Flash have problems running on ARM. “It’s a question of balancing power management, performance and memory allocation,” says a mobile developer very familiar with the issue.

Flash is a drain

Flash looks pretty, but, largely because it’s not native to ARM, the technology demands an outsize chunk of the semiconductor’s cycles. That means that running Flash on a mobile device can affect how long the battery lasts, whether the video is more like a slide show than a movie, and whether anything else can be happening in the background while you play a game. Jobs isn’t about to let some other company’s technology take the iPad’s claimed 10-hour battery life down to five. And if the device sputters every time it shows a moving image, Apple’s user experience — for which Apple can charge more than its competitors — gets put at risk. Adobe’s Ludwig denies these are insurmountable technical problems, and he may have something there.

Flash challenges Apple’s business model

Apple makes devices that consumers drool over — but they also have figured out how to get into people’s pocketbooks in a way that businesses drool over. Apple’s iPhone App store, and the iTunes store have been incredible successes (and Apple is counting on the same riches to come with the planned iBook store). If Flash were allowed on the iPhone or the iPad, software developers would have free rein to sell apps directly to consumers, bypassing Apple’s shops and Apple’s cut of the sale. If Flash were on the iPhone, you could watch Hulu and play games on Mini-Clip rather than buying movies from iTunes or buying games from the App store. (Adobe is also getting ready to launch a workaround that lets the 2 million or so Flash developers out there easily convert their applications for the iPhone, iPod and now iPad — but they will still be approved by and sold through Apple.) Flash breaks down the control Apple has over what gets on its devices and who gets paid for it. Which brings us to the porn theory.

Flash opens up a market that Apple and its wireless partners don’t want to enter

The vast majority of porn is streamed using — you guessed it — Flash. Apple is keeping Flash out, this segment of theorists contend, because it doesn’t want its devices to be the best porn products on the planet. Not to mention the network problems it might cause. It’s bad enough with simple web-surfing to get your iPhone to work in San Francisco and New York, if everyone were watching streaming skin flicks in HD, you can imagine that AT&T (T) would simply be unusable.

Apple is developing its own competitor to Flash

This one hasn’t progressed past pure conjecture. But considering how much control it would give Apple in content, across the devices and across the Web, it seems possible. And control, to Apple, is always a good thing.

Adobe is set to release Flash 10.1 some time this year, and pretty much every mobile device or mobile operating system maker, including Research in Motion (RIMM), Samsung, Palm (PALM), and Google (GOOG), is prepping their devices for the upgraded Flash. Very soon, practically every new smartphone on the planet, and all those iPad wannabes coming out, will run Flash. So technically, it seems, it’s possible.

The truth about why Apple seems to hate Adobe is probably a bit of the technical with a lot of the business model reason thrown in. Flash is not good for Apple’s business, it pokes holes in the perfect ecosystem that Jobs and his team have built. When every other mobile device has Flash built in, will Apple be forced to make nice with Flash? Perhaps, but until then, you can expect Apple to keep ignoring Adobe.

iPad – Beauty or Bust

610design — Fri, 29 Jan 2010 21:05:17 +0000

There is no question, that when Apple sets out to design something they go all out. In fact some might argue that people by Apple products, not because of their technological potential but because of their design. On Wednesday Apple CEO Steve Jobs announced the next big thing for Apple, the iPad. The iPad looks much like an iPhone on steroids.

Apple is calling the iPad, “Our most advanced technology in a magical and revolutionary device at an unbelievable price!”

I personally like the iPad and was wowed by the technology, however I’ll most likely wait to purchase one until the second generation. But we are wondering what people think about it, while this be the next iPhone or iPod for Apple or will it be more like Apple TV.

We have put together a list of Pros and Cons

Pros

Price
Apps
Slick iPhone Design
iWorks
iBooks
Not contractual data plan
Large Screen

Cons

No Camera
No Flash Application support
No Background Applications
No Phone Option
No USB/HDMI Cables
The Name

Time will tell if the iPad will be a thing of beauty Apple can add to it’s list of accomplishments or if it will be a bust like Apple TV.