SenchaCon Day3: Theming SenchaTouch

David Kaneda gives this talk.

CSS3, SASS and Compass make theming wicked easy.

www.sass-lang.com and www.compass-style.org are good resources to check out for details on those topics.

config.rb is the file you use to configure locations and themes for Sencha.  SASS/Compass use Ruby to compile CSS.  You can also set the output_style as compressed or expanded for production and development, respectively.

myapp.scss is the file you define your SASS.  So define variables, import libs you’ll use and @include the components you’ll use. From there, you can define your custom rules.

Sencha has tons for variables.  $base-color and $base-gradient are really cool to change theme colors across the board.

Helpful mixins include background-gradient, color-by-background, bevel-by-background and mask-by-background.  The latter 3 will accept the background color and augment accordingly.

The “UI” attribute can be added to components that can allow you to customize.  Buttons commonly use this to change the style of buttons (e.g. back/fwd, square, round, small, etc.).  You can also customize your own buttons with a mixin as follows: @include sencha-button-ui(‘orange’,#ff8000, ‘glossy’) and to use  in your component set the UI attribute to ‘orange’. Same with @include sencha-toolbar-ui and sencha-tabbar-ui.

Icons: over 300+ icons available.  In SCSS use @include pictos-icon(‘refresh’) and then in the JS just use “xtype:’button’ iconCls: ‘refresh’ iconMask: true ui: drastic”.

Optimization tips: remove unused components (e.g., @include-top-tabs:false and/or comment components in .scss file), remove images, remove UIs and output_style to compressed.

From resources dir run compass compile scss to compile the sencha source.  You compile after each scss change.  There’s also a way to automate this Dave says.

styleHtmlContent: true controlled by x-html for custom styling of HTML attributes.

 

SenchaCon Day2: Designing for the Mobile Experience

Brian Fling gives talk on Designing for the Mobile Experience.

Brian starts off with a history lesson on Western civilization.  The Guttenberg press is how we came out of the dark ages but shows how knowledge is the essential component and it’s persistence and availability changes the human existence.

6 Rules for building amazing apps for the mobile and tablet:

  1. Understand the medium: phones are about making the most of the moment and its primary function is communication — sharing your experience in real time.  Tablets are about focus, consumption, simple tasks and portability over desktop computers.
  2. Getting your data dialed: 1 out 3 projects go sideways due to BAD DATA! Content is data! There is no Design without the Data. Brian actual starts with DB modeling versus UI design to understand the data.  #1 challenge with mobile experience is dealing with the “semantic web” where data can come from EVERYWHERE and is it push or pull! (See Pull).  Finally, figure how to push or pull data from its source before you begin.
  3. Be a Master of Context:  See “Context of Mobile Interaction” from David Crow. Ask, how to add value to the user’s context.  Requires insight into what the user is doing (PSYCH 101).
  4. Design for the Interaction: The thing they see is the medium, the Know is the context and the do is the action they perform. Lighting is becoming more important to give the impression of 3D to emote with the user (See Norman’s Emotional Design). In Maslow’s hierarchy of needs, what need does your experience fulfill? Fulfill down to the lower level to reach level above. Affect, behavior, and cognition are aspects to consider on the response of the user to your application.  Example is the “deck” in iTunes.
  5. Focus on the Details: The future is in the details.
  6. Allow for ample time: Forget the waterfall model and focus on a more iterative process where there’s more involvement of the designer up front but also some involvement of the developer.  They will intersect and transition involvement as the project moves into development.

Brian admit’s that it feels like it’s always the first day of school — he feels he doesn’t necessarily have the answer due to the changes in this medium.

SenchaCon Day2: Desktop User Experience

Glen Lipka from Marketo talks about how to optimize the desktop user experience in a fun presentation with lots of primates!

Get the unexpected wow when showing your app to achieve loyalty.

See Layout managers on the ExtJS docs to cover layouts.  Here are some highlights to consider.

  • Global Nav should have maybe 4-6 components max
  • Use TreeNav on the left side
  • Use tabs to show local navigation
  • Show toolbar to have actions inside that tab
  • Canvas is the main area from the treenav actions
  • Aux tools are action oriented things that go on the right side
  • The drawer goes at the bottom to use for charting to complement stuff on the canvas

Mashup desktop and Web apps to create the Webtop application.  Web = Fold.  Percent of viewing time is spent on content above the fold (avoid scrolling!).  Accordions are your friend for a crazy, busy form to keep it in the “fold”.

Owning UX is how you do the one thing you do well instead of how many options you have in an application.

You may have to take a few steps backward (i.e., invest in the technology) before things can get better.  Get to “Global Max” island requires you to get in the ocean to get off “Local Max” island.

The Halloween Principle suggests that users are constantly distracted to spend attention on your application, even if it’s completely spelled out.  He suggests that users are not being intentionally being stupid.

User research suggests that users our horrible judges of their own reality.  It is better to watch and learn what a user does to understand how to create an application for them.  You can’t validate an idea through a few people.

Users don’t read!  They skim at best.  Don’t expect them to read long instructions.  You can use some tricks by using humor or making the action “fun to use” with simple demos including 1-2 minute videos.

It’s the little things that matter in your app.  Lots of smaller features make a customer happy than 1 huge feature.

Nice additions include easter eggs, keyboard shortcuts, drag-n-drop, and details.

Referrals (see Crossing the Chasm) should come from evangelists that are big proponents for your product.

Don’t design for the advanced user but instead target the middle by saving clicks and making the app easy to use.

Remove system friction to help users reach their goals.  Users will thank you later for this.

80% rule – get them the majority of the things they want (see Paradox of Choice). Limit the cognitive load on users with too much crap on the page.

Engineers and designers are distinctly separate roles that must have a good relationship together.