This document discusses adaptive web design and its advantages over native apps. It covers key considerations like breakpoints, grids, input methods, and challenges of mobile-first design. The document recommends focusing on 3 breakpoints, using fluid percentage grids with fixed breakpoints, tailoring the UX for touch, and addressing issues with images, video, forms and tables through features detection and context-based solutions. The goal is to design adaptively while enhancing accessibility across devices.
Ambient Personalization (Personalisation) and Rich Internet MechanismsChris Khalil
One size doesn't fit all. This presentation examines how personalisation allows users to control their view of a site. As a case study it describes the redesign of news.com.au. Presented as an Advanced Session at OZ-IA Conference, Sydney Sept. 20th 2008
Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future.
Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.
Is Web Experience Management CMS 2.0, or is it just vendor hype?
This presentation busts the top five myths of WEM and shows you the essence of truth underneath the marketing hype.
Ambient Personalization (Personalisation) and Rich Internet MechanismsChris Khalil
One size doesn't fit all. This presentation examines how personalisation allows users to control their view of a site. As a case study it describes the redesign of news.com.au. Presented as an Advanced Session at OZ-IA Conference, Sydney Sept. 20th 2008
Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future.
Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.
Is Web Experience Management CMS 2.0, or is it just vendor hype?
This presentation busts the top five myths of WEM and shows you the essence of truth underneath the marketing hype.
Is the mobile web enabled or disabled by design?Henny Swan
A look at mobile accessibility drawing on comparisons and lessons learned from desktop as well as looking ahead at existing and emerging technologies that help developers ensure content is accessible across devices.
Building primary care infrastructure in rural Nepalnyayahealth
This is an overview of Nyaya Health's work in Nepal, starting with some basics of Nepal's health, economics, and history. This talk was given by Jason Andrews at UCSF/San Francisco General Hospital on 6/4/2009.
User Experience as an Integral Facet of Online MarketingCyber-Duck
Cyber-Duck presented this keynote presentation at Ad:Tech London 2009 to explain how an online marketing campaign for a website with little to no user experience planning is like simply throwing money away.
It explains our understanding of user experience (UX) design and optimisation, and how if implemented well, it could transform your business.
Is the mobile web enabled or disabled by design?Henny Swan
A look at mobile accessibility drawing on comparisons and lessons learned from desktop as well as looking ahead at existing and emerging technologies that help developers ensure content is accessible across devices.
Building primary care infrastructure in rural Nepalnyayahealth
This is an overview of Nyaya Health's work in Nepal, starting with some basics of Nepal's health, economics, and history. This talk was given by Jason Andrews at UCSF/San Francisco General Hospital on 6/4/2009.
User Experience as an Integral Facet of Online MarketingCyber-Duck
Cyber-Duck presented this keynote presentation at Ad:Tech London 2009 to explain how an online marketing campaign for a website with little to no user experience planning is like simply throwing money away.
It explains our understanding of user experience (UX) design and optimisation, and how if implemented well, it could transform your business.
A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.
For many web developers whose jobs don't allow them to play with all the newest technologies, something like responsive design can be just out of reach. As more users are surfing exclusively on mobile devices, these are skills every web developer, designer, and manager needs to develop. We'll walk through the background, assorted techniques, how to measure success, and where it's all going. This is not a coding session, but a planning and strategy session.
Designing for the web is no longer what it used to be.
The number of devices with web-browsing capabilities is
growing at an increasing speed.
RWD is an approach aimed to provide a solid viewing
experience for a multiple of screens with one set of code.
In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade.
When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge.
After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).
This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.
Rethinking accessibility related best practices for CSS in the modern ageshwetank
In the age of new trends in web design and CSS technologies like Flexbox and Grids, what do we need to think about when it comes to accessibility and CSS?
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
Presented with Christian Ståhl
Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”.
In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies.
A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.
Event page: https://www.facebook.com/events/296799847060237/
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.
Webinar Recording "Best Practices in RWD - Responsive Web Design"Sachin Katariya
Key Takeaways:
A> Understanding RWD: What exactly is Responsive Web Design – the philosophy, the concept
B> Techniques and tools for RWD - Details about Media queries and CSS as well as various frameworks and tools for creating RWD design
C> Advantages and Limitations in RWD
D> Conceptual Knowledge of Server Side Responsive Design (RESS)
Have Questions? - Please feel free to email sachink@harbingergroup.com
Sachin Katariya - Harbinger Systems
Measure Twice, Cut Once – Making Planning Scope of Work a Success.pdfCyber-Duck
Discover the presentation from our sixth episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
Building products people actually can use – why all developers need to unders...Cyber-Duck
Discover the presentation from our fifth episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
Building products people actually want to use – understanding the value of UXCyber-Duck
Discover the presentation from our fourth episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdfCyber-Duck
Discover the presentation from our third episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
You can watch the webinar on-demand here:
https://youtu.be/FjVpQFxOx0M
How developers can help deliver winning pitches and aid new businessCyber-Duck
Discover the presentation from our second episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
You can watch the webinar on-demand here: https://youtu.be/Jd9aaMMg3Ms
Code is not enough – why developers must wear multiple hatsCyber-Duck
Discover the presentation from our first episode in Cyber-Duck's new webinar series, Essential (Laravel) developer skills for successful end-to-end project delivery.
You can watch the webinar on-demand here: https://www.youtube.com/watch?v=dmFxdWKRNDk
Usability Lessons From National Healthcare AppsCyber-Duck
From our webinar, The Good, The Bad & The Ugly - Usability Lessons From National Healthcare Apps.
Discover our presentation for World Usability Day, as we shine a light on the impact of digitalisation on public health services, specifically through the lens of delivering great user experiences and better patient care with healthcare apps.
Delivering Fantastic Brand Experiences With Low-CodeCyber-Duck
From our Delivering Fantastic Brand Experiences With Low-Code Webinar on June 23rd 2022.
Utilising a low-code strategy and solution and enable businesses to better manage their website challenges, streamline slow development workflows and create better experiences for their customers.
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion RatesCyber-Duck
Presentation slides from Cyber-Duck's eCommerce and Accessibility Webinar: How Accessibility Can Boost Conversion Rates.
According to the 2019 Click-Away Pound report, 69% of disabled people with access needs will ‘click away’ from a website with accessibility barriers. The estimated value of this ‘click away’ spend is over £17 billion. This is without considering how non accessible websites often deter users without disabilities.
On October 26th, Cyber-Duck joined with BigCommerce for an exclusive webinar on how providing an accessible eCommerce site can help retail businesses succeed online and boost conversions.
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 MigrationCyber-Duck
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
For many businesses, the process of migrating a website from Drupal 7 to Drupal 9 can be extensive and expensive. But by adopting the right processes and tools, businesses can streamline and accelerate this task - allowing for more time to be dedicated to auditing, testing and website improvements.
On June 17th, Sylvain Reiter (Client Services Officer) and Liza Koroleva (Project Manager) from Cyber-Duck, and Dave Thomas (Senior Solutions Engineer) from Acquia, discussed how developers can implement a more advanced upgrade strategy for Drupal websites.
PDF Accessibility Webinar: The War on PDFsCyber-Duck
From our PDF Accessibility Webinar: The War on PDFs on April 29th 2021.
The battle to encourage businesses to shift away from PDFs has been a long one. As many of us know, PDFs can often be problematic for users with accessibility needs and rarely comply with open standards.
Videos from presentation:
- Baking in Accessibility Throughout the Project Lifecycle: https://www.youtube.com/watch?v=4ZaxyS4sYB4
- Stephen Fry Talks About Turning on the Subtitles: https://www.youtube.com/watch?v=I-zISnJ-oao
- Amazon Echo & Alexa - Morning Ritual: https://www.youtube.com/watch?v=rHsO-rXrLLo
From our Future of Content Strategy: Accessible, Personalised and SEO Friendly webinar on February 11th 2021.
Discover the Cyber-Duck way for establishing a future-proof content strategy that works at scale.
Our presentation from the DevOps CTO Masterclass
Businesses can drive many benefits from adopting DevOps – from streamlining timely tasks, to improving the stability of development and deployment. But you can only secure these through implementing the right strategy. Only that exercise can inspire your dev team towards success.
Cyber Duck were tasked with creating a website that demonstrated BAM’s core environmental ethos and work alongside sustainable design. The new website provides visitors with an immersive, vivid experience, and creating an original narrative around BAM’s sustainable ethos.
SilverStripe is a PHP web application framework and CMS that is comparable to WordPress and Joomla but it is leaner, more secure and enterprise ready. This presentations gives an overview of some of its features and includes a video demo.
Designing Better Experiences: Matt Gibson for Marketing Week Live 2015Cyber-Duck
Cyber-Duck's Chief Design Officer Matt Gibson spoke to Marketing Week Live's audience in April 2015 about user-centred design and how better experiences for our users means better business.
This talk will break some of the myths regarding pre-processors, and explain how they have help us to be more efficient when coding CSS. There are very influential people in the industry that have put down Sass, Less and Stylus after admitting publicly that they have not used them at all. These influencers have led certain developers to believe that “sass adds an abstraction layer to CSS”, “Output is messier than it should be” and that “developers don’t have control of the output”. The reality is that pre-processors are not any more complex than plain CSS and they output what you tell them to. In this talk I will argue that pre-processors are the way to go to boost front-end workflows and productivity. During the lecture, I will teach designers and developers how to get into CSS pre-processors with practical examples.
Designing Better Experiences - UX London 2013Cyber-Duck
Slides from the workshop @danny_bluestone and @duckymatt from Cyber-Duck Ltd gave at UX London 2013. The workshop focused on how by putting the user at the centre of design decisions you can deliver a better experience. With a mixture of theory and hands-on activities the workshop covered user research, activity mapping, card sorting and participative sketching techniques.
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
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.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
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.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
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.
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.
6. Speed, cost and scalability are the
biggest factors for choosing adaptive
websites or web apps rather than
native apps
http://www.flickr.com/photos/rubberdragon/6652378679
8. Designing for every device or
breakpoint?
Not only would this be
impossible but it is a pointless
and costly exercise.
Instead focus on key break
points that the design fluidly
adapts to.
http://www.flickr.com/photos/nnova/5022567963
9. What are my key breakpoints?
Well, who is your audience?
•Look at analytics
Pick key breakpoints that will still
enable a good user experience
on in-between devices/widths
10. Planning an adaptive layout
We went for 3 key breakpoints:
1024 – Desktop or tablet landscape
768 – Tablet portrait
320 - Mobile
12. Fluid percentage based grids
Fluid % based columns alone =
Columns / gutters become too narrow
13. Fixed width grids
Reducing / stacking columns alone =
Design only works on fixed widths
14. Better = Fluid grids with
fixed breakpoints
There are lightweight CSS grid
frameworks which already support this.
http://www.getskeleton.com http://csswizardry.com/inuitcss/ http://twitter.github.com/bootstrap/
http://foundation.zurb.com/ http://cssgrid.net/
15. Is using a responsive grid
on its own enough?
http://www.flickr.com/photos/kristiand/3223920178/sizes/m/in/photostre
am/
16. We need to
consider input
methods and
context
http://www.flickr.com/photos/kose/4143558754
18. Sensors
There are several options here:
•Media queries (CSS based on screen size/orientation)
•JS screen size detection
•JS feature detection
•User agent detection (back-end)
19. Media Queries VS JS validation VS UA (back-end)
Pros Pros Pros
•Easy •Can differentiate •Only serves exactly
•Powerful on client- more than just what’s needed
side screen size
•Helps interactivity
Cons
Cons Cons •Not easy to
•Support •Relies on JS implement and
•Accessibility? therefore more
•Cannot handle
costly
server calls •Not so easy to
implement •Browsers can fake it.
•Accessibility?
20. Challenges
• Mobile first?
• Images & video
• Forms
• Tables
http://www.flickr.com/photos/epublicist/3546059144
21. Designing for mobile first?
• Progressive enhancement is the ideal.
• Sometimes impractical – based on traffic, type of
site or even the client.
• If the website still has a heavy IE userbase then the
order of the CSS needs to be carefully considered.
22. Touch gestures
• For a better user experience tailor the interfaces
and inputs to the capabilities of the device.
• Touch based gestures can improve usability on
mobile websites – E.g. overscroll, swipe, dragging.
23. Adaptive images
• display: none doesn’t stop content being
downloaded
• Low res images not a solution, as many devices
have higher pixel density than desktop
• Doesn’t apply to background images
http://www.flickr.com/photos/ooh_food/3219732465
24. Scaling images using
JS feature detection
Scale from low res (or hidden) up to hi res images
based on detecting the browser capabilities.
However, if the user does not have javascript
enabled, this will present a problem.
26. Video
Embedding via 3rd party players such as YouTube or
Vimeo can be problematic – a more professional
solution is needed in this instance.
http://www.flickr.com/photos/colinwood0/5814240909
27. Forms & Tables
• Long forms with unnecessary fields = bad UX
regardless of mobile.
• Auto-select the appropriate keyboard on mobile.
• Establish the context your users will be using data
tables on mobile before considering UX.
All mobile UX decisions come down to context.
Where / How / Why will people be using your website on mobile.
28. Thanks!
Please show your appreciation by following us below
www.cyber-duck.co.uk
Twitter.com/Cyberduck_uk
