Workshop about responsive web design (RWD), given on 13 Februari 2013. This is a presentation about how to create a responsive website. Different tools and libraries which are used for RWD are covered
Examples used in the workshop can be found here:
https://github.com/Goldmund-Wyldebeast-Wunderliebe/rwd-workshop
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).
Are you missing opportunities because your website is difficult to navigate on a mobile device? This presentation looks at:
-Should you optimize your website for mobile
-What are the main approaches to creating a mobile-optimized site
-What are some best practices for mobile design
This presentation is aimed at anyone from a nonprofit, social enterprise or small business with a non-techy background. It focuses on the various options for mobile-friendly sites and the pros/cons to consider to make a decision, rather than discuss the technical details of how mobile-friendly websites are implemented.
For more information: http://www.techsoupcanada.ca/learning_centre/articles/optimizing-your-nonprofit-website-for-mobile
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).
Are you missing opportunities because your website is difficult to navigate on a mobile device? This presentation looks at:
-Should you optimize your website for mobile
-What are the main approaches to creating a mobile-optimized site
-What are some best practices for mobile design
This presentation is aimed at anyone from a nonprofit, social enterprise or small business with a non-techy background. It focuses on the various options for mobile-friendly sites and the pros/cons to consider to make a decision, rather than discuss the technical details of how mobile-friendly websites are implemented.
For more information: http://www.techsoupcanada.ca/learning_centre/articles/optimizing-your-nonprofit-website-for-mobile
Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent
Cold logic makes a hard case for opting for mobile web apps over native ones. If you can build it in HTML, CSS, and javascript, then do, right? Except for the pesky little detail called the real world, where marketers demand apps, boardrooms pay for apps, and even worse, users seem to prefer them. Or do they?
In this talk, Brian will try to reframe the web vs native vs hybrid debate into a conversation about what your customers really need, and what they’ll actually use. The technology you choose for your mobile approach is of strategic importance, but you need to be thinking about much more than just technology.
The Top Ten Elements Your Noprofit's Strategic Website Should Haveguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
The Book as App: Multi-Touch Ebooks and Their Future in LibrariesNicole Hennig
A talk given at Internet Librarian 2013 in Monterey, CA. Oct. 29, 2013. It's a look at various multi-touch, multimedia ebooks that create learning experiences for all types of readers, including people with disabilities. Included are ideas for library programs and services using interactive ebooks.
An overview of the state of the mobile industry as it pertains to the web. Content developed and driven based on the belief of the centrality of content to distributed content to mobile devices (http://www.domain7.com/mobile). Presentation content from a workshop session presented in Vancouver in September 2011 (http://domain7.com/blog/d7-workshops-designing-and-building-for-the-mobile-web/)
Designing and Theming Drupal for Mobile DevicesDavid Lanier
Have you noticed how a site can look great on your computer, but when viewing it on a mobile device it's unreadable, ugly, and takes forever to load?
Maybe you're designing a site, or you already have one or more sites. Now is the time to make it friendlier for mobile devices such as iPhone, Android, and others.
This session covers design considerations if you are still in the design phase, as well as demonstrate techniques for adding a mobile interface for your existing sites.
Everything Old is New Again: The State of Web DesignMaria D'Amato
Back to the Old School: Device-Independence with Responsive Design
Process: Art, Copy & Code: The New Creative Team
Embrace the Medium: Flat vs. Skeuomorphic Design
Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy
Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013
While responsive design may sound like a buzzword, it has real implications for your nonprofit’s website.
This session will cover:
• responsive design principles
• provide several illustrations of responsive design done well (from small to large • nonprofit sites and a few commercial examples)
• explain the process of planning for, and implementing responsive design
• discuss ways to retrofit an existing site to responsive
• the respective level of effort for responsive projects
Additionally, we will share several tools that we have found helpful in the planning, design and implementation phases.
Confluence focuses on website design and development using open source content management systems for nonprofits and organizations. We have implemented several responsive sites for our clients over the past 18 months and have invested heavily in training our staff in this important discipline.
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.
A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.
Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent
Cold logic makes a hard case for opting for mobile web apps over native ones. If you can build it in HTML, CSS, and javascript, then do, right? Except for the pesky little detail called the real world, where marketers demand apps, boardrooms pay for apps, and even worse, users seem to prefer them. Or do they?
In this talk, Brian will try to reframe the web vs native vs hybrid debate into a conversation about what your customers really need, and what they’ll actually use. The technology you choose for your mobile approach is of strategic importance, but you need to be thinking about much more than just technology.
The Top Ten Elements Your Noprofit's Strategic Website Should Haveguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
The Book as App: Multi-Touch Ebooks and Their Future in LibrariesNicole Hennig
A talk given at Internet Librarian 2013 in Monterey, CA. Oct. 29, 2013. It's a look at various multi-touch, multimedia ebooks that create learning experiences for all types of readers, including people with disabilities. Included are ideas for library programs and services using interactive ebooks.
An overview of the state of the mobile industry as it pertains to the web. Content developed and driven based on the belief of the centrality of content to distributed content to mobile devices (http://www.domain7.com/mobile). Presentation content from a workshop session presented in Vancouver in September 2011 (http://domain7.com/blog/d7-workshops-designing-and-building-for-the-mobile-web/)
Designing and Theming Drupal for Mobile DevicesDavid Lanier
Have you noticed how a site can look great on your computer, but when viewing it on a mobile device it's unreadable, ugly, and takes forever to load?
Maybe you're designing a site, or you already have one or more sites. Now is the time to make it friendlier for mobile devices such as iPhone, Android, and others.
This session covers design considerations if you are still in the design phase, as well as demonstrate techniques for adding a mobile interface for your existing sites.
Everything Old is New Again: The State of Web DesignMaria D'Amato
Back to the Old School: Device-Independence with Responsive Design
Process: Art, Copy & Code: The New Creative Team
Embrace the Medium: Flat vs. Skeuomorphic Design
Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy
Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013
While responsive design may sound like a buzzword, it has real implications for your nonprofit’s website.
This session will cover:
• responsive design principles
• provide several illustrations of responsive design done well (from small to large • nonprofit sites and a few commercial examples)
• explain the process of planning for, and implementing responsive design
• discuss ways to retrofit an existing site to responsive
• the respective level of effort for responsive projects
Additionally, we will share several tools that we have found helpful in the planning, design and implementation phases.
Confluence focuses on website design and development using open source content management systems for nonprofits and organizations. We have implemented several responsive sites for our clients over the past 18 months and have invested heavily in training our staff in this important discipline.
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.
A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.
Join us for a presentation and a roundtable discussion about the strategic and practical aspects of Responsive Web Design.
Responsive Web Design (RWD) is the shiny new toy of 2013. At first glance, RWD appears to be the silver bullet that every organization hopes will solve their multi-channel challenges, but will it? RWD for Foodies will breakdown the pros and cons of the philosophy in an easily "digestible" way for eBusiness, Strategy and Marketing professionals.
David Ip is a mobile veteran across the entire strategy, marketing, advertising, sales & implementation cycle in a large enterprise and startup environment.
David is also a 3 time Digital Marketing & Product award winner:
- 2013 StartupBus Finalist for "MyBestRx.com"
- 2013 SxSW American Airlines Travel Hack winner for "MokiiCo"
- 2012 SxSW AT&T Developer Grand Prize winner for "BoogieUp"
Accreditations:
David was accepted into the Founder Institute in 2013 and certified by DePaul University Kellstadt College in Interactive Marketing in 2012.
David works in the innovation group at BlueCross BlueShield of Illinois (BCBSIL) and the founder of MyBestRx.com. Prior to BCBSIL, David was the Regional Director for AOL Mobile Advertising, a Mobile Marketing Evangelist at Arc Worldwide / Leo Burnett and an Account Manager at Vibes Media.
David was also on the Board of Directors at CIMA, a founding member of the Heartland Mobile Council, a member of MoMo Chicago and the Mobile Marketing Association.
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.
A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
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.
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
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.
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.
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
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.
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.
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.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
2. WHO AM I?
• Kim Chee Leong
• Software engineer, lead developer
• Tech oriented, with a feeling for
aesthetics on the web
3. WHO IS GWW?
• Located in Amsterdam and Groningen
• We create webapplications using Python-based frameworks
• Our customers are goverments, non-profit organisations and larger companies.
8. DAO OF WEB DESIGN
• Written 13 years ago, this article still makes sense
• New media tries to mimic old media
• About creating pages which are adaptable
• http://alistapart.com/article/dao
9. SAME OLD NEW MEDIUM?
“Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation.”
Tao Te Ching; 38 Ritual
A Dao of Web Design by John Allsopp - April 7, 2000
10. SAME OLD NEW MEDIUM?
The web is a new medium, although it has emerged
from the medium of printing, whose skills, design
language and conventions strongly influence it.
A Dao of Web Design by John Allsopp - April 7, 2000
11. CONTROLLING WEB PAGES
“... accepts the ebb and flow of things,
Nurtures them, but does not own them,”
Tao Te Ching; 2 Abstraction
A Dao of Web Design by John Allsopp - April 7, 2000
12. ADAPTABILITY IS ACCESSIBILITY
“The best of man is like water,
Which benefits all things, and does not contend with them,
Which flows in places that others disdain,
Where it is in harmony with the Way.”
Tao Te Ching; 8 Water
A Dao of Web Design by John Allsopp - April 7, 2000
13. THE WAY
“The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea.”
Tao Te Ching; 32 Shapes
A Dao of Web Design by John Allsopp - April 7, 2000
14. THE WAY
The web is a new medium, although it has emerged from
the medium of printing, whose skills, design language and
conventions strongly influence it.
A Dao of Web Design by John Allsopp - April 7, 2000
16. FAST FORWARD TO TODAY
Widescreen
Mobile Tablet Laptop Desktop
TV
phone
E-reader
17. WEBSITES ON TODAYS DEVICES
• Sites without a mobile ‘part’ are shown fairly well on modern phones
• We have an app for that (most of the times..)
• There are lot’s of devices which are internet-enabled, mobile and non-mobile
18. RESPONSIVE WEB DESIGN
• Create websites which are adaptable
• Screen width is important, which device is viewing doesn’t matter*
• The same content, images and other resources on a website are used with RWD
21. MOBILE SPECIFIC WEBSITE
• A separate website/URL with separate
content
• Not responsive!
• For websites with a main goal of
marketing a product or service
22. TRANSCODED WEBSITE
• A separate website/URL with content
transcoded (copied) from your main site
• Not responsive!
• Follows same structure as main website
23. APP STORE PRESENCE
• Create an app and publish it on Apple’s App Store / Google Play
• Your company is findable thru an app store
• Easier access, just tap the app on your mobile device
• You need to develop an app for every platform
24. ALTERNATIVE WRAP-UP
Mobile site Transcoded site Native app Responsive site
Optimized for
X X ~
slow connections
Follows same
structure as main X ~ X
site
Works on a broad
~ ~ X
range of devices
25.
26. WIRED.COM EXAMPLE
• This is a ‘mobile specific’ website
• Works great on mobile devices but is
not responsive
• Instead of depending on screen size, the
site detects your device
29. THE BASIC PRINCIPLES OF RWD
• Flexible grid • When designing a responsive website
start with the smallest screen size and
move up to the bigger sizes.
• Flexible media
• Don’t use server-side stuff to detect
• Media queries mobile devices.
• Most CSS3 techniques can be used
• Doesn’t work on older browsers*
30. FLEXIBLE GRID
.. this concept of a typographic
grid: a rational system of columns
and rows, upon which modules of
content could be placed.
Ethan Marcotte
31. FLEXIBLE GRID
• Elements of a website are positioned on
a grid
• The grid is adaptive
• Many tools and boilerplate stylesheets
are available to start with a flexible grid.
34. FLEXIBLE VALUES IN CSS
• Margins and paddings in relative values
• Fonts in em’s or rem’s
• Don’t use pixels; one pixel on one
platform is not a pixel on another
• Elements in a site are adaptive when
styled using flexible values
35. FLEXIBLE MARGINS/PADDINGS
• Use relative values; percentages, em’s or
rem’s
• In this example a padding of 2% is set on
the left and right side of the highlighted
fieldset.
36. FLEXIBLE TYPESETTING
An em is a unit of
• Use ‘em’ or ‘rem’ font-size values. measurement in the field of
typography, equal to the
• Em (often) equals 16px in height. currently specified point size.
The name of em is related to
• Problem with em-based font sizing is M. Originally the unit was
that the font size is nested. To solve this derived from the width of the
rem sizes can be used. capital “M” in the given
typeface.
40. CSS3 MEDIA QUERIES
• This meta element must be in the html header:
• <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
• Media type screen is used
• Do not use other media types to differentiate between devices
• ie: braille, embossed, handheld, print, projection, screen, speech, tty and tv
43. MOCK-UPS
• Create mock-ups for phone, tablet and
desktop
• Start with the smallest screen size and
move up to bigger sizes
• Think about your site before you’ll start
building
• Mocking-up a site design should be quick
and easy todo
47. TOOLS TO TEST YOUR RESPONSIVE SITE
• http://mattkersley.com/responsive/
• http://www.responsinator.com/
• Use Google Chrome to set an user agent and viewport
48. TOOLS TO TEST YOUR RESPONSIVE SITE
• Apple: connect your iPad/iPhone to your Apple computer
• http://bit.ly/Qy06v8 (developer.apple.com)
• Android: use the Development Kit to connect an Android device to the Chrome
browser
• http://bit.ly/IIc78S (developers.google.com)
49. JAVASCRIPT LIBRARIES
• Modernizr (http://modernizr.com)
• Fallback for older browsers which don’t support CSS3 and HTML5
• Hammer.js (http://eightmedia.github.com/hammer.js/)
• Library for multi-touch gestures
• Enquire.js (http://wicky.nillia.ms/enquire.js/)
• JavaScript library for responding to CSS media queries