Responsive Web Design and PhoneGap

with Matt Gifford Liz Myers

Matt Gifford couldn’t make it and Liz Myers was able to give a good introduction to some of the Adobe products and features as well as the use of PhoneGap on an sample app, mentioning RWD in some parts or the presentation.

My notes on what I could grasp…

New nifty things: https://www.adobe.com/uk/products/ink-and-slide.html

Pricing on CC photography cloud $9.99 (what’s included?)
CC Students $19.99/mo

Mobile apps that work with above are free

On Photoshop CC – Improved layer comps (check if is applicable for current files, sometimes you don’t want to apply down)

Check new features in:

The app she created, out of passion for “true gelato” (looking forward to final version!!!), show genuine gelato shops around major cities: @2ScoopsApp – (The best gelato in London, Paris, Rome, NY) – Liz used: Photoshop, Illustrator, Edge Animate, Edge Code and Edge Inspector.

To test on the Chrome sometimes we have to go over security (She used Snippets app – I would probably use Github gists for free :))

Close Google Chrome and on terminal:
open -a Google\ Chrome --args --disable-web-security

Adobe Edge – Simon Midjaya
Check videos: http://tv.adobe.com/videos/simon-widjaja
Book: http://edgebuch.simonwidjaja.com/en/index.html

Liz was ‘evangelised’ by Blackberry and she used 80x80px to create icons on Illustrator…

Free Icons – http://myersdesign.com/icons (which are 81x81px maybe I misheard? :))

She suggested jQuery mobile (JQM) – getting latest stable version.
The jquery.mobile.structure-1.4.2.css file that comes with it has bare bones CSS, just enough to start with style from scratch (and “don’t look like jQuery mobile app”) but you don’t need to use the structure version if you don’t want to.

Go to demos – http://demos.jquerymobile.com/1.4.2 and explore the documentation together with examples of how they would look (1.4.2 was latest version at the time of writing); she mentioned the listview widget was used on the 2Scoops App. (Pro jQuery mobile book was also mentioned)

Opening Edge Code – Liz showed initial html declarations, highlight for ‘viewport’, then links to jQuery and CSS links…. there is a configure script that configure JQM – but she mentioned to me at the end of talk the use of ConfigGap to help with initial config file and it seems quite handy.

Edge Inspect – review their content across multiple mobile devices. Wirelessly pair multiple iOS and Android devices to your computer, grab screenshots from any connected device, and see real-time results from changes to HTML, CSS, and JavaScript.

Live Reload – monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Some observations:

  • Mobiles use fonts in 13pt as base, em font sizes are relative to that base. Some !important declarations might be needed to override JQM code if your style is not shown on the app.
  • RWD on the code using % and em - JQM with responsive design built in. If you need to go for fully RWD then media queries for more’breakpoints’ and landscape/portrait views may be needed.
  • Settings on PhoneGap allow defining devices, icons, splash screens, permissions and others.

Photos:

Many QR code scanners... One successful installation

Many QR code scanners… One successful installation

App created for various platforms on PhoneGap.

App created for various platforms on PhoneGap.

Liz Myers
https://twitter.com/lizmyers
http://myersdesign.com

Event: http://www.meetup.com/Digital-Creatives-Oxford/events/178764452

DigitalOxford

UXOxford with Nathan Ford and Fabio Carneiro

Nathan Ford – Connecting aesthetics and UX by focussing on the content

“Designing for everyone is designing for no one”

How to communicate for different types of people?

Their team tried: Waterfall, then Agile and what works now is “everything all the time” (EATT)
With all that happens to cope with RWD, basic principles of design still apply (typography, colour theory, etc.)

Concerns:
1. Workflow – who is doing and who is responsible for RWD
2. Testing (then test, test, test…)

Examples of problems with grids: sevens, drifters, pinches, giving up
Remember – as designers – to use type, colour and form.

Check Grid Systems book.

A more natural approach to fluid layout…
Idea of ‘content out’:

  1. Start with content
  2. Construct your layout from the content out.
  3. Bind the content to the device (in meaninful ways)

Harmonious proportions (in book design) of content within the page –> ratios

