Responsive web design

•

6 likes•1,544 views

This document discusses responsive web design techniques including flexible grids, flexible images using max-width, and media queries. A flexible grid uses relative units like percentages and em instead of pixels to resize and reflow content depending on screen size. Flexible images are made responsive using max-width: 100% so they scale down but not up. Media queries allow applying different CSS styles depending on common device breakpoints like mobile versus desktop.

Technology Design

Responsive Web Design
Janet Huang
2011/08/03

@janetyc

Responsive Web Design
context-aware web design

Think Vitamin http://thinkvitamin.com/

Hicksdesign http://hicksdesign.co.uk/

Flexible grid

+

Flexible image = Responsive web

+

Media queries

http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/

header

banner

content sidebar
container

px % or em
1200px

900px/1200px = 75%
header
or
900px/16px = 56.25em banner
900px 280px

280px/1200px = 23.3333%
or
default font size 280px/16px = 17.5em

content sidebar
container

img { max-width: 100%; }
embed, object, video { max-width: 100%; }

or
.feature

.feature { overﬂow: hidden; } img

#issue in IE6: max-width can’t be used in IE6

v img, video, object { width: 100%; }

How?

in html...
<link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 480px)" href="shetland.css" />

in css... media type media query
@media screen and (max-device-width: 480px) { ... }
@import url("shetland.css") screen and (max-device-width: 480px);

Media feature

width device-aspect-ratio
height color
device-width color-index
device-height monochrome
orientation resolution
aspect-ratio scan
grid

css-mediaqueries-js
http://code.google.com/p/css3-mediaqueries-js/

browser compatibility

viewpoint... width
device-width

browser

<meta name="viewport" content="width=device-
width; initial-scale=1.0"/>

Tools
• Opera Mobile Emulator
• HTML5 Boilerplate
• Modernizr

Reference
• Responsive web design
• http://www.alistapart.com/articles/responsive-web-
design/

• http://net.tutsplus.com/tutorials/html-css-
techniques/responsive-web-design-a-visual-guide/

• http://mediaqueri.es/

• HTML5
• http://www.html5rocks.com

Similar to Responsive web design

Responsive Web Design

Christophe Schwyzer

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos? O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

Responsive Web Design e a Ubiquidade da Web

Eduardo Shiota Yasuda

The specs behind the sex, mobile-friendly layout beyond the desktop

betabeers

Going Responsive with WordPress

James Cryer

Adaptive layouts - standards>next Manchester 23.03.2011

Patrick Lauke

Responsive Websites

Joe Seifi

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques. I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

Responsive design: techniques and tricks to prepare your websites for the mul...

Andreas Bovens

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...

Patrick Lauke

Visitors to your site are increasingly less likely to have a traditional desktop experience. There’s a widening diversity of browsers and devices as the mobile, netbook and tablet market explodes. Can your designs handle this new world? Learn how CSS3 can be used to create a responsive design that adapts well to your visitors regardless of how large or small their screen sizes are. We’ll cover why you need to design your sites to work on a widening array of devices and screen sizes. There will be examples and coding. In particular, we’ll look at implementing a fluid grid and flexible images and using media queries to create a great experience for all visitors.

Responsive web design

Ben MacNeill

Responsive websites. Toolbox

Wojtek Zając

Responsive Web Design tips and tricks.

GaziAhsan

Rwd slidedeck

Vera Kovaleva

Adaptive theming using compass susy grid

soovor

Pinkoi Mobile Web

mikeleeme

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

Intro to @viewport & other new Responsive Web Design CSS features

Andreas Bovens

Slides from Morten Rand-Hendriksen's presentation at JavaScript Open in Vancouver, June 25th, 2015. Responsive Images are one of the missing pieces in the puzzle that makes up our new responsive web. Using the new RICG spec for srcset, sizes, and the picutre element, web designers and developers can instruct the browser to serve the visitor with the best possible image for their screen resolution and size, all the while saving bandwidth and processing power. Learn how the new spec and markup works, how and when to use srcset, sizes, and the picture element, and how to implement Responsive Images in your live production sites today. http://jsopen.lighthouselabs.ca/

Responsive Images in the Real World - presented at JavaScript Open 2015

Morten Rand-Hendriksen

Responsive Web Design

Jason Harwig

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

Great Responsive-ability Web Design

Mike Wilcox

Html 5 mobile - nitty gritty

Mario Noble

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design

Frédéric Harper

Similar to Responsive web design (20)

Responsive Web Design

Responsive Web Design e a Ubiquidade da Web

The specs behind the sex, mobile-friendly layout beyond the desktop

Going Responsive with WordPress

Adaptive layouts - standards>next Manchester 23.03.2011

Responsive Websites

Responsive design: techniques and tricks to prepare your websites for the mul...

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...

Responsive web design

Responsive websites. Toolbox

Responsive Web Design tips and tricks.

Rwd slidedeck

Adaptive theming using compass susy grid

Pinkoi Mobile Web

Intro to @viewport & other new Responsive Web Design CSS features

