Beyond Media Queries: Anatomy of an Adaptive Web Design

•

122 likes•18,813 views

Media queries may be responsive design’s secret sauce, but we know there’s a whole lot more that goes into crafting amazing adaptive experiences. By dissecting an example of a mobile-first responsive design, we can uncover the principles of adaptive design and highlight some considerations for creating contextually-aware web experiences. This goes over emerging mobile web best practices and responsive patterns that can assist in our journey toward a future-friendly web.

Technology

More from Brad Frost

Nobody works alone in a vacuum, and successful work hinges on how well a team communicates and collaborates with each other. This talk will explore many methods, tools, and techniques teams use to produce great web experiences. How do front-end development teams make sure they write clean and consistent code together? How do designers ensure colors, typography, and other design elements are used correctly? What deliverables should be created in an effective web design process? How are decisions communicated with the team, stakeholders, and the broader organization? There are no “right” answers to these questions, but this talk will cover some important principles and helpful tactics to help your team make great work together.

Let's Work Together!

Brad Frost

Looking for a place to hang my helmet

Brad Frost

Brad Frost Web designer Style Guide Best Practices We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.

Style Guide Best Practices

Brad Frost

Atomic Design - An Event Apart San Diego

Brad Frost

Atomic Design - BDConf Nashville, 2013

Brad Frost

Death To Bullshit: Now With 80% More Bullshit!

Brad Frost

Atomic design

Brad Frost

Death To Bullshit

Brad 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.

Beyond Squishy: The Principles of Adaptive Design

Brad Frost

Our digital landscape includes desktops, laptops, smartphones, featurephones, tablets, e-readers, netbooks and more. But this is just the beginning. As the digital landscape continues to become even more complex, it's essential for us to start thinking beyond the desktop and embrace the unpredictability of the future. There's no such thing as future-proof, but there are things we can do in order to better prepare ourselves for the era of ubiquitous connectivity. We need to start thinking and acting differently in order to create meaningful web experiences that continue to be relevant well beyond the scope of the initial projects. This session will cover: A better understanding of future friendly principles Tips for better supporting today's device landscape while being better prepared for tomorrow's How to apply future friendly thinking in your current web projects

For a Future-Friendly Web (WebVisions Chicago 2012)

Brad Frost

Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition

Brad Frost

Media queries may be responsive design's secret sauce, but we know there's a whole lot more that goes into crafting amazing adaptive experiences. By dissecting an example of a mobile-first responsive design, we'll uncover the principles of adaptive design and highlight some considerations for creating contextually-aware Web experiences. We'll go over emerging mobile Web best practices and responsive patterns that can assist in our journey toward a future-friendly Web.

Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...

Brad Frost

As the digital landscape continues to become more complex, it's essential for us to start thinking beyond the desktop and embrace the unpredictability of the future. Mobile is forcing us to rethink the content we create and the context in which people interact with our products and services. This session will cover how to change our thinking and start acting differently in order to create more future-friendly experiences.

For a Future-Friendly Web (Mobilism 2012)

Brad Frost

For full breakdown, visit http://bradfrostweb.com/blog/web/for-a-future-friendly-web/ This talk was from Web Design Day (http://webdesignday.com) in beautiful Pittsburgh, PA. This talk introduces the need to start thinking and acting in a more future-friendly (http://futurefriend.ly) way when approaching web design. The diversity of web-enabled devices is increasing at an alarming rate. We have to rethink our content and the contexts in which our content is viewed.

For a Future-Friendly Web

Brad Frost

