Sencha Roadshow 2017: Mobile First or Desktop First

•

0 likes•570 views

Historically, web developers approached app development from the desktop first, and mobile was a secondary goal. Now with the extraordinary growth of mobile users across the globe, that approach is being reversed. Developers are building mobile first, and then making progressive enhancements so the app is available on desktop. In this presentation, we’ll explore the benefits of each approach.

Technology

Mobile First or Desktop First
Marc Gusmano
Senior Sales Engineer
marc.gusmano@sencha.com

Agenda
• Mobile First Approach
• Desktop First Approach
• Responsive Design
• Adaptive Design
• Universal Applications
• Coworkee
• Development Approach / Best Practices

Mobile First Approach
• Progressive Enhancements
• Put best foot forward on
mobile, and as need arises,
enhance progressively on
larger platforms

Desktop First Approach
• Graceful Degradations
• Build every feature you need
for the large screen, and scale
back (gradually remove
features) as viewport
becomes smaller

Progressive Enhancements Wins!
(start with minimal and focused features)
So, let’s go Mobile First…

And… Desktop is dead, 2+ billion
Mobile users worldwide
So, let’s go Mobile First… or why not Mobile Only

But… everyone is talking about
‘Responsive Design’
Designers, developers, stakeholders… everyone

Responsive Design
• Design for Desktop, and keep
Mobile in mind… feels like
porting desktop version to
mobile
• Practical Challenges
- Image resizing consumes CPU
- Unnecessary data download
- Media queries hide stuff on
mobile, not remove Not Mobile First – It’s one size fits all

Responsive Design – Resize/Hide/Reposition Widgets
Big desktop Small desktop

How about ‘Adaptive’?
• Device specific UX; detect
screen size, load appropriate
experience
• We can start with mobile (and
even ignore tablet to begin
with)
Image Source: http://www.pattronize.com/blog/

Adaptive Design – Distinct Layouts for Different Devices
Phone (list) Tablet (grid)

In U.S. alone, 25% of Web Users are
Mobile Only (rarely use Desktop)
Flip side… 75% aren’t

As of Jan 2015, WhatsApp is on
Desktop
Sure… they started with ‘Mobile First’ ☺

Today’s reality… users move from
device to device while interacting with
apps
Especially… business / enterprise apps

Bottom line… apps must provide a
quality user experience, no matter
what the device
Responsive, Adaptive… whatever works

But… no matter the design
approach…
As developers… you should always think…
Universal

Developers are expected to reuse
code…
Universal is about sharing code, and tailored UX

Sample Employee Directory App -
Coworkee

Coworkee (Employee Directory)
https://github.com/sencha-extjs-examples/Coworkee
22

Sencha Roadshow 2017: Mobile First or Desktop First

Developers are building mobile first, and then making progressive enhancements so the app is available on desktop. Should you be taking either a mobile or desktop first approach, or thinking about Universal Apps to deliver the right user experiences. This approach maximizes the shareability of code across these experiences. In this presentation, we’ll explore case studies that show the benefits of each approach.

Magnolia 5's new UX

Andreas Weder

ExtJS: La piattaforma vincente (multiple screens)

Eugenio Minardi

Simplifying End-user Drupal 7 Content Administration

Aidan Foster

These are the slides from Aidan Foster's Presentation at Drupal Camp Toronto 2011. Drupal 7 has many out of the box improvements to improve the experience of content administrators, and other non-developer users with the new seven theme and it's related Dashboard and Shortcut Modules. But at it's core Drupal 7's admin are is a developer's tool and really designed for content editors. This presentation showcases a case study of olympuspacific.com and how it customized content editor theme improved the editor experience using Views, Draggable Views, Media Management, Rules Modules Finally there's building the site with the features module so you don't have to do all this work from scratch each time.

What's New in Bootstrap 5

Jubair Ahmed Junjun

Sencha and Spring (Spring 2GX 2013)

Sencha

Titanium - A js based platform for building mobile apps

callmejoe

ExtJS: La piattaforma vincente (tools)

Eugenio Minardi

User interfaces often utilize components such as grids and tables to help users browse and understand data. Today’s large data sets require sophisticated capabilities to ensure users can effectively comprehend data while remaining flexible and responsive. Building this functionality is time consuming, has integration and maintenance risks, and worst of all, distracts developers from the task at hand -- actually building the app. View the slides from our latest webinar to learn how the web’s most powerful data grid and GraphQL can help you deliver advanced functionality with minimal effort. View the recording here: https://www.brighttalk.com/webcast/11505/276417

Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling

Sencha

JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. In this session, you'll see how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Sencha

Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...

Sencha

Learn Key Insights from The State of Web Application Testing Research Report

Sencha

