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

Bluepages

The bluepages finally started to take more shape and direction after a couple of meetings with Sally and the team. The layout that inspired the initial design was the Really Wild Flowers website.

 

One of the documents that highlight the BRII blue pages layout considerations / ideas [google doc – need authorisation for viewing] can be read online for start.

 

The intial ‘blurb’ for the tabs can be found on the Bluepages content for website [google doc – need authorisation for viewing]

 

A very general idea was crated with the Balsamiq Mockups application and the screens created are below:

 

Homepage mockup

Homepage mockup

 

  • The Homepage had some alterations from the group, the search box on the top will include/assume basic search from People, Department and Projects.
  • The tab Advanced Search will be renamed to “Search by…” to make it easier and more obvious for the user
  • The tab How to Contribute will be aggregated to the tab “Add your data”
  • The main blurb on the page will be shorter, almost like a “punch line” for the Bluepages
  • Mouse over the Research Activity will open little ‘tooltip’ with more information about what is considered a Research activity (projects, contracts, grants, clinical trials, awards)

 

Browsing by People

Browsing by People mockup

 

Profile mockup

Profile mockup

 

  • The source of information is to be moved to the top of the page, to make it obvious where it came from
  • The reporting missing or incorrect information will have more functions (or more buttons, TBC)
  • Button “Do you know this person? Ask them to update their profile!”, “Is this you? Claim your profile!”

 

We have discussed a few features and functions that can be beneficial for the bluepages (atm only ideas and we’ll try to add as much as possible, but not 100% confirmed that all the features below will be on the final bluepages), information came from a list of features from existing systems:

 

  • Add your data – simple registration (name, login, email, pwd) then goes for the second step of webauth to add info in the registration form (entering more information on the profile).  First “edit” of the information through the web becomes ‘unverified’ until we do a manual verification of the profile.
  • One line – tweeter style – focus on the question: “What are you working on today?”
  • Allow owner of profile to attach web photo/avatar
  • Import colleagues/collaborators – allow user to mark collaborators that are in the Bluepages
  • Send invitation to colleagues / share this
  • Allow short / full profile and user to switch visibility of parts of his/hers profile
  • % of completeness (team to define which items will add to 100%) only shown to the profile owner when is logged in
  • Rank of contributors – mispelling corrections, etc.
  • ‘Contact this person’ link on profile – this will redirect to the Oxford contact list (link to search that result close matches) or to twitter account if person has one
  • Possible widgets like Dopplr, Flickr, Facebook, etc.
  • Faceted search, search by author/add author, all/any of these; refine your search/search again; search order/reorder results
  • Mouse over for more details on short descriptions/abstracts of publications, for example
  • Recent activity (searches done) – user can turn on/off and clear (this uses session information, so it will be reviewed in the future)
  • Subject areas (graph like) on department pages to see their breakdown
  • Department/group page – possible to send email to the administrator
  • Atom feed (alerts of changes on the profile, eg: new publications)
  • List of journals this person has published in (pretty graph? – Scopus style). Example: this person publish 3 articles on X journal, 10 papers in Y journal, 2 articles in Z journal.
  • Display of documents/books and publications (getting information from libraries and Amazon) – List8d project illustrate that, see the video below:

 

List8D from Mark Fendley on Vimeo.

Our submission for the Dev8D Developer Decathlon