Presented at Mobilism.nl
Device diversity is about to get an order of magnitude worse. SmartTVs are hitting the market in mass this year. Sony, LG, Vizio, and Samsung are all shipping televisions with Google TV built in.
And if the rumors that Apple will release a TV this year are true, 2012 will turn out to be the year web developers start to tackle the glass screen hanging on our walls.
Why should web developers focused on mobile learn about the web on TVs? Because TVs represent the next challenge in device proliferation. They share common characteristics with their smaller brethren. They create new challenges and opportunities we haven't encountered yet. And most importantly, learning how to build for TVs helps inform our practices of building for mobile devices.
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014Anna Dahlström
Slides from my three-part series Designing for Multiple Devices class run on the 20th of January with General Assembly in London.
The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.
This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.
Pokemon Woe: A Botched Rollout or AR Growing Pains?Doug MacFaddin
Pokemon Go launched last month to extreme popularity, but a recent software update and a crippling glitch have led some people to turn against the game.
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014Anna Dahlström
Slides from my three-part series Designing for Multiple Devices class run on the 20th of January with General Assembly in London.
The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.
This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.
Pokemon Woe: A Botched Rollout or AR Growing Pains?Doug MacFaddin
Pokemon Go launched last month to extreme popularity, but a recent software update and a crippling glitch have led some people to turn against the game.
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basicsJamie Andrei
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
An introduction to 360 video / VR basics, introducting the concept, several approach & technologies, through to 2x key 360 social platforms (fish where the fish are), through to a basic workflow & some hands on Google Cardboard demos.
Last week me and Stephen Thomas presented to our company's UXC Luncheon. This is a quarterly event open to all the different User Experience groups in the company. Our topic was upcoming trends in Design and technology. This is actually the fifth time I've presented a presentation like this one, starting back in 2005. While some trends are still developing, there are some new and interesting things that will shape the years to come.
From custom hardware to Android TV and beyond. A brief introduction on how to develop apps for Android TV using React Native.
Talk at Reat Native London Meetup - July 2019: https://youtu.be/wm56XCtMw40
Your boss has an iPhone, so of course he wants an app. But does an app really make business sense? Or is a responsive design website enough?
And with hundreds of thousands of apps out there, what will make people choose and use yours? What makes a good mobile user interface? And how can you make sure your company actually delivers one?
Responsive design might make sense if you've got a content driven website. But how should your web team work together when every web page they are making needs to work at any width and resolution? And can you get the content under control to make pages that really make sense on small screens and big ones?
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basicsJamie Andrei
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
An introduction to 360 video / VR basics, introducting the concept, several approach & technologies, through to 2x key 360 social platforms (fish where the fish are), through to a basic workflow & some hands on Google Cardboard demos.
Last week me and Stephen Thomas presented to our company's UXC Luncheon. This is a quarterly event open to all the different User Experience groups in the company. Our topic was upcoming trends in Design and technology. This is actually the fifth time I've presented a presentation like this one, starting back in 2005. While some trends are still developing, there are some new and interesting things that will shape the years to come.
From custom hardware to Android TV and beyond. A brief introduction on how to develop apps for Android TV using React Native.
Talk at Reat Native London Meetup - July 2019: https://youtu.be/wm56XCtMw40
Your boss has an iPhone, so of course he wants an app. But does an app really make business sense? Or is a responsive design website enough?
And with hundreds of thousands of apps out there, what will make people choose and use yours? What makes a good mobile user interface? And how can you make sure your company actually delivers one?
Responsive design might make sense if you've got a content driven website. But how should your web team work together when every web page they are making needs to work at any width and resolution? And can you get the content under control to make pages that really make sense on small screens and big ones?
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
Why Progressive Web Apps will transform your websiteJason Grigsby
* Cut through the PWA hype and learn why they really matter
* Discover incentives from Google and Microsoft including SEO benefits
* Learn how other companies have used PWAs to increase revenue
* Put together a high-level plan on converting your website to a PWA
Presented at Portland Digital Summit 2017
Is the buzz around Progressive Web Apps real or are they simply the latest fad? In this talk, you’ll learn exactly what Progressive Web Apps are, what problems they solve, and what new design challenges they present. Jason will show how organizations are using Progressive Web Apps to provide better and faster user experiences.
It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we've been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins. Learn how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints.
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
Windows 8. Chromebook Pixel. Ubuntu Phone. These devices shatter another consensual hallucination that we web developers have bought into: mobile = touch and desktop = keyboard and mouse.
We have tablets with keyboards; laptops that become tablets; laptops with touch screens; phones with physical keyboards; and even phones that become desktop computers. Not to mention new forms of input like cameras, voice control, and sensors.
We've learned how to respond to screen size. Our next challenge is learning how to adapt to different forms of input.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.
We're currently fighting for parity among experiences. We're arguing that the mobile version shouldn't be a dumbed down version of the desktop site.
But we've set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn't just match the desktop experience, it should exceed it.
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
A variation of my talk on mobile strategy given to Clark College to encourage students to pursue mobile and to encourage the college to adopt mobile curriculum.
Google Talk: DOs and DON'Ts of Mobile StrategyJason Grigsby
Presented at Google on October 8, 2010 as part of the Google Talks series.
Updated from previous presentations to talk about legacy content management systems and more ways our iPhone lens skews our perception of the world.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
16. People often use mobile while watching tv.
88% 86%
tablet smartphone
owners say they use their device while
watching TV at least once a month.
http://blog.nielsen.com/nielsenwire/online_mobile/double-vision-global-trends-in-tablet-
and-smartphone-use-while-watching-tv/
27. [People] “don’t want a computer on their
TV,” Apple CEO Steve Jobs said today.
“They have computers. They go to their
wide-screen TVs for entertainment. Not to
have another computer. This is a hard one for
people in the computer industry to
understand, but it's really easy for consumers
to understand. They get it.”
http://www.flickr.com/photos/acaben/541334636/
28. And so, it turns out people want keyboards. I
mean, when I started in this business one of
the biggest challenges was that people
couldn’t type.…
And if you do email of any volume, you gotta
have a keyboard. So we look at the tablet and
we think it’s gonna fail.
—Steve Jobs, 2003
http://www.flickr.com/photos/acaben/541334636/
36. Apps = Embedded Web Views =
http://www.flickr.com/photos/34818713@N00/1314251273/
37. Apps = Embedded Web Views = 3rd Party Browsers
http://www.flickr.com/photos/34818713@N00/1314251273/
38. Apps = Embedded Web Views = 3rd Party Browsers
If that is true, don’t you think Apple will ship Safari?
http://www.flickr.com/photos/34818713@N00/1314251273/
39. “By the summer of 2012, the
majority of the televisions you
see in stores will have Google
TV embedded in it”
Photo by JD Lasica/Socialmedia.biz
http://www.flickr.com/photos/jdlasica/5181380514/
50. Will Google TV follow Android’s path?
http://www.unwiredview.com/2011/12/21/andy-rubin-%E2%80%9Candroid-daily-activations-top-700k-a-day%E2%80%9D-on-the-way-to-1-million-a-day-in-q2-2012/
51. Considering
TVs helps
inform how
we build for
mobile.
http://www.flickr.com/photos/revdancatt/3789612273/
52. And can help us avoid
short-sighted solutions
http://www.flickr.com/photos/pss/4876189045/
90. The TV Context
Yes, I said “Context.”
http://www.flickr.com/photos/imnohero/2330548144
91. Our vision of mobile
context is often wrong.
http://www.flickr.com/photos/brunauto/5062644167/
92. 80% during
misc downtime
76% while
waiting in lines
62% while
watching TV
69% for point of
sale research
http://www.flickr.com/photos/missmeng/5327470961
99. Designing for a 10-foot UI
http://www.flickr.com/photos/chrisbartow/5835428673
100. Making text easy to read
Google Opera
• Limit paragraphs to 90 words • Minimum font size of 22px
• Break into small chunks • Line length: 10 words or less
• Line length: 5-7 words • Generous leading
• Body text around 21pt on 720p
and 28pt on 1080p
• Add more leading
101.
102. “A good rule of thumb is to increase the
size of an element (such as an image or
font) 1.5x for 720p and 2.0x for 1080p
relative to the size of that element in a
normal PC browser experience.”
—Google TV Guide
103. Optimize for tasks
Google Opera
• When designing a web page for • Primary activity often revolves
TV, the viewable area should around quick information look-
display less information overall, up (for instance, cast and crew
and what's there should focus on details for a particular movie,
a confined set of tasks (even weather reports, TV listings) and
consider performing their quick access to services. Web
desired task automatically or content for TV should therefore
select by default). be optimised — in terms of
overall presentation, navigation
and functionality — and task-
focused, giving quick and clear
access to all relevant features
and information.
106. “The main interface of Google TV encourages the
use of the D-pad on the remote to make selections
on a screen -- it's likely that users will keep this
habit even on the web.”
107. CSS3 Basic User Interface specification for
directional focus navigation
/* CSS */
#copyright {
nav-down: #logo;
}
http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/
110. Google TV jQuery UI Library
http://code.google.com/p/gtv-resources/
111. Unfortunately, I had trouble getting the Google TV
jQuery UI library to work on non-Google TVs.
Needs more testing.
112. Both solutions require adding a layer of CSS or JS
specifically to support TV interaction.
113. Performance Challenges
Google Opera
• Google TV may not be able to • Modest hardware. Somewhere
render a page as quickly as between high-end smart
your workstation. phones and low end laptops.
• Avoid overly heavy and
complex JavaScript.
• Avoid layering and opacity.
• Low limit on caching. Cannot
assume assets cached. Cannot
rely on cookies for subsequent
session.
115. Horizontal paging is preferred
http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
116. Supporting different screen resolutions
Google Opera
• Only HDTVs. • Most modern web-enabled
TVs support 1280×720 as a
• 720p and 1080i/p minimum resolution.
• 720p content is usually
• The exact pixel dimensions of upscaled
the display varies by TV
manufacturer. • Virtual resolutions — as an
example, the Nintendo Wii
• Provides an auto-zoom feature has a virtual width of 800
which you need to design for pixels. Height varies based on
or around. the type of TV (4:3 or 16:9
aspect ratio) and user settings.
125. Media types are useless except for screen and print.
https://twitter.com/#!/patrick_h_lauke/status/190078528568569856
https://twitter.com/#!/patrick_h_lauke/status/190078688287653889
126. Web developers are litter bugs.
http://www.flickr.com/photos/jpdaigle/3393858438/
132. Alright fine.
We’ll use device
detection.
http://www.flickr.com/photos/77799978@N00/5351372848/
133. User Agent String for a 2012 LG Smart TV
Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+
134. User Agent String for a 2012 LG Smart TV
Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+
Nothing we can use in that string!
135. That
sucks.
http://www.flickr.com/photos/plunkmasterknows/357836855/
140. Choosing responsiveness, as a characteristic
shouldn’t necessarily define the wider
implementation approach. Device
Experiences (i.e. standalone sites, aimed at a
group of devices) can also be responsive,
providing the flexibility to support a much
wider range of devices.
—Stephanie Rieger
141. No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED
320
DECEMBER 14, 2010 Search ALA
Smartphone Browser Landscape include discussions
by P E T E R - P A U L K O C H
Published in: User Interface Design , Mobile , Mobile Design , Mobile Development
Topics
Discuss this article » | Share this article » Code
Content
Culture
Design
Mobile
Process
User Science
Snapshot
Most web designers and
developers (not to
mention the entire
blogosphere) fall
squarely in the high-end
market. A cultural bias
Users expect websites to work on their mobile phones. In two to three years, mobile support
exists against OSs aimed
will become standard for any site. Web developers must add mobile web development to their at any other market. As
skill set or risk losing clients. a result, most people
focus on the struggle
How do you make websites mobile compatible? The answer is obvious: By testing them on all between iOS and
mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s Android, and ignore the
rest. This has to change.
impossible to test your designs on every mobile phone out there. Within the mobile phone
landscape, there are at least ten operating systems (OSs) and fifteen browsers that require
consideration. Mobile devices are expensive, and not every web developer can afford to buy
five to ten of them. Testing “on all mobile phones” is impossible for most web developers.
In this article, I’ll give you an overview of the mobile web market, as well as phone platforms
and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at
how to set up a mobile test bed. Stay in better touch with
customers with
142. “Testing on as many devices as possible is a great
idea in theory, but in practice it is untenable. Even if we
buy a few devices to try to cover more ground, they will be
outdated in just a few months or a year at most. So are we
supposed to buy multiple devices per year?”
posted at 11:32 am on December 14, 2010 by klayon
“If that’s the mobile landscape, I want no part of it.”
posted at 07:22 am on December 15, 2010 by Polsonby
http://www.alistapart.com/comments/smartphone-browser-landscape/
143. If you thought phones were bad,
You ain’t seen nothing yet!
144. Most stores have no remotes and no wi-fi
http://www.flickr.com/photos/elmada/1431918753/
145. Bring your phone for tethering to TVs
http://www.flickr.com/photos/bendodson/3367856091/
165. “Some people at Netflix have been arguing
for a single experience across all devices. This
has never born out in any kind of testing.
Instead, Netflix has a variety of experiences
on different devices and even regions.”
http://www.lukew.com/ff/entry.asp?1339
166. • User posture: Stationary, Lean back, on-the-go, shared
• Input capabilities: pointer/keyboard, LRUD/OSK,
Gesture/OSK
• Navigation style: controls & windows, panes
• Display capabilities: Hi-Res, near, far away, small,
medium, large
• These constraints are really powerful. You need to
embrace them to get to appropriate designs.
http://www.lukew.com/ff/entry.asp?1339
167. When we need more control to craft an experience for a
given device, how can we do so in a sustainable manner?
168. Yes, Smart TVs
suck right now.
http://www.flickr.com/photos/nathaninsandiego/4829858186/
173. So even if we don’t
have to design for
TVs today…
174. It behooves us to start thinking about and
planning for what it will be like to do so…
175. So we won’t build solutions
for today’s problems and
then find ourselves surprised
by what comes next.
Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
176.
177. Thank You!
Special thanks to Patrick H. Lauke, the
Google TV team, Flickr users sharing
under creative commons & the kind
folks at Beaverton Video Only.
Jason Grigsby
@grigs • cloudfour.com
Slides: bit.ly/immobilism
http://www.flickr.com/photos/sualk61/4083223760/
178. Get 40% off of the print and 50% off of ebook
version using code AUTHD at oreilly.com.
OR Amazon link (no code): http://bit.ly/hf-mw