Responsive Images in the Real World - presented at JavaScript Open 2015

Responsive Web Design

Great Responsive-ability Web Design

Html 5 mobile - nitty gritty

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design

Recently uploaded

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

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

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 Diplomatic Enclave Women Seeking Men

Delhi Call girls

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Rafal Los

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

Evaluating the top large language models.pdf

ChristopherTHyatt

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

What is a good lead in your organisation? Which leads are priority? What happens to leads? When sales and marketing give different answers to these questions, or perhaps aren't sure of the answers at all, frustrations build and opportunities are left on the table. Join us for an illuminating session with Cian McLoughlin, HubSpot Principal Customer Success Manager, as we look at that crucial piece of the customer journey in which leads are transferred from marketing to sales.

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

HampshireHUG

Sara Mae O’Brien Scott and Tatiana Baquero Cakici, Senior Consultants at Enterprise Knowledge (EK), presented “AI Fast Track to Search-Focused AI Solutions” at the Information Architecture Conference (IAC24) that took place on April 11, 2024 in Seattle, WA. In their presentation, O’Brien-Scott and Cakici focused on what Enterprise AI is, why it is important, and what it takes to empower organizations to get started on a search-based AI journey and stay on track. The presentation explored the complexities of enterprise search challenges and how IA principles can be leveraged to provide AI solutions through the use of a semantic layer. O’Brien-Scott and Cakici showcased a case study where a taxonomy, an ontology, and a knowledge graph were used to structure content at a healthcare workforce solutions organization, providing personalized content recommendations and increasing content findability. In this session, participants gained insights about the following: Most common types of AI categories and use cases; Recommended steps to design and implement taxonomies and ontologies, ensuring they evolve effectively and support the organization’s search objectives; Taxonomy and ontology design considerations and best practices; Real-world AI applications that illustrated the value of taxonomies, ontologies, and knowledge graphs; and Tools, roles, and skills to design and implement AI-powered search solutions.

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Enterprise Knowledge

08448380779 Call Girls In Friends Colony Women Seeking Men

Delhi Call girls

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

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

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

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

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

CNv6 Instructor Chapter 6 Quality of Service

giselly40

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

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

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Recently uploaded (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

The 7 Things I Know About Cyber Security After 25 Years | April 2024

How to Troubleshoot Apps for the Modern Connected Worker

Data Cloud, More than a CDP by Matt Robison

Evaluating the top large language models.pdf

Boost Fertility New Invention Ups Success Rates.pdf

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

IAC 2024 - IA Fast Track to Search Focused AI Solutions

08448380779 Call Girls In Friends Colony Women Seeking Men

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

presentation ICT roal in 21st century education

Artificial Intelligence: Facts and Myths

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

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

CNv6 Instructor Chapter 6 Quality of Service

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

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

Automating Google Workspace (GWS) & more with Apps Script

Responsive web design

1. Responsive Web Design Janet Huang 2011/08/03 @janetyc

4. mobile site standard site

5. Responsive Web Design context-aware web design

6. Think Vitamin http://thinkvitamin.com/ Hicksdesign http://hicksdesign.co.uk/

7. Flexible grid + Flexible image = Responsive web + Media queries

8. http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/

9. header banner content sidebar container

10. header banner content sidebar container

11. ﬁxed layout

12. 1. Flexible grid

13. proportional thinking

14. target / context = result

15. px % or em 1200px 900px/1200px = 75% header or 900px/16px = 56.25em banner 900px 280px 280px/1200px = 23.3333% or default font size 280px/16px = 17.5em content sidebar container

16. 2. Flexible images

17. img { max-width: 100%; } embed, object, video { max-width: 100%; } or .feature .feature { overﬂow: hidden; } img

18. #issue in IE6: max-width can’t be used in IE6 v img, video, object { width: 100%; }

19. 3. media queries

20. How? in html... <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> in css... media type media query @media screen and (max-device-width: 480px) { ... } @import url("shetland.css") screen and (max-device-width: 480px);

21. Media feature width device-aspect-ratio height color device-width color-index device-height monochrome orientation resolution aspect-ratio scan grid

22.

23. css-mediaqueries-js http://code.google.com/p/css3-mediaqueries-js/ browser compatibility

24. #issue in viewpoint v.s.

25. viewpoint... width device-width browser <meta name="viewport" content="width=device- width; initial-scale=1.0"/>

26.

27.

28. Demo & Practice

29. Get the book!

30. Tools • Opera Mobile Emulator • HTML5 Boilerplate • Modernizr

31. Reference • Responsive web design • http://www.alistapart.com/articles/responsive-web- design/ • http://net.tutsplus.com/tutorials/html-css- techniques/responsive-web-design-a-visual-guide/ • http://mediaqueri.es/ • HTML5 • http://www.html5rocks.com

Responsive web design

Recommended

Recommended

More Related Content

Similar to Responsive web design

Similar to Responsive web design (20)

More from Janet Huang

More from Janet Huang (13)

Recently uploaded

Recently uploaded (20)

Responsive web design