This document provides an overview of HTML5 best practices for mobile design. It begins with introductions and outlines the session agenda. The presenter then discusses high-level principles like universal design and progressive enhancement. Specific techniques covered include viewport meta tags, media queries, scalable images, HTML5 tags, and touch-friendly guidelines. CSS topics include grids, backgrounds, gradients, and transitions. JavaScript behaviors like navigation, forms, and geolocation are also reviewed. Useful frameworks, polyfills, and testing tools are presented. The overall message is that mobile design requires an adaptive, user-centered approach through careful content structuring, responsive presentation, and unobtrusive behavior.
Responsive is the new buzzword!
The main idea here is to:
* kill the buzzword, and replace it with some accurate truth
* and talk about the very difficult industrialization of the wireframing process, and some ideas for solutions to it (experimental part!)
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way.
In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work.
Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Responsive is the new buzzword!
The main idea here is to:
* kill the buzzword, and replace it with some accurate truth
* and talk about the very difficult industrialization of the wireframing process, and some ideas for solutions to it (experimental part!)
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way.
In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work.
Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
See also:
This is demo movie.
- HTML5 for Mobile on Flash Lite
http://www.youtube.com/watch?v=HZURT3VxdRI
- HTML5 for Mobile on i-appli (NTT docomo)
http://www.youtube.com/watch?v=ZsPbMXzbmJE
- HTML5 for Mobile on iPhone
http://www.youtube.com/watch?v=zfjBMVgdozg
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.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
How to Project-Manage and Implement a Responsive Website
Marcos Corro, Designer & Developer Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts
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.
Atomic Design es una filosofía de creación de productos tecnológicos basada en la creación de elementos complejos utilizando elementos más sencillos. Pattern Lab es una plataforma basada en esta filosofía para crear sitios web con un diseño consistente. En esta presentación, explico un poco como funciona cada uno.
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.
See also:
This is demo movie.
- HTML5 for Mobile on Flash Lite
http://www.youtube.com/watch?v=HZURT3VxdRI
- HTML5 for Mobile on i-appli (NTT docomo)
http://www.youtube.com/watch?v=ZsPbMXzbmJE
- HTML5 for Mobile on iPhone
http://www.youtube.com/watch?v=zfjBMVgdozg
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.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
How to Project-Manage and Implement a Responsive Website
Marcos Corro, Designer & Developer Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts
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.
Atomic Design es una filosofía de creación de productos tecnológicos basada en la creación de elementos complejos utilizando elementos más sencillos. Pattern Lab es una plataforma basada en esta filosofía para crear sitios web con un diseño consistente. En esta presentación, explico un poco como funciona cada uno.
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.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
An overview of the reasons why or why not you might want to use CSS frameworks like Bootstrap, Foundation, Semantic UI, Pure or Skeleton on your projects.
A beginning presentation on Git with some diagrams used from git-scm.com. Actual presentation included a "live-action" demo of git i naction using the traditional book publishing model as an analogy.
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.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
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.
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.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
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.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
2. Who the heck are you?
Mario Noble ● web designer
● front end developer
"integrator"
● over ten years of
experience
● freelance/ company /
small and enterprise
● principal at Context
Multimedia and Mario
Noble Design
● organizer SCWDD
3. What this is and isn't
This is a medium dive
into "HTML 5"
practices for mobile.
This isn't
comprehensive guide
to everything
mobile/HTML5 nor a
guide on native mobile
app development. HTML5 = new Web 2.0?
4. Goals
● Give a mental model and
context
● Show/tour a basic
version in action
● Act as a guide to starting
points for research
● Inspire people to get
going or to be advocates
for a Universal approach
12. We're all now disabled
sometimes
● need scalable text ● unclear interfaces
● low bandwidth ● difficult data entry
● contrast problems ● cognitive overload
● video captioning ● coordination issues
13. Warning: Cliches ahead!
● Less is More.
● Form follows Function.
● In Crisis, Opportunity.
● KISS
21. Some context...
General Elements Tech Specifics
Structure HTML
Adaptation JS
Capability CSS
Polyfilling/ Fallbacks Frameworks
Performance Plugins
Testing Server side
22. Shared approaches
● Progressive enhancement
● Scaling content
● "Fat finger design"
● Contextual Adaptation (geo, time, offline
access, web workers)
● Gestures
● PNGs
● Utilizing CSS3 and HTML 5 over JavaScript
● Image sprites
23. Differing approaches
● Desktop polyfill support
● HTML5 / CSS 3 support
● Explicit permissions
● App store limits
● Vectors (SVG and Canvas)
● Webfonts
● Splash screens
● Security
● Form elements
34. Viewport meta tag
Include in your HEAD
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-
scale=1, maximum-scale=1">
used for iOS landscape/portrait fix - prevents
user zoom though
good reference on Mozilla Dev Network
35. @media breakpoints and
ranges
@media (min-width: 800px) { ... }
@media tv (min-width: 800px) { ... }
@media all and (max-width: 599px) {...}
@media (min-width: 800px) and (orientation: landscape) {
... }
@media all and (min-width: 481px) and (max-width: 799px)
{...}
A "mobile first" /LCD approach helps a lot!
Other parameters sometimes supported: aspect ratio,
resolution, monochrome
See MDN
36. Flip it good
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
Can be used to target iOS devices along with
their width as well.
37. @media queries
Bringing them in
Individual stylesheets:
<link rel='stylesheet' media='screen and (min-width: 801px)
and (max-width: 961px)' href='css/medium.css' />
Or embed inline
Or @import into parent stylesheet
example: @import url(red.css) (min-width:400px);
Best method: use @media in main stylesheets and/or
bring in during compile with preprocessors. Centralizes
styles and reduces http requests
38. HTML5 tags and ARIA roles
<HEAD> role="banner"
<NAV> role="navigation"
<SECTION> role="main" (new!)
<ARTICLE> role="complementary"
<ASIDE> role="search"
<FOOTER> role="contentinfo"
<HGROUP> use instead of a class
header[role="banner"]
Needs Shiv for IE < 9 {}
40. HTML Video
Too complex to go over here.
Use something like fitvids.js for scaling third
party embedded videos.
Useful resources if you want to roll your own:
https://developer.mozilla.org/en-
US/docs/HTML/Element/video
http://diveintohtml5.info/video.html
44. Pixels and rems
Font-size can be pixels for IE < 9 and rems
(root em) for everyone else
Root base size 14px
example:
.main-navigation {
font-size: 11px;
font-size: 0.785714286rem; /* 11/14 */
}
45. Beware of display:none
Many people think if they use display:none on
an element in css, the background won't load.
This is often wrong.
Great breakdown on timkadlec.com
There are ways:
1. display:none on the parent element
2. display:none within media queries
Not absolutely consistent in Fennec browser.
49. Grids
You can still use the 960 grid. However, you
may want to consider designing in 300px
"chunks" for easy linearization on small
screens.
320andup can use a 4 column layout which
covers many situations.
50. Rounded corners and
shadows!
#somediv {
-moz-border-radius: 18px;
border-radius: 18px;
box-shadow: 20px 20px 10px #CCC;
text-shadow: 1px 1px 1px #000;
}
52. CSS Gradients Cont.
Make your life easier. Use Colorzilla's gradient
generator, a preprocessor mixin or another tool:
http://www.colorzilla.com/gradient-editor/
53. Getting your percentage
Try to use percentages on columns for better scalability.
For Example:
@media tv (min-width: 1024px) {
#container {width:960;}
}
#mainContent {width: 60%;}
#sidebar{width: 40%;}
54. Transitions, Transforms
and Animation
Use them instead of JavaScript animations when possible
for better performance on mobile devices. Provide fallback
for older desktop environments when necessary.
Good resource: http://www.css3maker.com/
Example Transform:
#footer h1:focus { transform: translate(45px, -45px); }
works for scale, skew, rotate
Transitions properties over time:
#footer h1:focus { transition: color 0.2s ease-out;}
55. Transitions, Transforms
and Animation cont.
Animate over keyframes:
@webkit-keyframes 'appear' {
0% { opacity : 0; }
100% {opacity: 1;}
}
.someAnimTarget { -webkit-animation: 'appear' 300ms
ease-in 1 alternate 5s forwards}
As usual, keep in mind browser prefixs -web, -o, -moz
56. Floats and fixed
Complex floating doesn't always play well with
mobile/UD and smooth fixed positioning of
items is spotty in older versions of Android.
58. Navigation
Many different patterns
One of the most prominent is by the Filament
Group
Good rundown of current patterns
Brad Frost's Basic Patterns , Complex
I use a Return to Top in the footer and Sitemap
59. "Easy" Validation
If creating a mobile only site/app, HTML5 has
some great new form attributes for validation
and finer control.
Examples: required, pattern, autocomplete,
placeholder
See MDN for more examples
60. Modal hell
If you're using modals don't rely on the
close button. Enable close outside modal.
62. Reduce, reduce, reduce
Do all the things you should normally do to
optimize but actually do them.
Remember to minify code, gzip files, cache,
CDNs, image sprites and dynamic server side
image resizing where possible on
production/live sites.
63. Geolocation
Involves some javascript and the user's explicit
permission to allow you to use their location.
This also depends on their GPS and network
capabilities to determine where they are.
Fist detect for support using something like
modernizr.js then run a query against the
device.
You may need a fallback
64. Geolocation Cont.
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// this device isn't supporting it
}
}
Try geolocation.js for fallback alternative.
65. Caching
<html manifest="/yourcache. On Apaches set .
manifest"> htaccess file
AddType text/cache-
In that file:
manifest .manifest
ExpiresActive On
CACHE MANIFEST ExpiresDefault
# rev 54 "access"
myscript.js
css/mycss.css
only updated when rev# changes
66. Other great stuff to look
into.
Local Storage
Icon fonts
Canvas and SVG for scalable graphics
73. Herding Browser Cats
Modernizr
Feature Detection and basic html tag
fixes
along with Respond.js
Selectivzr
More comprehensive CSS3 support
CSS3 PIE for CSS3-like effects on IE
6-8
81. Skill set takeaway
● HTML5
● CSS3
● Preprocessors
● Content/Context User
Centered approach
● Progressive
enhancement attitude
● Fallback planning
● Willingness to Prioritize
and Test
● Get in deep with a
framework
82. To sum up
Mobile design and development can be both
challenging and rewarding.
Reach more people than ever before in more
contexts than ever.
The field is in flux but the reality is clear.
Something needs to be done.