Connecting content
1. Constraints (check sizes, proportions, aspect ratios, fonts sizes)
2. Patterns (what type of site you are building?)

Relationships
build content with relationships instead with columns, using ratios.
Types of ratios: “Golden ratios”, 12 orthogons Quadrat (Square/Even) – 1:1 <--- many others here ---> Doppelquadrat (Halves) – 1:2

Check article: Composing the New Canon: Music, Harmony, Proportion – Owen Gregory

The formula: target/content = result (a further explanation/examples by A List Apart)

Example of relationship: text and image (example 27% / 73% approx ratio)

Using ratios instead of grid. Use ratio in general, then apply again for the internal/child elements. So, apply ratio for main layout then apply again for aside elements, other posts or highlights.

Connecting device
1. choose a ration and scale based on your content demands
2. build content grids for patterns
3. divide available viewport space with layout grids
4. (missed that one 🙁 )

Aljazeera.com.tr/?gridset=show (cmd + g to show/hide)

Chaparral website/layout created with grid based on height of lowcaps and highcaps letters and the delta in between them.
The font: Chaparral – https://typekit.com/fonts/chaparral-pro
The article: “Deriving layout from your typeface” http://blog.typekit.com/2014/02/26/deriving-layout-from-your-typeface/

http://Gridsetapp.com


Fabio Carneiro – Hard-won Lessons in Email Design
Neapolitan – Mailchimp new tool, with drag-and-drop ‘components’

So, why bother with responsiveness on email?

91% of people in EU own a mobile phone
majority of people (67%) send and receive email via mobile

30% of world have mobile internet

Incredibly fast mobile growth, need to adapt and be responsive for this demand.

User experience in email

“Cardinal rules”
Design within constraints
Email readers not supporting latests technologies (many of them strip headers, css, allow only inline styling)

Design for distraction

“one eyeball, one thumb and at arms’ length”

Making the experience easier and less interrupting for people, helps transmit a clearer message.

Design with purpose
In social media people ‘come to you’ for a message; in email, they trust you that you won’t fill their inboxes with ‘garbage’ and and transmit a focused, concise information message and sometimes, well-crafted images.
Examples of email types: selling or offers (sales/announcements usually with images); call for action (subscribe/attend/etc); reading emails (blog posts, news, etc.); transaction email (very specific finite amount of data, but with all the relevant information, appropriate – no space for jokes

Design for email
Do not bloat email with headers, navigation, loads of footer links and sharing elements. Make it simple, focused, related to interest of recipient (if possible – personal).

Building responsive emails

Modular pattern-base email – reduces the likelihood of email will break, reduce the amount of CSS.
Fabio maps out patterns (sketches) that have purpose on emails. He starts with scaffolding, in a Zendesk example we could see a header with company logo, social icons, then a ‘free form’ in the middle that any component/module can be inserted and footer has contact information/unsubscribe. Minimal, clean and uncluttered email.

Mobile first in email – most email clients don’t support media queries and/or max width – he worked with a table container with 100% width (not supported in Outlook), solution was to use conditional comments with a fixed width. Issues in OS still (Apple mail) that he solved with media queries (since it is webkit).

Table layout shifting – in emails you cannot use floats or positioning, to solve you can use a hack. Example, to use two columns on email, each column would be represented in a table, one after the other with their own width. The ‘hack’:

@media only screen and (max-width: 480px){
     table[class="templateBody"], table[class="templateSideblock"]{
display:block !important;
width:100% !important;
     }
}

Email design resources
Email Template Reference from MailChimp – http://templates.mailchimp.com

There is also a github repository with email templates https://github.com/mailchimp/Email-Blueprints

UX newsletter on mailchimp – http://www.theuxnewsletter.com

From SmashingConf, another templating resource that was mentioned: ZurbInk – http://zurb.com/ink/

Litmus community – forward emails to various email clients and send you back screenshots – https://litmus.com/email-community

Event link: http://www.meetup.com/UX-Oxford/events/165973222/

Sponsors:
WhiteOctober
Bunnyfoot – @bunnyfootsays
UXPA UK