Jonathan Jeter

Director of Application Development

Home Archives for Web Design

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

HTML5 Texas Recap

By Leave a Comment

HTML5 TX Conference 2013 Logo
HTML5 TX Conference 2013

The HTML5 Texas 2013 Conference was great! Here are notes, slides and other resources I collected.

My blog posts of sessions that I attended.

JavaScript Workshop by Pamela Fox

Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

By Leave a Comment

by Nathan Smith at HTML5 Texas in Austin, TX (Deck)

Have you ever found yourself needing to build static front-end templates, either as part of a larger project or as a way to communicate the nuances of responsive design to a client? I think we can all agree that just doing flat HTML leaves us wanting for more templating power.

But, using a dynamic language (PHP, Ruby, etc) typically means that it’s tougher to hand off to a client, who may (not) have a local development environment. That’s where Serve helps bridge the gap. It lets you play with the “”V”” of Rails MVC, but also export flat HTML for easy distribution.

Responsive Web Design

Designers can’t just throw stuff over the wall to the developers anymore

The deck says it all. Great stuff!

sass is to css what jQuery is to JavaScript

Read the rest of Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

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

I wanted to use Google Chrome to create this post, but I had to use Safari

By 8 Comments

I started using a MacBook Pro a few months ago and haven’t had many issues with the transition. I’m finally getting used to the differences in how the operating system works and all the differences that you find out about as you go. Overall, it has been a good experience with the exception of all of the problems I have had with fonts. I have a font manager installed with way too many fonts and so I’ve been trying to pare them down to something more usable, but keep running into issues.

WordPress Font Messed Up in Google Chrome on Mac
WordPress Font Messed Up in Google Chrome on Mac

The first issue I had was with the Arial font. It was installed, but not active (or something like that) and so sites using the Arial font ended up showing a serif font instead. As a web developer, it was a little frustrating, but wasn’t a great hindrance to browsing or productivity, however. After playing with the font manager for a while, I finally got Arial to show up.

Read the rest of I wanted to use Google Chrome to create this post, but I had to use Safari

A Brief History of the Complete Redesign of Google at #SXSW2012

By 2 Comments

Sunday, March 11 at South by Southwest Interactive Conference, Austin, TX
Google Panel Consisting of Evelyn Kim (Visual Designer for Maps), Jon Wiley (Lead Designer for Google Search), Michael Leggett (Design Lead, Google Apps & Gmail), Nicholas Jitkoff (User Experience Designer for Chrome), Chris Wiggins (Google Creative Lab)

The Evolution of Google Design

Google Kennedy Redesign of 2011

“So did Google just hire a bunch of designers recently, or were they all being kept in a cage all this time?” @tylerball

The process of this redesign is told in two stories. There is the story that you know about that happened in 2011, but most people don’t know the story of the redesign in 2007. 6 designers set out to express the Google brand that was consistent across all properties. It was called Kanna (Icelandic for “to explore, to examine”). Trying to find the balance between form and function, but mainly design and engineering. Looked at over 100 brand attributes that were narrowed down to 4 clusters.

Read the rest of A Brief History of the Complete Redesign of Google at #SXSW2012

High On Line: Applying Psychology to Web Design at #SXSW2012

By Leave a Comment

Sunday, March 11 2012 at South by Southwest, Austin, TX
by Jason Hreha, Behavior Designer+UX Advisor, Applied Psychologist, www.persuasive.ly, Co-founder of Dopamine, UX Advisor @ 500 Startups

Research from the StansfoJason Hreha - positive.lyrd Persuasive Tech Lab

D – dopamine

Why do we need a UX Design / Motivational framework?

  • Design with Intent Deck – 101 Patterns for Influencing Behaviour Through Design – decks
  • Mental Notes – ways to bring psychology to web design.
  • Influence: The Psycology of Persuation
  • Gamification – instead of thinking in a step by step way, it becomes a conglomeration of incentives, but what’s the point?

Why do these tactics work? What are we changing?

Model was created by BJ Fogg (leader of the Stanford Pers Lab) – Behavior Model

What causes behavior? (What needs to come together in order for behavior to occur?

3 things need to coincide for behavior to occur

Read the rest of High On Line: Applying Psychology to Web Design at #SXSW2012

Josh Clark – Mobile Apps: Native or Web-Based?

By Leave a Comment

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

Josh Clark (author of TapWorthy) – Mobile Apps-Native or Web-Based
Josh Clark – Mobile Apps-Native or Web-Based?

Josh Clark, Author of TapWorthy

Mobile Apps

Mobile is growing quickly, with many platforms (many cultures)

App design needs to take mobile culture into accounts, how to develop for a iPhone user vs Android user, etc.

Read the rest of Josh Clark – Mobile Apps: Native or Web-Based?

Blackberry still has 40% of the global enterprise

  • Text-centric
  • low browser activity (blackberry browser has sucked until recently, when they adopted webkit)
  • how does your app fit into a text heavy culture

iPhone

  • active
  • high browser activity
  • spenders (big buyers – 70% of ebays mobile commerce is iPhone; eBay accounts for 25% of mobile commerce)
  • older, wealthier
  • according to OKCupid, iPhone users have more sex

Android

  • it’s about the technology
  • it’s about tools and features
  • customization
  • cutting edge
  • technically-proficient, customized