In a recent study by Dimensional Research of 1,011 development and QA professionals, almost every survey respondent cited that application quality is important, with 84% believing it is very or critically important. Despite this, findings revealed that 94% of teams still face challenges when it comes to conducting adequate QA. View the presentation to learn why organizations must prioritize automated testing and QA practices to deliver high-quality applications and increase customer satisfaction.

Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing

Sencha

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

Sencha

Die Sicht auf große Datenmengen läßt sich in ExtJS auf zwei Wege darstellen – entweder durch Paging oder durch scrollen. Während beide Konzepte das selbe Ziel verfolgen, bringt die Implementierung eines Buffered Stores in ExtJS einige Hürden mit sich, die UI-Konzepte wie dynamisches Löschen oder Hinzufügen von Datensätzen verhindern. Diese Session gibt einen Einblick in den Aufbau eines BufferedStores und zeigt Ansätze, wie man mehr Dynamik in Grids bringen kann, die diesen Store verwenden.

SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

Sencha

LinkRest is an active project commissioned and open sourced by NHL under Apache 2.0 license. It was conceived specifically as the server-side counterpart to Ext JS, so it natively supports Ext JS rest proxy, including CRUD, grouping, sorting, filtering, and more. In this session, we'll review Ext JS protocol support. You'll also see extensions that allow the client to safely query the server for specific data and shape the response. We'll cover advanced features, including security, constraints, idempotent methods, and metadata service. We'll show demos and try to allow time for Q&A.

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Sencha

SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...

Sencha

It can be difficult for users to understand and modify workflow procedures in their applications. The job lifecycle of workflow-driven applications may change based on some specific procedures. We know that people can memorize images, shapes, and colors more easily than raw data. Using Ext JS Draw package, we created a dynamic, easy to use, workflow diagram modeler. We delivered a distinct solution that overcomes the challenges our users encountered. With our modeler, users can drag and drop, resize, label, and connect workflow steps with minimal effort. This ensures that users can visualize and design workflows in a more natural and innovative way.

Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd

Sencha

Learn how to use Ext JS and Cmd to deliver Progressive Web Applications to deliver the best of both web and mobile app experiences. Web apps can be found easily on the internet and every user is guaranteed access to the same and latest version of the application. Plus, mobile app capabilities, such as offline support and optimizing access to the underlying network using service workers, take the user experience to a whole new level.

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

Sencha

Learn about Sencha’s newest release, ExtReact: the most comprehensive set of components for React apps. Now you can quickly and easily add any of our 115+ professionally tested and supported components including grid, tree grid, pivot grid, charts, D3 visualizations, trees, calendar, buttons, menus and more to your React applications. With ExtReact, all of the components are designed to work together seamlessly which eliminates time-consuming integration work and reduces ongoing maintenance burdens. View this presentation to learn how to: - Build data-intensive, cross-platform web apps leveraging Sencha components and React. - Build immersive user engagement using layouts and adaptive design features. - Leverage material design and other themes to save time and effort. Modify or extend themes without writing a single line of code.

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha

Building Ext JS Using HATEOAS - Jeff Stano

Sencha

Newer REST-based APIs are starting to use HATEOAS, which stands for Hypermedia as the Engine of Application State. The central idea of HATEOAS is to allow the server to control the state transitions instead of hard coding all the links into the client. We've integrated a HATEOAS layer in the Ext JS framework based on the HAL standard (http://stateless.co/hal_specification.html) and into the Ext JS model and store system. We will be showing the techniques we used to accomplish this in a way that keeps the Ext JS model and store usage the same as the standard mechanism.

Ext JS Architecture Best Practices - Mitchell Simeons

Sencha

Sencha Roadshow 2017: What's New in Sencha Test

Sencha

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Sencha

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

Sencha

Ext JS provides easy-to-use charting components that satisfy common needs, but sometimes you want to deliver an exceptional, unique user experience. This presentation will discuss how Ext JS leverages the popular and extremely powerful D3 library to create sophisticated, data-driven visualizations. This functionality helps your users understand the story behind their data, so they can make informed decisions.

Mobile User Interface Designrita

Responsive Design and Joomla!

JoomlaChicago - Loop

MIMA 2014 - Changing your Responsive Design Workflow

easelsolutions

Presentation slides from Dustin Tauer's 2014 MIMA Session: What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design. This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.

Responsive Web Design

Scott Brandon

Viewers also liked

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Sencha

Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling

Sencha

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Sencha

Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...

Sencha

Learn Key Insights from The State of Web Application Testing Research Report

Sencha

Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing

Sencha

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

Sencha

SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

Sencha

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Sencha

SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...

Sencha

Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd

Sencha

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

Sencha

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha

Building Ext JS Using HATEOAS - Jeff Stano

Sencha

Ext JS Architecture Best Practices - Mitchell Simeons

Sencha

Sencha Roadshow 2017: What's New in Sencha Test

Sencha

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Sencha

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

Sencha

Viewers also liked (18)