Author: David Cochran

professor, geek, nerd, husband, dad

Apple vs. Android: The iPhone Fights Back

Apple vs. Android: The iPhone Fights Back

Graph: The iPhone Resurges, gaining market share in its competition with Android
In a recent survey of mobile phone consumers, Nielsen reports that a majority of mobile phone purchases are now smartphones. Additionally, they included this nice graphic which charts a resurgence of Apple’s iPhone, which has been gaining market share in recent months in its ongoing competition with Google’s Android platform.

From the article:

Android continues to be the most popular smartphone operating system, with 38 percent of smartphone consumers owning Android devices. However, while Android also leads among those who recently purchased a new smartphone, it is the Apple iPhone that has shown the most growth in recent months.

via In US, Smartphones Now Majority of New Cellphone Purchases | Nielsen Wire

iA Writer’s Typography and Color Scheme

For those who love iA’s Writer app, Justin Blanton has examined details of its visual and typographic design:

  • Background: f5f6f6 (rgb(245,246,246)) with a touch of noise
  • Font Color: #424242 (rgb(66,66,66))
  • Font: Nitti Light
  • Line Height / Leading: 1.5

Read more here: How to make any app look like iA’s Writer — Justin Blanton — Hypertext.net

3 Techniques to Serve Up Context Specific Images for Responsive Web Designs

For responsive web designers —

Chris Coyier lays out three currently experimental methods for serving specific images to a website user, depending on the user’s device: mobile, tablet, desktop.

The three he names include:

  1. CSS3 Image Replacement
  2. Javascript URL Rewrite
  3. PHP Cookie

Chris provides helpful links to more extensive discussions of these methods. It seems that each offers benefits and drawbacks. It will be interesting to watch this develop.

Techniques for Context Specific Images | CSS-Tricks

Using CSS Transitions to Smooth Media Queries

From Elliott Jay Stocks:

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

via CSS transitions & media queries » Blog » Elliot Jay Stocks.

Gridless: a CSS boilerplate for responsive websites

This looks worth checking out:

Gridless

“an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography”

Most responsive and adaptive HTML/CSS frameworks or boilerplates start with desktop styles and use media queries to serve mobile browsers the right layout. The problem is that most mobiles won’t respond to these media queries because they don’t support it. Also, using a polyfill like Respond.js will not give you any result because they are very limited devices and don’t even support JavaScript.

But Gridless uses a different approach: it uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes.

via Gridless – An awesome boilerplate for responsive, cross-browser websites.

Colleges Weigh Costs of Native Mobile Apps versus Web Apps

Colleges Weigh Costs of Native Mobile Apps versus Web Apps

The rise and challenge of multiple platforms
Consider the difficulty of developing mobile apps for all devices …

Remember 37signals’ Approach to the Basecamp App?

Many readers may have noted 37Signals’ decision to develop the mobile version of their popular Basecamp project management service as an HTML5 Web App. After having developed an iOS-native app for their Highrise application, they noted the fast rise of Android-based mobile devices. Rather than add an Android developer to their team, they opted to shift strategy. By developing the Basecamp app as a mobile web app, they made the app immediately accessible to a wide away of devices across multiple platforms. Continue reading “Colleges Weigh Costs of Native Mobile Apps versus Web Apps” →

Ethan Marcotte clarifies his definition of “Responsive Web Design”

In a recent post, Ethan Marcotte clarifies his definition of “Responsive Web Design”:

A responsive design is composed of three distinct parts:

  1. A flexible grid.
  2. Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
  3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.

See Ethan’s post, On being “responsive” — Unstoppable Robot Ninja.