Jordan Dobson Recent work by Jordan Dobson

Mobile

  1. Jive Views

    I built these pre-designed mobile web views using CSS3 & HTML for Webkit browsers on iOS, Android & Blackberry 6+ devices.

    The only images used are for the logo and for the colored icons. Any icons not in color are actually black & white and used as masks along with CSS layers & gradients for visual styling. This makes the app very theme-able.

  2. Loyola Open House App

    I built these pre-designed mobile web app using JavaScript, JSON, CSS3 & HTML for Webkit browsers on iOS, Android & Blackberry 6+ devices.

    The only image used in this app is the Loyola icon in the header. Everything else is created via CSS3. The app includes validation of HTML5 form inputs, pulls in JSON for event info and utilizes Google Maps to show maps for known venues.

  3. jQuery Mobile Alpha Theme

    The jQuery team asked me to design a secondary theme with five swatches for their first alpha release. To view my theme hit the Switch theme button at the bottom and select Valencia from the list.

    There were many constraints on what could be styled for the theme. It was also important, when designing the theme, to make sure all five swatches worked well with each other if their styles were intermixed.

  4. Push.io Views

    I built & designed these jQuery Mobile inspired mobile web views using CSS3 & HTML for Webkit browsers on iOS, Android & Blackberry 6+ devices.

    These views were designed with my interpretation of the pre-released jQuery Mobile designs. Push.io provided me with the general flow for the App. Check out the Options view for toggle switch animation and the Edit view for custom checkboxes styled in only CSS3. The only images used are for the attachment & viewed icons everything else is in CSS3.

Desktop

  1. The Red Hot Menu

    Andrew Kelly & I designed / built this single page site using PHP, CSS, HTML & the Glue CMS with support for the latest browsers & mobile devices. The page includes a few custom enhancements for IE 7 & 8 browsers to reproduce missing CSS3 effects.

    This tavern updates their beer menu almost daily so that was the main focus of this site. This site was built in 5 days from concept to completion.

  2. Andrew Freedman Public Relations

    Andrew Kelly & I designed / built this site using PHP, JavaScript, CSS, HTML & the Glue CMS with support for the latest browsers.

  3. Squad, Inc.

    I designed & built my comapany's site using PHP, JavaScript, CSS, HTML & the Glue CMS for support with the latest browsers.

    To allow the page to load quickly, the images aren't loaded until their group is selected. Images are pulled, via JavaScript, from the noscript tags which already exist on the page. If a user does not have JavaScript the all images inside the noscript tags will load.

  4. Hylyt

    Andrew Kelly & I built this page using Ruby, HTML, CSS3, JavaScript, Webkit Animations & the Emile.js Animation library for non Webkit browsers. We applied a mobile first / desktop second approach for defining the layout using media queries.

    This is hosted on Heroku using Sinatra for routing and Git for version control.

  5. Glue.Pro

    I created the animation scripts, added CSS3 effects & determined how to best resize the timer image / animation for cross browser support.

    This was a joint effort by our team. My role primarily involved jQuery integration and animation of elements.

Sandbox

  1. Vignette Photos with CSS3

    I put together a few different approaches to applying a vignette to a photo using CSS3 including a technique which combines a Webkit mask & a radial gradient.

    The only approach I didn't try here was using SVG + CSS masking technique availble in Firefox3.5+.

  2. Webkit Animated Dashed Borders

    Here are a few approaches I created to animate dashed borders in Webkit that would also degrade well for other browsers.

    A Webkit browser is required to view the animations in all three examples.

  3. Webkit Animated Resizeable Progress Indicator

    This is a loading indicator that I created with HTML & CSS3 to match that found in iOS. This is created with EMs so it resizes easily and is resolution independent.

    A Webkit browser is required to view the animation. This code is included in the current release of Sencha Touch. Only the Spinning indicator was built to be resizable.

  4. iOS Tab Bar Highlight Image

    I put together this walkthrough on how I created the highlight graphic used in a iOS Tab Bar using only CSS3 gradients.

    A Webkit browser is required to view the example.

  5. iOS Nav in Webkit CSS

    These are navigation buttons I created without any images to allow for easy skinning of apps.

    A Webkit browser is required.

  6. iOS Tab Bar Footer

    This is an example in CSS3 for webkit on how to build and style a footer using only a single greyscale PNG for a mask.

    A Webkit browser is requiredto view the example. View the source to see the code example.

Design

  1. Zenprise iPad App

    These are designs for an enterprise mobile management tool. It quickly can show you the overall health of the system and let you dive in quickly.

    These were all designed for landscape mode on the iPad.

  2. Other Designs

    Here you can find some samplings of designs I've worked on in the past

    For now this is where you can find most of my Glue screens.

Speaking

  1. Seattle.js

    I was invited to speak to 30+ people at Seattle.js in December 2010. My talk was mainly focused on Mobile design & using CSS3 features specific to Webkit. I also walked through & explained the process behind much of my recent work.

    A Webkit or Mozilla browser is required to view animations in between each of the slides.