At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.
WordPress & User Experience - WordCamp LondonSara Cannon
WordPress has a long standing history of providing a good user experience. Publishers, site owners, content editors, all have been able to benefit from the ease of use of the admin. In this talk, we’re going to take a deeper look into the experience of the WordPress admin – how we can extend WordPress to make publishing content a breeze, and how a few changes to the way we approach the admin, plugins, and themes can help make the experience even better.WordPress has a long standing history of providing a good user experience. Publishers, site owners, content editors, all have been able to benefit from the ease of use of the admin. In this talk, we’re going to take a deeper look into the experience of the WordPress admin – how we can extend WordPress to make publishing content a breeze, and how a few changes to the way we approach the admin, plugins, and themes can help make the experience even better.
// talk given at WordCamp Chicago 2014 //
Fast, simple, SMART. Mobile devices have forever changed the way we interact with content. Now we have to consider many things such as HiDPI graphics, responsive design, speed, UI/UX patterns, touch target sizes, gestures, and more. All while not losing track of what’s important: Content.
We’re going to discuss the influence of mobile on design trends and learn implementation techniques of smart design such as icon fonts, svg, and other helpful tips.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Developing AIR for Android with Flash Professional CS5Chris Griffith
New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for Android application from design to deployment. Chris Griffith will show you how he designed and built the application using a variety of tools and techniques.
At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.
WordPress & User Experience - WordCamp LondonSara Cannon
WordPress has a long standing history of providing a good user experience. Publishers, site owners, content editors, all have been able to benefit from the ease of use of the admin. In this talk, we’re going to take a deeper look into the experience of the WordPress admin – how we can extend WordPress to make publishing content a breeze, and how a few changes to the way we approach the admin, plugins, and themes can help make the experience even better.WordPress has a long standing history of providing a good user experience. Publishers, site owners, content editors, all have been able to benefit from the ease of use of the admin. In this talk, we’re going to take a deeper look into the experience of the WordPress admin – how we can extend WordPress to make publishing content a breeze, and how a few changes to the way we approach the admin, plugins, and themes can help make the experience even better.
// talk given at WordCamp Chicago 2014 //
Fast, simple, SMART. Mobile devices have forever changed the way we interact with content. Now we have to consider many things such as HiDPI graphics, responsive design, speed, UI/UX patterns, touch target sizes, gestures, and more. All while not losing track of what’s important: Content.
We’re going to discuss the influence of mobile on design trends and learn implementation techniques of smart design such as icon fonts, svg, and other helpful tips.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Developing AIR for Android with Flash Professional CS5Chris Griffith
New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for Android application from design to deployment. Chris Griffith will show you how he designed and built the application using a variety of tools and techniques.
Choosing the Right Mobile Development Platform (Part 2)Chris Griffith
As more and more projects are requiring mobile applications, developers are faced with a wide range of options. AIR for mobile? PhoneGap? Titanium's Appcelerator? Sencha? Native? Which development environment makes sense? This session will explore the advantages and limitations of each of these environments from someone who has been in the mobile application development world for over 4 years. Get a clear picture of what these technologies can offer for your mobile development needs.
Create an Animated Navigation Bar - Edge Animate TutorialJason Hill
This tutorial will guide the user step by step in creating an interactive navigation bar using Edge Animate. This navigation bar is specifically for use at the top of websites. The user will have the freedom of selecting what the navigation bar will look like, and where the links/buttons will be directed.
http://sites.google.com/site/edgenavbar/
Evaluating ways to generate revenue from the Adobe Integrated Runtime. Specifically, it examines the business potential of Adobe AIR from the perspective of an RIA developer. We will show lots of examples and examine best practices for design and GUI with Adobe Air 2.0.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
This session will cover:
Getting started with the PhoneGap API
Interacting with the native device features (camera, video)
Accessing and using the geolocation sensors
Compiling the application using PhoneGap Build
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
The talk will cover how to effectively build a production-ready, full-stack app with Golang and GCP under time constraints. I'll discuss how to approach making quick and sound technical decisions and how to apply modern software engineering practices for end-to-end apps. The presentation shows, in an opinionated and "meme-ful" way, various lessons learned, tools, and key takeaways for cloud environments.
Choosing the Right Mobile Development Platform (Part 2)Chris Griffith
As more and more projects are requiring mobile applications, developers are faced with a wide range of options. AIR for mobile? PhoneGap? Titanium's Appcelerator? Sencha? Native? Which development environment makes sense? This session will explore the advantages and limitations of each of these environments from someone who has been in the mobile application development world for over 4 years. Get a clear picture of what these technologies can offer for your mobile development needs.
Create an Animated Navigation Bar - Edge Animate TutorialJason Hill
This tutorial will guide the user step by step in creating an interactive navigation bar using Edge Animate. This navigation bar is specifically for use at the top of websites. The user will have the freedom of selecting what the navigation bar will look like, and where the links/buttons will be directed.
http://sites.google.com/site/edgenavbar/
Evaluating ways to generate revenue from the Adobe Integrated Runtime. Specifically, it examines the business potential of Adobe AIR from the perspective of an RIA developer. We will show lots of examples and examine best practices for design and GUI with Adobe Air 2.0.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
This session will cover:
Getting started with the PhoneGap API
Interacting with the native device features (camera, video)
Accessing and using the geolocation sensors
Compiling the application using PhoneGap Build
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
The talk will cover how to effectively build a production-ready, full-stack app with Golang and GCP under time constraints. I'll discuss how to approach making quick and sound technical decisions and how to apply modern software engineering practices for end-to-end apps. The presentation shows, in an opinionated and "meme-ful" way, various lessons learned, tools, and key takeaways for cloud environments.
Everybody knows Javascript is single-threaded and that it shares this same thread with other browser-related processes such as painting and compositing. There are several techniques to implement pseudo multithreading in JavaScript; however, during this talk we will focus our attention on how to use and debug the Service Worker API. Our end goal is to explore practical use cases in order to simplify the process to render complex user interfaces and transitions in a browser.
The development of a product from the point of view of a technician, starting from the concept, passing to the minimum viable till a management of a fully operational and deployed app.
JavaScript is the most widely used language cross platforms. This talk will analyze the security concerns from past to present with a peek to the future of this important language. This talk was presented as Keynote at CyberCamp Espana 2014.
Todays web front-end applications architecture. All resources shared at the end of presentation.
Full sources on:
https://lnkd.in/gyQuFKK
https://lnkd.in/gZK8Sp3
Slides for an introductory workshop on cloud computing for a web app developer audience at FOWA Miami 09 (http://events.carsonified.com/fowa/2009/miami/workshops#workshop_36)
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
Learn about Angular best practices to improve the performance of your existing Angular application. Tried and tested clean code checklist for your Angular app.
In the times of rapid app development, we need better ways to quickly develop interactive web applications and that is where JavaScript frameworks such as angularJS come to the rescue. The slides discuss how the tech stack evolved, the architectural concepts behind them and the usage of such frameworks along-with few other technologies to use together
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
The slides from our presentation on responsive web design using the StockTwits site as a case study. No audio, but feel free to contact us for more information regarding this deck.
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.
Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:
- learn what a mobile framework is.
- acquire best practices in mobile Web development.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.
- recognize the differences between native and web apps.
- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.
- gain access after the webinar to a free Web server so you can see your mobile Web app live.
Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
Similar to Angular js mobile jsday 2014 - Verona 14 may (20)
19. LAYOUT / MEDIA QUERIES
Mediaqueries are filters thatcan be applied to CSS styles.
Theymake iteasyto change styles based on the device, including
the displaytype, width, height, orientation and even resolution.
20. LAYOUT / SET YOUR VIEWPORT
<metaname="viewport"content="initial-scale=1,
maximum-scale=1,
user-scalable=no,
width=device-width">
28. IMAGES / RESPONSIVE
Should I use srcset attribute or picture element?
Tryask those guys:
Maybe using for apicture elementpolyfill
or aBBC solution:
<imgsrc="fallback.jpg"srcset="photo.jpg1x,photo-hd.jpg2x">
<picture>
<sourcemedia="(min-width:40em)"srcset="big.jpg1x,big-hd.jpg2x">
<sourcesrcset="small.jpg1x,small-hd.jpg2x">
<imgsrc="fallback.jpg">
</picture>
responsiveimages.org
picturefill
Images.js
29. IMAGES / RESPONSIVE
our solution (the concept):
<imgng-src="//ourCdn.tld/imageName-{{deviceSize}}.jpg">
30. FEATURES
You can use to provide differentcontentor
behaviours (think aboutmouseover on atouch onlydevice!)
Modernizr
Butdon'tforgetto provied (expeciallyfor IE)polyfills
37. UX INSTANT FEEDBACK
For a mobile user is not big difference using a website or an app.
Provide the UX with visual/audio feedback and loading routines will make the
user feelthe application is responsive to her input.
it's a library that help you addaudio events to UI.
For loaders &spinners give a look to:
Howler.js
the state of the spinner
SpinKit
39. REDUCE LATENCY
AVOID HTTP CALLS WHILE LOADING THE PAGE
Concatenate andminify html, CSSandJSfiles.
( and don't needthis)
Inline images in css ( or )
Use a single sprite for CSSUI ( )
Defer every not critical resource after the app is ready (social media plugin as
facebook, twitter, etc):
HTTP2 Spdy
grunt-base64 grunt-data-uri
glue
if(document.readyState === 'complete') {
//your code
}
angular.run(function() {
//your code
});
40. REDUCE LATENCY
AVOID HTTP CALLS
Paginate results.
If you are displaying a catalog page you can embed a small json with a bounce of
products in the document itself, andthen ask the API for next resources.
If your json is not that big you can also serve a large number of items and show on
the client only a bounce of them at the same time.
Paginate client side willgive a user the feeling of a super fast application.
41. REDUCE LATENCY
WITH ANGULARJS
AngularJs provide an internal cache service you can use to avoid multiple
requests of the same resource.
It's used, for example, to preloadtemplates with .
is a module to enhance the angular cache sistem.
Batching network requests to fetch data at the same time it's also good to save
battery.
grunt-angular-templates
angular-cache
42. CSS PERFORMANCES
SELECTORS
CSSselectors are readright to left
This mean you shouldavoidunnecessary ones
Nestedselectors are slow, even if more verbose is better to avoidthem
Yes, sadto say:you shouldavoidCSS3 selectors!
ul li.error { color: #fff; }
li.error { color: #fff; }
.li-error { color: #fff; }
43. CSS PERFORMANCES
SELECTORS BY PERFORMANCES
ID #header
Class .header
Tag div
Sibling div + p, div ~ p
Child div > p
Descendant div p
Universal div *
Attribute input[type="text"]
Pseudo p:first-child
46. JAVASCRIPT OPTIMIZATION
This is a long talk, but let me give you a quick tip: (well, angular
too!).
I strongly suggest you a couple of books: by
N.Zakas and by S. Souders.
it's a very rich resource on how to profile (using
Chrome Dev Tools) andoptimize.
use jQuery wisely
High Performance JavaScript
Even Faster WebSites
Google Performance Tips
47. THE CURSE OF 300MS
Mobile browsers will wait approximately 300ms from the time that you tap
something before firing the click event.
The reason for this is that the browser is waiting to see if you are actually
performing a double tap.
What to do?
Use FastClick
66. ANGULAR OPTIMIZATIONS
Release resources when you leave a scope
(for example when you change viewor remove a directive)
in particular remember to remove listeners.
$scope.$on('$destroy', function(){
// to release resources
});
67. ANGULAR FRIENDS
There are some modules to try out:
:to implement hammerJs gestures
:a simple touch carusel
:to snap everything in AngularJs
Anddon't forget you can stillimplement simple JSlibraries like:
or
angular-gestures
angular-carousel
angular-snap
swipeJs hammerJs
68. WHY NOT NGTOUCH?
Remember the course of 300ms?
Well, it only binds ngClick.
Then? Guess what! Use FastClick!
or Ionic...
69. STORAGE
Mobile device can easily lose connection.
You can use localStorageto cache the neededdata to make your website react
more like a native app.
localStoragehave some issues on Safari, you can fallback to cookies.
If you have cross domain cookie problems try to give a look at It's a
deprecatedlibrary we have usedto share cross domain securedcookies.
If your project is an hybridapp, you can also use sqlLite or other dbs.
xAuth.
70. HYBRID APPS
An "HybridApp" is an App buildin HTML, CSSandJSthat you can put in an App
Store.
Dealing with Html5 in a webView we can reuse our code
for both iOSAppStore
or Google Play Store
71. WHAT IS PHONEGAP / CORDOVA?
Fills the gap between browsers andnative device features
(geo-location, camera, accelerometers, push notificatuons).
72. WHY PHONEGAP / CORDOVA?
It's Opensource, cross platform anddevice neutral.
There are more webthan objective-C developers out there.
In 2011 PhoneGap source contributedto Apache Cordova
andAdobe aquires PhoneGap name &developers.
73. WHY PHONEGAP / CORDOVA?
It makes native mobile features accessible from javascript.
We can buildanddeploy fast.
Can be usedwith almost any webframework.
74. WHY PHONEGAP / CORDOVA?
We can debug iOs in safari andandroidwith chrome
75. WHAT'S BAD WITH PHONEGAP / CORDOVA?
Performance
(especially for intensive graphic on oldbrowsers)
76. PHONEGAP / CORDOVA TIPS
Don't callCordova (native) js functions untilafter devicereadyfires or
use .
Cordova javascript callbacks shouldemploy safeApply
(to prevent errors like $apply already in progress).
Very usefulis to check out apps buildwith angular:
angular-phonegap-ready
(search for "mobile" tag)
77. IONIC
As for Twitter Bootstrap,
Ionic is a complete framework
to buildperformant Apps
on top of AngularJs.
78. IONIC: INSTALL
The installation is similar to cordova, it needs :
and (or ).
Andthen the needednpm packages:
Ant
$ sudo apt-get -u install ant
androidSDK xCode
$ npm install -g cordova ionic
$ ionic start myApp tabs
$ cd myApp
79. IONIC: EMULATE
Emulate andbuildfor a platform is simple like that:
$ ionic platform add android
$ ionic build android
$ ionic emulate android
80. IONIC: LAYOUT
Ionic is fullof htmlcomponents.
Check out the , you willfindexamples of the available UIs.
I really like the .
Ionic Docs
html5 input types
82. IONIC: YEOMAN GENERATOR
There is also a Yeoman generator: generator-ionic
$ npm install -g generator-ionic
$ mkdir my-ionic-project && cd $_
$ yo ionic
$ grunt serve
86. APPGYVER: EMULATE
On your device:downloadAppGyver Scanner for iOS/ Android
On your computer launch the steroids server:
Connect your device to the same WLAN as your computer andscann the QR that
appear on the monitor.
You willbe able to test your project on your device in realtime.
$ steroids connect --watch
87. APPGYVER: TUTORIAL
If you wantto discover more aboutAppGyver trythe tutorial:
$steroidsgeneratetutorialbegin
89. SUMMARY
Think mobile first
Make itresponsive
Give Feedback
Avoid unnecessaryHTTP requests
Optimize images, CSS and JS
Test!
Use AngularJs (wisely)
Use localstorages to handle lose of connection
Go Hybrid usingAppGyver and Ionic on top of PhoneGap
90. REFERENCE / ARTICLES
Yeoman - Grunt - Bower
Ben Nadel:AngularJs experience
Responsive
Media Queries
Don't mess with viewport
Optimize Images
responsiveimages.org
Webp
The state of the spinner
HTTP2
Spdy
CSSanimations vs JS
Use jQuery wisely
ngNewsletter - mobile
High Performance JavaScript
Even Faster WebSites
Google Performance Tips
You have ruinedJavascript.
SafarilocalStorage nightmare
Mobile frameworks