Devon 2011-f-1 반응형 웹 디자인

•

1 like•690 views

The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.

Responsive Web Design

Daum communications
FT 개발 1팀 정승희

Responsive Web Design
MAY 25, 2010 by Ethan Marcotte

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

The ingredients

 A flexible, grid-based layout,
 Flexible images and media, and
 Media queries, a module from the CSS3 specification

RWD: The ingredients

A flexible, grid-based layout,
 Flexible images and media, and
 Media queries, a module from the CSS3 specification

Fluid Grids
MARCH 3, 2009 by Ethan Marcotte

http://www.alistapart.com/articles/fluidgrids/

$Flexible images and media img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }$

media queries

Types Features

 all  width
 screen  height
 device-width
 print
 device-height
 projection  orientation
 tv  aspect-ratio
 handheld  device-aspect-ratio
 …  color
 color-index
 …

An escalator can never break:
it can only become stairs.

full desktop site + media queries = mobile site?

Mobile is differenet!

http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design

media queries === silver bullets?

full desktop site
+ media queries
Sorry, not supported!
= mobile site

Rethink!

flexible mobile site
+ media queries

= full desktop site

progressive enhancement with Javascript

$(document).ready(function() {
$.get(“slides.html”, function(data) {
$(“.welcome .slides”)
.append(data)
.wrapInner('<div class=“slidewrap”>
<div id=“welcome-slides” class=“slider”>
</div></div>')
.find(“.slidewrap”)
.append(sNav)
.carousel({
slide: '.figure'
});
});

progressive enhancement with Javascript

Modernizr is
a small JavaScript library
that detects the availability of
native implementations for
next-generation web
technologies.

Modernizr.load([
{
test : Modernizr.websockets && window.JSON,
nope : 'functional-polyfills.js‘,
both : [ 'app.js', 'extra.js' ],
complete : function () {
myApp.init();
}
}
]);

Hiding image tags or CSS background images
using css media query

1. Determining key breakpoints!

+ features and capabilities
 screen size?
 local storage?
 touch event?
 application cache?
…

http://martymoo.com/blog/2011/08/26/mobile-first-responsive-design-and-me/

Accessible on any browsers
HTML
CSS older browser, mobile browser…

Accessible on any browsers
HTML + javascript
CSS
Javascript

Accessible on any browsers
HTML + javascript
CSS3
+ media queries
Javascript
+…

complete development & test

Build It!
HTML
CSS3
Javascript

features and capabilities
screen size?
local storage?
touch event?
application cache?
…

features and capabilities

HTML HTML HTML
CSS3 CSS3 CSS3
Javascript Javascript Javascript

features and capabilities
http://www.daum.net
screen size?
local storage?
touch event?
application cache?
…

server side

HTML
what get adaptive resources
kind of…? CSS
java
script

Viewers also liked

2016웹트렌드와 반응형웹

Kim Ji-Man

평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기

clearboth

Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함

Woo Sanghun

[제5회] 9x년생 개발자 모임

Yurim Jin

HCI Principles for Mobile Devices

cesani

애자일 스크럼과 JIRA

Terry Cho

How to Teach UX Design

Christina Wodtke

O2O 스타트업에서 한 개발자의 이야기

Theodore(Yongbin) Cha

Viewers also liked (8)

2016웹트렌드와 반응형웹

평범한 에이전시 팀장의 일반적인 퍼블리싱 이야기

Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함

[제5회] 9x년생 개발자 모임

HCI Principles for Mobile Devices

애자일 스크럼과 JIRA

How to Teach UX Design

O2O 스타트업에서 한 개발자의 이야기

Similar to Devon 2011-f-1 반응형 웹 디자인

Pinkoi Mobile Web

mikeleeme

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...

Esri Nederland

This document provides an agenda for a presentation on building mobile map applications. It will cover 3 approaches to mobile map apps, frameworks for building them like CSS3 and HTML5, and hybrid map apps. It introduces the two presenters, Antoon Uijtdehaag and Andy Gup, and covers topics like why build mobile apps, demos of mobile apps, usage statistics, approaches, frameworks, and hybrid apps. It also includes questions that may come up around topics like panning and zooming maps, loading map layers, performance, and using GPS in surveys.

Responsive Enhancement

Sven Wolfermann

Responsive Web Design

Jason Harwig

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

jameswillweb

The Enterprise Dilemma: Native vs. Web

Motorola Mobility - MOTODEV

MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform. Topics include: -Key business and technology advantages of each approach -Examples of apps built on each platform -Browser support of HTML5 features -The hybrid app approach Twitter hashtag: #nativevsweb Got questions about this event tweet @motodev or post them on community.developer.motorola.com

Responsive websites. Toolbox

Wojtek Zając

Web Apps and more

Yan Shi

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

Web app and more

faming su

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

Responsive Websites

Joe Seifi

Responsive Web Design: Clever Tips and Techniques

Vitaly Friedman

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

Andreas Bovens

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.

Developing for Responsive Design - Frederic Welterlin

Razorfish

This document discusses responsive design and how it has evolved from Tim Berners-Lee's original vision of a universal linked information system. It defines responsive design as a web development approach where design and development respond to the user's behavior, environment, screen size, platform and orientation. The presenter discusses crafting responsive user experiences using flexible grids, flexible media, and media queries. He provides examples of when responsive design is and isn't warranted, using sites like Ford and United Airlines as examples. The presenter concludes by noting responsive design is still evolving and different solutions may be needed based on user needs and business tasks.

Making your site mobile-friendly - DevCSI Reading 21.07.2010

Patrick Lauke

Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 r...

Frédéric Harper

This document discusses how to prepare HTML5 games for Windows 8 using the WinJS library. It provides an overview of key Windows 8 features like the Windows Store and touch support. It then demonstrates how to use WinJS to add data binding, navigation between pages, and an app bar to an HTML5 game demo. The demo shows a list of hikers that can be navigated and includes an "Add Hiker" button in the app bar. It encourages developers building Windows 8 games to contact the author for help.

Media queries

Kevin DeRudder

This document discusses using media queries to build responsive mobile web applications. It begins by explaining why web developers should target multiple devices and discusses the differences between native and web applications. It then outlines how HTML5 and CSS3 features like media queries can be used to build responsive designs. The document provides an overview of common media query features and demonstrates how to write media queries to apply different styling based on screen width and other device characteristics.

HTML5 and the dawn of rich mobile web applications pt 1

James Pearce

Mobile applications are evolving to leverage HTML5 and rich web technologies. While native mobile applications currently have advantages in terms of performance and access to device features, HTML5 allows building applications that work across mobile devices and platforms using web standards. Frameworks like jQuery Mobile and Sencha Touch demonstrate how to build mobile-optimized interfaces using HTML, CSS, and JavaScript. HTML5 applications have the potential for broader reach and less development effort compared to building separate native apps, though performance compromises remain versus truly native apps.

Stocktwits & Responsive Web Design, social network meets flexible framework

John Strott

Html5 Whats around the bend

Raj Lal

Digibury: Getting your web presence mobile ready - David Walker

Lizzie Hodgson

This document discusses how to make websites responsive using CSS frameworks. It explains that mobile usage is growing and users expect mobile-friendly sites. CSS frameworks like Foundation can help bridge skills gaps by providing preset responsive grids and functionality. The document outlines the minimum requirements for responsive design like fluid images and media queries. It provides examples of how to use Foundation's grid system and other tools to create responsive layouts and images. While frameworks have pros like speeding development, they also have cons like restricting freedom; responsive design requires going beyond simple layout changes.

Similar to Devon 2011-f-1 반응형 웹 디자인 (20)

Pinkoi Mobile Web

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...

Responsive Enhancement

Responsive Web Design

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

The Enterprise Dilemma: Native vs. Web

Responsive websites. Toolbox

Web Apps and more

Web app and more

Responsive Websites

Responsive Web Design: Clever Tips and Techniques

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

Developing for Responsive Design - Frederic Welterlin

Making your site mobile-friendly - DevCSI Reading 21.07.2010

Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 r...

Media queries

HTML5 and the dawn of rich mobile web applications pt 1

Stocktwits & Responsive Web Design, social network meets flexible framework

Html5 Whats around the bend

Digibury: Getting your web presence mobile ready - David Walker

Recently uploaded

20240704 QFM023 Engineering Leadership Reading List June 2024

Matthew Sinclair

20240705 QFM024 Irresponsible AI Reading List June 2024

Matthew Sinclair

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

Best Programming Language for Civil Engineers

Awais Yaseen

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

Best Practices for Effectively Running dbt in Airflow.pdf

Tatiana Al-Chueyr

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

TrustArc

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

jackson110191

7 Most Powerful Solar Storms in the History of Earth.pdf

Enterprise Wired

The Rise of Supernetwork Data Intensive Computing

Larry Smarr

20240702 QFM021 Machine Intelligence Reading List June 2024

Matthew Sinclair

Quantum Communications Q&A with Gemini LLM

Vijayananda Mohire

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

ArgaBisma

Password Rotation in 2024 is still Relevant

Bert Blevins

Observability For You and Me with OpenTelemetry

Eric D. Schabell

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

Mitigating the Impact of State Management in Cloud Stream Processing Systems

ScyllaDB

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

Manual | Product | Research Presentation

welrejdoall

Choose our Linux Web Hosting for a seamless and successful online presence

rajancomputerfbd

How RPA Help in the Transportation and Logistics Industry.pptx

SynapseIndia

What’s New in Teams Calling, Meetings and Devices May 2024

Stephanie Beckett

Measuring the Impact of Network Latency at Twitter

ScyllaDB

Recently uploaded (20)

20240704 QFM023 Engineering Leadership Reading List June 2024

20240705 QFM024 Irresponsible AI Reading List June 2024

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

Best Programming Language for Civil Engineers

Best Practices for Effectively Running dbt in Airflow.pdf

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

7 Most Powerful Solar Storms in the History of Earth.pdf

The Rise of Supernetwork Data Intensive Computing

20240702 QFM021 Machine Intelligence Reading List June 2024

Quantum Communications Q&A with Gemini LLM

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Password Rotation in 2024 is still Relevant

Observability For You and Me with OpenTelemetry

Mitigating the Impact of State Management in Cloud Stream Processing Systems

Manual | Product | Research Presentation

Choose our Linux Web Hosting for a seamless and successful online presence

How RPA Help in the Transportation and Logistics Industry.pptx

What’s New in Teams Calling, Meetings and Devices May 2024

Measuring the Impact of Network Latency at Twitter

Devon 2011-f-1 반응형 웹 디자인

1. Responsive Web Design Daum communications FT 개발 1팀 정승희

3. jQuery mobile test devices

7. Responsive Web Design MAY 25, 2010 by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/

8. The ingredients  A flexible, grid-based layout,  Flexible images and media, and  Media queries, a module from the CSS3 specification

9. RWD: The ingredients A flexible, grid-based layout,  Flexible images and media, and  Media queries, a module from the CSS3 specification

10. Fluid Grids MARCH 3, 2009 by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/

11. Fluid Grids is Flexible Layout

12. Flexible Layout

13. RWD: The ingredients  A flexible, grid-based layout, Flexible images and media, and  Media queries, a module from the CSS3 specification

14. Flexible images and media img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }

15. RWD: The ingredients  A flexible, grid-based layout,  Flexible images and media, and Media queries, a module from the CSS3 specification

16. media queries Types Features  all  width  screen  height  device-width  print  device-height  projection  orientation  tv  aspect-ratio  handheld  device-aspect-ratio  …  color  color-index  …

17. media queries in action

18. Responsive Layout

19. then, well done?

20. TECHNICAL CHALLENGES

21. PROGRESSIVE ENHANCEMENT

22. An escalator can never break: it can only become stairs.

23. full desktop site + media queries = mobile site?

24. Mobile is differenet! http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design

25. media queries === silver bullets? full desktop site + media queries Sorry, not supported! = mobile site

26. Rethink! flexible mobile site + media queries = full desktop site

27. progressive enhancement with Javascript $(document).ready(function() { $.get(“slides.html”, function(data) { $(“.welcome .slides”) .append(data) .wrapInner('<div class=“slidewrap”> <div id=“welcome-slides” class=“slider”> </div></div>') .find(“.slidewrap”) .append(sNav) .carousel({ slide: '.figure' }); });

28. progressive enhancement with Javascript Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies. Modernizr.load([ { test : Modernizr.websockets && window.JSON, nope : 'functional-polyfills.js‘, both : [ 'app.js', 'extra.js' ], complete : function () { myApp.init(); } } ]);

29. Hiding image tags or CSS background images using css media query

30. RESPONSIVE WEB DESIGN IN ACTION

31. 1. Determining key breakpoints! + features and capabilities  screen size?  local storage?  touch event?  application cache? … http://martymoo.com/blog/2011/08/26/mobile-first-responsive-design-and-me/

32. Accessible on any browsers HTML CSS older browser, mobile browser…

33. Accessible on any browsers HTML + javascript CSS Javascript Accessible on any browsers HTML + javascript CSS3 + media queries Javascript +…

34. complete development & test Build It! HTML CSS3 Javascript features and capabilities screen size? local storage? touch event? application cache? …

35. features and capabilities HTML HTML HTML CSS3 CSS3 CSS3 Javascript Javascript Javascript

36. features and capabilities http://www.daum.net screen size? local storage? touch event? application cache? …

37. server side HTML what get adaptive resources kind of…? CSS java script

Devon 2011-f-1 반응형 웹 디자인

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Devon 2011-f-1 반응형 웹 디자인

Similar to Devon 2011-f-1 반응형 웹 디자인 (20)

More from Daum DNA

More from Daum DNA (20)

Recently uploaded

Recently uploaded (20)

Devon 2011-f-1 반응형 웹 디자인