Jonathan Jeter

Director of Application Development

Home Archives for media queries

Responsive Image Strategies – Front Porch Front-End Developer Conference, Dallas, TX

By Leave a Comment

Presented by Lindsey Norman

There are a lot of arguments and it is very complicated.

Scenario

Large retail client with a lot of imagery

Big Lesson #1: Responsive may seem old hat already, but it’s still new in a lot of organizations.

Responsive Web Design podcast

Big Lesson #2: Style Guides = awesome

Keeps everyone on the same page and is a reference point for changes.

Retina Revolution

  • Create image at 1.5 to 2 times larger than necessary and export at high compression

Percentage Crop

  • Full size for desktop, but crop for mobile
  • Involves moving the viewable area of image for smaller viewports
  • Addresses art direction use case
  • fast solution
  • easy to understand with minimal code

Creative team wanted more control with more crop sizes so created a Sass function

<picture> element allows to rearrange elements and show different sizes

Read the rest of Responsive Image Strategies – Front Porch Front-End Developer Conference, Dallas, TX

Adaptive Images for Responsive Web Design

By Leave a Comment



by Christopher Schmitt at HTML5 Texas Conference, Austin, Texas (Deck)

“The open web doesn’t stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays.In this session presented by Christopher Schmitt, we will work through tips and tricks to develop future friendly images in our sites and apps.”

Adaptive Images in Responsive Web Design

Think about the iPad, which presents so many design challenges. It can be wi-fi only or 3G, so bandwidth issues can be present. It has retina, so there can be display issues. When you design for web, you want to have great-looking images, but how do we get higher resolution images to those devices.

Why don’t we ask the browser? http://www.usearagentstring.com/ Available since the first browser Mozilla/1.0 (Win3.1), but browser put tons of stuff in the user agent string and can be spoofed. Instead of asking the browser, we do feature testing.

Read the rest of Adaptive Images for Responsive Web Design

Luke Wroblewski – Designing Mobile Web Experiences

By Leave a Comment

UIE Web App Master’s Tour – Seattle, Washington – May 24, 2011

Convincing Clients to Care

Luke Wroblewski - Designing Mobile Web Experiences
Luke Wroblewski - Designing Mobile Web Experiences

Prediction in 2009 that smartphones would outsell PCs in 2012, it happened in 2010.

Home usage of PC since 2008 has decreased 20%

November 2010 – visits to web-based email sites decreased 7% and people accessing email on mobile devices increased 36%

Twitter – 40% of all tweets are sent via mobile; 16% of new users start on mobile. Top 2 Twitter mobile clients – twitter.com, m.twitter.com, sms

Facebook – 33% of users use mobile via Facebook mobile website, and clients on phones

Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013

Shift from what was the personal computer (PC) to what is the personal computer (smart phone).

Capabilities & Constraints

Capabilities

Location Systems: GPS, WiFi, Cell Tower Triangulation

Read the rest of Luke Wroblewski – Designing Mobile Web Experiences