A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.
Event page: https://www.facebook.com/events/296799847060237/
Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.
Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Talk about different experiences related with mobile web and the android webview. Native vs Hybrid. Drawbacks and benefits of native and hybrid applications
This presentation is based on the original one from the author of the book ( 'Steve Souders' ), it's about his book titled 'High Performance Websites''
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Talk about different experiences related with mobile web and the android webview. Native vs Hybrid. Drawbacks and benefits of native and hybrid applications
This presentation is based on the original one from the author of the book ( 'Steve Souders' ), it's about his book titled 'High Performance Websites''
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications.
http://www.dsvc.org/events/working-lunch/10/2012
With great power, comes great responsive-ability web design.
Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.
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.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
This is a presentation to review and summarize the mobile websites that I have involved in. It includes many practical skills and my own experiences in the development of mobile websites.
Responsive design is a combination of techniques aiming to create interfaces able to adapt to a wide range of devices, optimising the user experience in each of them but using the same code-base. But responsive design is not just about technology, as it also requires a different way of thinking and planning the development of interfaces.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
4. Source: Justin Avery (CC BY-SA 3.0)
Interfaces don’t have to
look the same everywhere.
TV already solved this problem.
5. “Android WebKit
is the closest thing to being
the IE6 of mobile development for me.”
Dion Almaer, A day in the life of Android WebKit dealings
http://www.flickr.com/photos/thebetancourts/899849126/
6. We know There are
features: constraints:
✦ screen size ✦ screen size
✦ local storage ✦ no touch
✦ touch ✦ poor JavaScript
✦ canvas ✦ no canvas
✦ SVG ✦ isMSIE
Hat tip: Yiibu
10. Party like it’s 1998!
<link rel="stylesheet" media="screen, projection" href="normal.css">
<link rel="stylesheet" media="print" href="print.css">
CSS2 media types
11. CSS3 Media Queries
<link rel="stylesheet" type="text/css"
href="example.css" media="screen and (color)">
Media type Expression
12. Better CSS3 Media Queries
Increase maintainability with @import:
@import url("example.css") screen and (color);
Save HTTP requests:
@media screen and (color) {
body { background: #f00; }
}
13. max/min
-width or
-device-width?
✦ former updates on orientation change, latter doesn’t
✦ only max/min-width will be visible in desktop browser
14. Detect high DPI screens
Just retina display:
<link rel="stylesheet"
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="highdpi.css" />
15. “Remove iPhone from ass.”
PPK, The iPhone obsession
http://www.flickr.com/photos/redux/5065152716/
16. Detect high DPI screens
Saves HTTP request, non-iOS-specific:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
17. Detect iPad orientation
<link rel="stylesheet"
media="all and (orientation: landscape)"
href="landscape.css">
<link rel="stylesheet"
media="all and (orientation: portrait)"
href="portrait.css">
18. Test it!
• Screenfly
• Responsive Design
Testing
• Responsive Design
Test Bookmarklet
22. Viewport demystified
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=500 Custom width setting
minimum-scale=1.0 Prevents from zooming out
maximum-scale=1.0 Prevents from zooming in. Useful with forms
user-scalable=no Use cautiously. Mostly for mobile-specific designs
27. Hiding address bar
After adding as a bookmark:
<meta name="apple-mobile-web-app-capable" content="yes">
Cross-browser solution:
https://github.com/scottjehl/Hide-Address-Bar
33. Load resources conditionally
The Boston Globe used the following methodology:
ASSETS DESIGN
depend on depends on
screen window
dimensions dimensions
60. 1. Complete plugins
✦ WPTouch
✦ Wordpress Mobile Pack
✦ MobilePress
WPTouch plugin used on
Stephen Fry’s website
61. 2. Responsive themes
✦ Twenty ten fully responsive
equivalent available
✦ List of responsive themes
at Free Themes Directory grows constantly
✦ Lots of responsive premium themes
on Forest, WooThemes and Themify
http://responsivetwentyten.com/
62. 3. Theme switchers
Theme switchers usually base on user agent sniffing
to serve users separate WordPress theme.
✦ Wordpress Mobile Pack
✦ Mobile Smart
✦ Device Theme Switcher
70. Building your pool of devices
✦ Analyze your website’s traffic
✦ Review the local platform landscape
✦ Check against device-specific factors
(form, screen size, performance, DPI)
✦ Compare with project-specific factors
(location-based?)
— Stephanie Rieger,
http://stephanierieger.com/strategies-for-choosing-test-devices/
71. Thanks!
Q&A
Wojtek Zając (@theanxy)
This work is licensed
http://www.slideshare.net/wojciechzajac under a Creative
Commons Attribution
3.0 Unported License
72. Credit where it’s due
Based on the brilliant research and works by:
• Scott Jehl • Matt Wilcox • Yiibu.com
• Patrick H. Lauke • Brad Frost
• Russ Weakley • Rachel McCollin
& others.
First slide photo: http://www.flickr.com/photos/johnmcnab/5758738799/
Stephanie Rieger: http://www.flickr.com/photos/29022619@N03/6116794697/