Real-world Responsive Design @ Breaking Development 2011

•

31 gefällt mir•5,396 views

A presentation I gave at Breaking Development 2011 (which was an updated and modified version of the presentation I gave at Fronteers 2010). In this talk I touched on the new Flexbox draft and CSS3 Grid Layout. Interestingly enough, while I was presenting, Microsoft announced IE10, which includes support for both specs (as well as multicolumn layout).

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Real-world Responsive Design @ Breaking Development 2011

Weitere ähnliche Inhalte

Mehr von Stephen Hay

From Deception to Clarity

From Deception to Clarity

From Deception to Clarity

The Backside of the Class (CSS Day 2015)

The Backside of the Class (CSS Day 2015)

The Backside of the Class (CSS Day 2015)

The Art of Deception

The Art of Deception

The Art of Deception

Sculpting Text: Easing the Pain of Designing in the Browser

Sculpting Text: Easing the Pain of Designing in the Browser

Sculpting Text: Easing the Pain of Designing in the Browser

Power Tools For Browser-Based Design

Power Tools For Browser-Based Design

Power Tools For Browser-Based Design

UIE Virtual Seminar: Responsive Web Design Workflow

UIE Virtual Seminar: Responsive Web Design Workflow

UIE Virtual Seminar: Responsive Web Design Workflow

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

The New Photoshop, Part 2: The Revenge of the Web

The New Photoshop, Part 2: The Revenge of the Web

The New Photoshop, Part 2: The Revenge of the Web

This talk was first presented at Smashing Conference (http://smashingconf.com/). Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

Style Guides Are The New Photoshop (Smashing Conference 2012)

Style Guides Are The New Photoshop (Smashing Conference 2012)

Style Guides Are The New Photoshop (Smashing Conference 2012)

A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012) Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

Style Guides Are The New Photoshop (Fronteers 2012)

Style Guides Are The New Photoshop (Fronteers 2012)

Style Guides Are The New Photoshop (Fronteers 2012)

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Go With The Flow

Go With The Flow

Go With The Flow

Fronteers Workshop: Rabid Prototyping

Fronteers Workshop: Rabid Prototyping

Fronteers Workshop: Rabid Prototyping

HTML5 & Webrichtlijnen 2

HTML5 & Webrichtlijnen 2

HTML5 & Webrichtlijnen 2

Real-world Responsive Design

Real-world Responsive Design

Real-world Responsive Design

Mehr von Stephen Hay (20)

From Deception to Clarity

From Deception to Clarity

From Deception to Clarity

The Backside of the Class (CSS Day 2015)

The Backside of the Class (CSS Day 2015)

The Backside of the Class (CSS Day 2015)

The Art of Deception

The Art of Deception

The Art of Deception

Sculpting Text: Easing the Pain of Designing in the Browser

Sculpting Text: Easing the Pain of Designing in the Browser

Sculpting Text: Easing the Pain of Designing in the Browser

Power Tools For Browser-Based Design

Power Tools For Browser-Based Design

Power Tools For Browser-Based Design

UIE Virtual Seminar: Responsive Web Design Workflow

UIE Virtual Seminar: Responsive Web Design Workflow

UIE Virtual Seminar: Responsive Web Design Workflow

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

Flexbox: One Giant Leap for Web Layout (CSS Day 2013)

The New Photoshop, Part 2: The Revenge of the Web

The New Photoshop, Part 2: The Revenge of the Web

The New Photoshop, Part 2: The Revenge of the Web

Style Guides Are The New Photoshop (Smashing Conference 2012)

Style Guides Are The New Photoshop (Smashing Conference 2012)

Style Guides Are The New Photoshop (Smashing Conference 2012)

Style Guides Are The New Photoshop (Fronteers 2012)

Style Guides Are The New Photoshop (Fronteers 2012)

Style Guides Are The New Photoshop (Fronteers 2012)

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow: Mobilism 2012

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Go With The Flow

Go With The Flow

Go With The Flow

Fronteers Workshop: Rabid Prototyping

Fronteers Workshop: Rabid Prototyping

Fronteers Workshop: Rabid Prototyping

HTML5 & Webrichtlijnen 2

HTML5 & Webrichtlijnen 2

HTML5 & Webrichtlijnen 2

Real-world Responsive Design

Real-world Responsive Design

Real-world Responsive Design

Kürzlich hochgeladen

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Exploring Multimodal Embeddings with Milvus

Exploring Multimodal Embeddings with Milvus

Exploring Multimodal Embeddings with Milvus

[BuildWithAI] Introduction to Gemini.pdf