Everyone's screaming "We need to be 'on' mobile!" What does that even mean? Where do you start? One of the biggest challenges is getting clients, coworkers and stakeholders on board with the mobile web and actually execute a project the right way. The hurdles are many: lack of understanding of the medium, small budgets, outdated processes and many more. Every organization is different so changing existing behaviors and processes takes a lot of effort, patience and time. This presentation shows you how to execute a mobile web project successfully with a cross-disciplinary team. We'll provide a set of helpful tools and practices to get you started and help educate your coworkers and clients at the same time. Topics discussed: - Selling the mobile-first philosophy and strategy Using mobile as an excuse to develop a strong content strategy - Overcoming "App-itis" (people's tendency to think anything made for mobile needs to be a native app) - How to create future-friendly mobile web experiences

Selling The Mobile Web

Brad Frost

More from Brad Frost (15)

Let's Work Together!

Looking for a place to hang my helmet

Style Guide Best Practices

Atomic Design - An Event Apart San Diego

Atomic Design - BDConf Nashville, 2013

Death To Bullshit: Now With 80% More Bullshit!

Atomic design

Death To Bullshit

Beyond Squishy: The Principles of Adaptive Design

For a Future-Friendly Web (WebVisions Chicago 2012)

Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition

Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...

For a Future-Friendly Web (Mobilism 2012)

For a Future-Friendly Web

Selling The Mobile Web

Recently uploaded

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

Imagine a world where information flows as swiftly as thought itself, making decision-making as fluid as the data driving it. Every moment is critical, and the right tools can significantly boost your organization’s performance. The power of real-time data automation through FME can turn this vision into reality. Aimed at professionals eager to leverage real-time data for enhanced decision-making and efficiency, this webinar will cover the essentials of real-time data and its significance. We’ll explore: FME’s role in real-time event processing, from data intake and analysis to transformation and reporting An overview of leveraging streams vs. automations FME’s impact across various industries highlighted by real-life case studies Live demonstrations on setting up FME workflows for real-time data Practical advice on getting started, best practices, and tips for effective implementation Join us to enhance your skills in real-time data automation with FME, and take your operational capabilities to the next level.

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Safe Software

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

Presentation on how to chat with PDF using ChatGPT code interpreter

naman860154

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

The Raspberry Pi 5 was announced on October 2023. This new version of the popular embedded device comes with a new iteration of Broadcom’s VideoCore GPU platform, and was released with a fully open source driver stack, developed by Igalia. The presentation will discuss some of the major changes required to support this new Video Core iteration, the challenges we faced in the process and the solutions we provided in order to deliver conformant OpenGL ES and Vulkan drivers. The talk will also cover the next steps for the open source Raspberry Pi 5 graphics stack. (c) Embedded Open Source Summit 2024 April 16-18, 2024 Seattle, Washington (US) https://events.linuxfoundation.org/embedded-open-source-summit/ https://eoss24.sched.com/event/1aBEx

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Igalia

In an era where artificial intelligence (AI) stands at the forefront of business innovation, Information Architecture (IA) is at the core of functionality. See “There’s No AI Without IA” – (from 2016 but even more relevant today) Understanding and leveraging how Information Architecture (IA) supports AI synergies between knowledge engineering and prompt engineering is critical for senior leaders looking to successfully deploy AI for internal and externally facing knowledge processes. This webinar be a high-level overview of the methodologies that can elevate AI-driven knowledge processes supporting both employees and customers. Core Insights Include: Strategic Knowledge Engineering: Delve into how structuring AI's knowledge base is required to prevent hallucinations, enable contextual retrieval of accurate information. This will include discussion of gold standard libraries of use cases support testing various LLMs and structures and configurations of knowledge base. Precision in Prompt Engineering: Learn the art of crafting prompts that direct AI to deliver targeted, relevant responses, thereby optimizing customer experiences and business outcomes. Unified Approach for Enhanced AI Performance: Explore the intersection of knowledge and prompt engineering to develop AI systems that are not only more responsive but also aligned with overarching business strategies. Guiding Principles for Implementation: Equip yourself with best practices, ethical guidelines, and strategic considerations for embedding these technologies into your business ecosystem effectively. This webinar is designed to empower business and technology leaders with the knowledge to harness the full potential of AI, ensuring their organizations not only keep pace with digital transformation but lead the charge. Join us to map a roadmap to fully leverage Information Architecture (IA) and AI chart a course towards a future where AI is a key pillar of strategic innovation and business success.

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

Earley Information Science

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

Histor y of HAM Radio presentation slide

vu2urc

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

Recently uploaded (20)

GenAI Risks & Security Meetup 01052024.pdf

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Partners Life - Insurer Innovation Award 2024

Presentation on how to chat with PDF using ChatGPT code interpreter

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Driving Behavioral Change for Information Management through Data-Driven Gree...

Exploring the Future Potential of AI-Enabled Smartphone Processors

Artificial Intelligence: Facts and Myths

Strategies for Landing an Oracle DBA Job as a Fresher

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Powerful Google developer tools for immediate impact! (2023-24 C)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

How to Troubleshoot Apps for the Modern Connected Worker

Histor y of HAM Radio presentation slide

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

08448380779 Call Girls In Civil Lines Women Seeking Men