Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.
As a fitting way to kick off our new workshop series, we’ve asked two internationally-renown mobile web and responsive design experts—Brad Frost (of This is Responsive, and Pattern Lab fame) and Aaron Gustafson (author of Adaptive Web Design)—to come and teach us everything we need to know about working in this multi-device reality.
For the first part of the day, Brad and Aaron will survey the landscape of responsive design, covering:
* broad concepts,
* strategies,
* the design process & deliverables,
*emerging design patterns and principles, and
* development best practices and considerations.
Then, we’ll break into small groups to tackle some thorny responsive challenges through discussions, sketching, and maybe even a little coding while Brad & Aaron provide real-time feedback and push us to go further. At the end, we’ll share our findings with the class and get additional feedback from the experts.
Why "mobile first" isn't enough - Developing a better user experienceKevin Powell
"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought.
There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences.
Presentation first given at BarCamp Nashville in October of 2011.
Mobile Rage - What causes it & how to fix it
Most of us have been there. That website you want to use, from your mobile device, that just refuses to cooperate. From the Flash-only, to the can't f**king log in, to the redirect-to-mobile-and-stay-there sites, there's more than enough websites out there to invoke Mobile Rage.
Although we all know that the best mobile development strategy is "mobile-first", we also all know how many sites and applications out there were designed and built by people who didn't imagine how fast mobile would take over.
Come learn about the common mistakes most people make for mobile, and some of the simple solutions you can use to help reduce Mobile Rage, without having to do a complete rewrite.
A discussion about the benefits of a mobile-first responsive approach to web development, why it is as important for desktop environments as it is for mobile devices and why it is the future of web development.
Along the way we'll dispell some of the myths you have heard about responsive web development, leaving you no excuses to not start your next project thinking mobile-first.
Coming soon to a device near you.
This presentation was first shown at the international Joomla conference, J and Beyond 2012, by Seth Warburton of Internet Inspired.
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.
Why "mobile first" isn't enough - Developing a better user experienceKevin Powell
"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought.
There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences.
Presentation first given at BarCamp Nashville in October of 2011.
Mobile Rage - What causes it & how to fix it
Most of us have been there. That website you want to use, from your mobile device, that just refuses to cooperate. From the Flash-only, to the can't f**king log in, to the redirect-to-mobile-and-stay-there sites, there's more than enough websites out there to invoke Mobile Rage.
Although we all know that the best mobile development strategy is "mobile-first", we also all know how many sites and applications out there were designed and built by people who didn't imagine how fast mobile would take over.
Come learn about the common mistakes most people make for mobile, and some of the simple solutions you can use to help reduce Mobile Rage, without having to do a complete rewrite.
A discussion about the benefits of a mobile-first responsive approach to web development, why it is as important for desktop environments as it is for mobile devices and why it is the future of web development.
Along the way we'll dispell some of the myths you have heard about responsive web development, leaving you no excuses to not start your next project thinking mobile-first.
Coming soon to a device near you.
This presentation was first shown at the international Joomla conference, J and Beyond 2012, by Seth Warburton of Internet Inspired.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.
We're currently fighting for parity among experiences. We're arguing that the mobile version shouldn't be a dumbed down version of the desktop site.
But we've set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn't just match the desktop experience, it should exceed it.
Tuenti Mobile by Davide Mendolia
Mobile devices are becoming one of the most used platform to connect to Internet, In Tuenti we are putting a focus on mobile platforms through applications and mobile web, discover how we are building m.tuenti.com.
Use of a palette of technologies like mobile device detection and capabilities on the server and the client side that help us to server different version as Plain HTML or HTML5.
How we try to bring the best user experience to every device adapting the possibles interactions based on the features or limitations of each them.
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Compuware APM
Are you delivering quality web experiences to all your end-users – no matter what browser or mobile device they use?
Research shows 60% of mobile Web users had a problem in the past year when accessing a Website on their mobile device.
No matter what your customers use to access your website – from Internet Explorer 9 on a PC to Safari on an iPhone – they expect your site to be fast and work flawlessly.
Join renowned mobile platform strategist Peter-Paul Koch and Compuware CTO APM Steve Tack to learn:
- What growing web and mobile browser proliferation means for IT and Web app owners and developers
- The latest browser trends including the evolution of mobile browsers and HTML 5
- How to meet customers’ web experience expectations regardless of browser or device
- What problems exist for companies attempting to maintain cross-browser interoperability
- Best practices to deliver quality web experiences to all customers no matter what browser or device they use
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent?
No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.
We're currently fighting for parity among experiences. We're arguing that the mobile version shouldn't be a dumbed down version of the desktop site.
But we've set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn't just match the desktop experience, it should exceed it.
Tuenti Mobile by Davide Mendolia
Mobile devices are becoming one of the most used platform to connect to Internet, In Tuenti we are putting a focus on mobile platforms through applications and mobile web, discover how we are building m.tuenti.com.
Use of a palette of technologies like mobile device detection and capabilities on the server and the client side that help us to server different version as Plain HTML or HTML5.
How we try to bring the best user experience to every device adapting the possibles interactions based on the features or limitations of each them.
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Compuware APM
Are you delivering quality web experiences to all your end-users – no matter what browser or mobile device they use?
Research shows 60% of mobile Web users had a problem in the past year when accessing a Website on their mobile device.
No matter what your customers use to access your website – from Internet Explorer 9 on a PC to Safari on an iPhone – they expect your site to be fast and work flawlessly.
Join renowned mobile platform strategist Peter-Paul Koch and Compuware CTO APM Steve Tack to learn:
- What growing web and mobile browser proliferation means for IT and Web app owners and developers
- The latest browser trends including the evolution of mobile browsers and HTML 5
- How to meet customers’ web experience expectations regardless of browser or device
- What problems exist for companies attempting to maintain cross-browser interoperability
- Best practices to deliver quality web experiences to all customers no matter what browser or device they use
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent?
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
The Mobile Landscape - Do you really need an app?Valtech UK
Is an app really always the answer in reaching and interacting with customers? In this session we look at the differences between native apps and mobile web sites - and most importantly - how do we decide between the two when we want to engage with customers in the mobile context.
Mobile Web Performance - Getting and Staying FastAndy Davies
Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it
Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
Optimizing content for the "mobile web"Chris Mills
In this presentation I discuss the mobile web: what it is, why it is lucrative, the limitations of developing for mobile, and how to best optimize web sites for viewing on mobile. This includes media queries, viewport and general best practices. I delivered this to a class at Oxford Brookes university on the 25th March 2011.
A presentation I held at "Betabeers Valencia" on 25th April 2013 at Workether.
(http://betabeers.com/event/betabeers-valencia-840/)
It's about the changing technology landscape and covers paradigms how we can better prepare our websites for the future.
I included much of the material that is listed on the website of the Future Friendly initiative: http://futurefriend.ly
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!
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Jack Zheng
For the most recent version please visit:
https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview
I have developed the mobile web development course and modules for some courses in KSU/SPSU. This is overview module to introduce the whole field. Topics include choices of mobile application development and delivery, basic principles and best practices of mobile friendly web sites and web applications, and major tools and frameworks.
Similar to Responsive Design & Beyond [Code & Creativity Workshop] (20)
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
Early on, Internet access was considered a luxury. Those times have passed and the Internet, especially the Web, has become a necessity. Whether your users are trying to access their money, gather health information, attend class, apply for assistance, or any of the other hundreds (if not thousands) of critical tasks people do on the web, your site needs to be prepared to meet their needs. And it needs to work, no matter what.
In this session, I discuss the many challenges to delivering critical information and services as well as the steps you can take to overcome those challenges. He’ll explore ways to make sure you can meet users on a variety of devices—and not the just the latest and greatest high end ones folks are talking about; how to make it accessible to people with disabilities; and how to load—and load quickly—on limited- bandwidth connections.
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk.
In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.
Designing the Conversation [Concatenate 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
Aaron Gustafson
Author, Adaptive Web Design
Performance as User Experience
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Over time, your users will become more accustomed to and interacting with their computers on the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
So how do you design a "headless" UI? That's easy: You design the conversation.
Conversation is at the root of every interaction we have, be it with another human being, a game, or with a website. This session will discuss how to design and implement a web application that will allow you to create a web page that will allow you to create HTML documents.
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
In this talk, Aaron will discuss and dissect several adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs — slow connections, older browsers, narrow screens, and even no screens at all. He’ll also introduce you to a battle-tested tool for planning, discussing, building and testing adaptive interfaces.
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.
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/
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
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.
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.
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/
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
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.
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.
42. If your stuff, if your content, if your
information, if your products, if your
services are not available on mobile,
they don’t exist for these people.
-Karen McGrane
http://karenmcgrane.com/2013/01/09/uncle-sam-wants-you-to-optimize-your-content-for-mobile/
47. We see more people accessing
Facebook on the mobile web than
from our top native apps combined.
-Facebook
https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/
71. DEVICE EXPERIENCE ADVANTAGES
๏ Create a more dedicated,optimized,catered experience
๏ Don’t have to worry about adapting interface conventions to
larger screens
72. DEVICE EXPERIENCE ADVANTAGES
๏ Create a more dedicated,optimized,catered experience
๏ Don’t have to worry about adapting interface conventions to
larger screens
๏ Potential to keep experience more performant
79. DEVICE EXPERIENCE PITFALLS
๏ URL redirection issues
๏ Content parity issues
๏ Content governance issues
๏ Need to maintain a device database
๏ The Space Between
๏ SEO Issues
๏ Continuity Issues
80.
81.
82.
83.
84. Any attempt to draw a line around a
particular device class has as much
permanence as a literal line in the sand.
-Jason Grigsby
http://blog.cloudfour.com/responsive-design-for-apps-part-1/
89. CURRENT DESKTOP SITE
(AWKWARD TREE IS AWKWARD)
MOBILE SITE
(IMMATURE, BUT SEED IS PLANTED)
http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/
90. OLD DESKTOP SITE
(OBSOLETE TREE IS OBSOLETE)
MOBILE SITE
(MOBILE-FIRST, ADAPTIVE, AND FUTURE-FRIENDLY)
http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/
94. For existing sites (particularly ones that
are also businesses) teams don’t always
have the luxury of tossing everything
aside and building anew.
-Dan Cederholm
http://simplebits.com/notebook/2011/08/19/adapted/
107. FLUID GRIDS
๏ Uses percentages and relative units instead of fixed pixel
widths
๏ Think in terms of proportions instead of pixel-perfection
๏ Does most of the heavy lifting of a responsive design
112. FLEXIBLE MEDIA
๏ Images need to scale within their containers
๏ Other media need to flex as well: video, objects,
slideshows, 3rd part widgets, etc
119. MEDIA QUERIES
code block!
!
!
@media all and (min-width: 50em) {!
!
/* Styles apply only to screens with a
width greater than 50em (800px) */!
!
}
120. CSS3 MEDIA QUERIES
๏ Responsive design’s secret sauce
๏ Applies specific styles only when certain conditions are
present
๏ Variables include: width, device-width, height, device-
height, pixel-density, orientation and more
150. Mobile users will do anything and
everything desktop users will do,
provided it’s presented in a usable way.
https://twitter.com/brad_frost/status/176697511761805312
171. Just make quality, relevant content with
appropriate tasks, and offer all of these to
all users...then make it easy for the user
to decide what it is they want to do.
-Stephen Hay
http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
184. The control which designers know in the print medium,
and often desire in the web medium, is simply a
function of the limitation of the printed page. We
should embrace the fact that the web doesn’t have the
same constraints, and design for this flexibility. But
first, we must “accept the ebb and flow of things”.
-John Allsopp
http://alistapart.com/article/dao
201. If your website is 15MB it’s not HTML5,
it’s stupid.
-Christian Heilmann
HTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF/
219. Progressive enhancement isn’t
about designing for the lowest
common denominator. It’s just
about starting there.
-Jeremy Keith
http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference/
235. This is a quote. This is where you
put the quote text.
-Quote AuthorCONTENT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHITBULLSHIT
261. We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
270. FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
271. FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
272. FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style
273. Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
274. Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
295. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
296. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
297. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
298. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
299. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
300. MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology
330. You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
your content structure. What is your content
made from, not what your content is.
-Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always
339. ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
340. ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
341. ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs
342. The idea of designing components like this, out of
context and without layout, might sound strange—
particularly if you’ve been used to designing Web pages
the traditional way. But we’ve been abstracting design
ideas like this for the longest time, for example in our
use of mood boards and even the cropped designs we find
on sites like Dribbble.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
347. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
348. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
349. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
350. WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
352. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
353. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
354. WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “just” a pattern library, but also not a production-ready
static site generator
406. code block{
"el": ".header",
"title": "Header",
"title": "The header or masthead is a global element…“
},
{
"el": ".nav",
"title": "Primary Navigation",
"title": "The navigation is collapsed on small screens
and is triggered via the .nav-trigger element"
},
{
"el": “.search-form",
"title": "Search Form",
"title": "The search form uses the input type=search to
pull up the appropriate input type on virtual keyboards"
},
{
"el": “.logo",
"title": "Logo",
"title": "The logo is an SVG graphic with a PNG fallback"
},
ANNOTATIONS WITH JSON
416. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
417. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
418. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
419. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Encourages flexibility
420. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Encourages flexibility
๏ Extensible and scalable
421. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Encourages flexibility
๏ Extensible and scalable
๏ Document your interface
422. WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Can easily traverse from abstract to concrete
๏ Write and name HTML/CSS/JS as you please.
๏ Start with a system first rather than deconstruct later
๏ Encourages flexibility
๏ Extensible and scalable
๏ Document your interface
๏ See pattern lineage
442. As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/
452. Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
-Dan Mall
http://the-pastry-box-project.net/dan-mall/2012-september-12/
468. ๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY
521. Just four years ago the majority of our
visitors saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel wide screen.
Times have really changed.
“
Jason Samuels
IT Manager,
National Council on Family Relations
Source
522. Windows users used to comprise
93.5% of our web visits. Now that
percentage is 72.4%. Visitors using a
Mac have more than tripled.“
523. The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,
200-400% per year,
to 6.2% today.
“
524. Four years ago 75.5% of our web
visitors used Internet Explorer. That
number has fallen to 37%. Firefox now
comprises 25.5%, Safari 19.5%, and
Chrome 15.3%.
“
525. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2012 we detected
“ 830
545. …but that’s concentrated in
30% of households
“ http://www.chetansharma.com/usmarketupdateq12013.htm
546.
547. U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
548. U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
$30k = Average US income 2013
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
605. PLANNING ADAPTIVE INTERFACES
Interface experience Map
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE
614. PLANNING ADAPTIVE INTERFACES
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="">
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>
615. PLANNING ADAPTIVE INTERFACES
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt=""
class="enlargable">
<p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p>
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>
658. PLANNING ADAPTIVE INTERFACES
Lazy Loading
<section class="aux reviews loaded" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled open">…</a>
</header>
<div role="tabpanel">
<div id="p-reviews" aria-labeledby="tab-reviews">
<ol class="reviews-list">
<li>
<img src="images/avatar.png" alt="Commenter Name">
<div class="review-meta">
<h3>Awesome shirt!</h3>
<a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a>
By Bruce Bosco
</div>
<div class="review-content">
<p>This shirt looks awesome and is really comfortable to wear. It did shrink
quite a lot when washed, but that could have just been how I ran it. All in all, it's my
favourite shirt, and I love wearing it.</p>
</div>
</li>
<!-- … -->
</ol>
</div>
</div>
</section>
661. PLANNING ADAPTIVE INTERFACES
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</div>
<!-- ... -->
</div>
662. PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
663. PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
672. PLANNING ADAPTIVE INTERFACES
Linear HTML
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
673. PLANNING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">
<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id=”folder-1”>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</section>
<!-- ... -->
</div>
674. PLANNING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">
<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id=”folder-1”>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</section>
<!-- ... -->
</div>