[BuildWithAI] Introduction to Gemini.pdf

[BuildWithAI] Introduction to Gemini.pdf

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Corporate and higher education May webinar.pptx

Corporate and higher education May webinar.pptx

Rustici Software

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Discover the innovative features and strategic vision that keep WSO2 an industry leader. Explore the exciting 2024 roadmap of WSO2 API management, showcasing innovations, unified APIM/APK control plane, natural language API interaction, and cloud native agility. Discover how open source solutions, microservices architecture, and cloud native technologies unlock seamless API management in today's dynamic landscapes. Leave with a clear blueprint to revolutionize your API journey and achieve industry success!

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2's API Vision: Unifying Control, Empowering Developers

MS Copilot expands with MS Graph connectors

MS Copilot expands with MS Graph connectors

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

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

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

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

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

FWD Group - Insurer Innovation Award 2024

FWD Group - Insurer Innovation Award 2024

FWD Group - Insurer Innovation Award 2024

The Digital Insurer

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

Why Teams call analytics are critical to your entire business

Why Teams call analytics are critical to your entire business

Six Myths about Ontologies: The Basics of Formal Ontology

Six Myths about Ontologies: The Basics of Formal Ontology

Six Myths about Ontologies: The Basics of Formal Ontology

johnbeverley2021

Understanding the FAA Part 107 License ..

Understanding the FAA Part 107 License ..

Understanding the FAA Part 107 License ..

Christopher Logan Kennedy

Dubai, known for its towering skyscrapers, luxurious lifestyle, and relentless pursuit of innovation, often finds itself in the global spotlight. However, amidst the glitz and glamour, the emirate faces its own set of challenges, including the occasional threat of flooding. In recent years, Dubai has experienced sporadic but significant floods, disrupting normalcy and posing unique challenges to its infrastructure. Among the critical nodes in this bustling metropolis is the Dubai International Airport, a vital hub connecting the world. This article delves into the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Artificial Intelligence Chap.5 : Uncertainty

Artificial Intelligence Chap.5 : Uncertainty

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Introduction to Multilingual Retrieval Augmented Generation (RAG)

ICT role in 21st century education and its challenges

ICT role in 21st century education and its challenges

ICT role in 21st century education and its challenges

rafiqahmad00786416

AWS Community Day CPH - Three problems of Terraform

AWS Community Day CPH - Three problems of Terraform

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

Platformless Horizons for Digital Adaptability

Platformless Horizons for Digital Adaptability

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Kürzlich hochgeladen (20)

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

Exploring Multimodal Embeddings with Milvus

Exploring Multimodal Embeddings with Milvus

Exploring Multimodal Embeddings with Milvus

[BuildWithAI] Introduction to Gemini.pdf

[BuildWithAI] Introduction to Gemini.pdf

[BuildWithAI] Introduction to Gemini.pdf

Corporate and higher education May webinar.pptx

Corporate and higher education May webinar.pptx

Corporate and higher education May webinar.pptx

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2's API Vision: Unifying Control, Empowering Developers

MS Copilot expands with MS Graph connectors

MS Copilot expands with MS Graph connectors

MS Copilot expands with MS Graph connectors

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

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

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

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Elevate Developer Efficiency & build GenAI Application with Amazon Q

FWD Group - Insurer Innovation Award 2024

FWD Group - Insurer Innovation Award 2024

FWD Group - Insurer Innovation Award 2024

Why Teams call analytics are critical to your entire business

Why Teams call analytics are critical to your entire business

Why Teams call analytics are critical to your entire business

Six Myths about Ontologies: The Basics of Formal Ontology

Six Myths about Ontologies: The Basics of Formal Ontology

Six Myths about Ontologies: The Basics of Formal Ontology

Understanding the FAA Part 107 License ..

Understanding the FAA Part 107 License ..

Understanding the FAA Part 107 License ..

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Artificial Intelligence Chap.5 : Uncertainty

Artificial Intelligence Chap.5 : Uncertainty

Artificial Intelligence Chap.5 : Uncertainty

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Introduction to Multilingual Retrieval Augmented Generation (RAG)

ICT role in 21st century education and its challenges

ICT role in 21st century education and its challenges

ICT role in 21st century education and its challenges

AWS Community Day CPH - Three problems of Terraform

AWS Community Day CPH - Three problems of Terraform

AWS Community Day CPH - Three problems of Terraform

Platformless Horizons for Digital Adaptability

Platformless Horizons for Digital Adaptability

Platformless Horizons for Digital Adaptability

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...