Responsive Web Design 帶來了網頁技術的革新,僅僅透過 Media Queries 偵測螢幕尺寸,便能提供適合不同尺寸裝置的內容與樣式。
但光是從螢幕尺寸來偵測行動裝置的瀏覽能力,無疑是瞎子摸象。近兩年內的智慧型手機已經數度提高尺寸與解析度,行動網頁的媒體品質與豐富性也須一併提升。在內容品質提升的同時,過多的圖片或物件可能會降低使用者經驗或付出較高的代價。
從技術角度來看,可歸納『資源一致性』、『相容彈性』、『環境適應』、『品質最佳化』等四個要素。本題將就此四項要素介紹應用實例,說明如何提高 Responsive Web 的彈性,並增加行動網頁瀏覽效率。
Plog2014 - Saucelabs - a perspective on tiles to empower your plone editorssimahawk
Overview on sauceslabs.com migration to Plone CMS.
The official public website is in the process o migrating to Plone. We empowered their editors using Plone and a custom interface for building composite pages with predefined tiles.
Plog2014 - Saucelabs - a perspective on tiles to empower your plone editorssimahawk
Overview on sauceslabs.com migration to Plone CMS.
The official public website is in the process o migrating to Plone. We empowered their editors using Plone and a custom interface for building composite pages with predefined tiles.
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
The slides from our presentation on responsive web design using the StockTwits site as a case study. No audio, but feel free to contact us for more information regarding this deck.
The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.
The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
Join the largest JavaScript Conference in Israel Things have changed. Today JS is the language of the web. On the client, on the server, on the mobile, everywhere. But let's face it: JS still has challenges.
These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
This presentation was originally presented at Drupal Camp Toronto, 2012.
To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study
-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.
It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:
Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking
----- Originally Presented at Drupal Camp Toronto 2012 -----
http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix
Microservices in der Cloud - Software Architecture Summit Berlin 2016Christian Deger
http://software-architecture-summit.de/session/microservices-in-der-cloud-mit-autoscout24-auf-die-ueberholspur/
Keine Lust mehr auf Stau im Rechenzentrum? Wieso nicht einen Gang zulegen und auf die Überholspur wechseln? Lernen Sie, wie AutoScout24 die Autobahn in der Cloud baut. Wir erfinden uns grundlegend neu und wechseln vom Monolithen zu Microservices, von .NET auf Windows zu Scala auf Linux, vom Rechenzentrum zu AWS und von getrennter Entwicklung und Betriebsabteilung zu einer Kultur der Zusammenarbeit. An diesem Beispiel aus der Praxis werden sie erfahren, wieso diese Transformation wichtig ist, wie man „Cloud-native“ wird, wie eine Architektur sich entwickelt, wie autonome Teams Software entwickeln und betreiben und wie Prinzipien Orientierung geben.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
In today's digital landscape, a fast and responsive website is essential for success. The pursuit of improving website performance and speed has transformed the development landscape. Meet Next.js - the solution to building faster, more responsive, and highly visible websites, including the Next.js blog.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Pedro Marques
Slides da lightning talk ministrada no Front In BH.
Os slides falam sobre o processo de se desenhar para telas de altas resoluções e também sobre o web design para Google Glass.
Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.
Alexa IT Solution Responsive Web designingRavi Panchal
Alexa IT Solution company specialising in Business and E-commerce website, mobile and web application and services. We are located in ahmedabad, india.
How to be an effective designer to work with the developer.
This is shared at the UX meetup with NCKU ID Alumni and the topic is inspired by Effective Engineer.
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...Chris Wu
Our experiences in building a e-commerce site for fashion Industry.
In this presentation, we share our experience building a fashion content marketing site with Drupal and integrating Shopify as the e-commerce platform.
More Related Content
Similar to 從技術角度看 RWD - Technical Approaches to RWD
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
The slides from our presentation on responsive web design using the StockTwits site as a case study. No audio, but feel free to contact us for more information regarding this deck.
The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.
The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
Join the largest JavaScript Conference in Israel Things have changed. Today JS is the language of the web. On the client, on the server, on the mobile, everywhere. But let's face it: JS still has challenges.
These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
This presentation was originally presented at Drupal Camp Toronto, 2012.
To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study
-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.
It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:
Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking
----- Originally Presented at Drupal Camp Toronto 2012 -----
http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix
Microservices in der Cloud - Software Architecture Summit Berlin 2016Christian Deger
http://software-architecture-summit.de/session/microservices-in-der-cloud-mit-autoscout24-auf-die-ueberholspur/
Keine Lust mehr auf Stau im Rechenzentrum? Wieso nicht einen Gang zulegen und auf die Überholspur wechseln? Lernen Sie, wie AutoScout24 die Autobahn in der Cloud baut. Wir erfinden uns grundlegend neu und wechseln vom Monolithen zu Microservices, von .NET auf Windows zu Scala auf Linux, vom Rechenzentrum zu AWS und von getrennter Entwicklung und Betriebsabteilung zu einer Kultur der Zusammenarbeit. An diesem Beispiel aus der Praxis werden sie erfahren, wieso diese Transformation wichtig ist, wie man „Cloud-native“ wird, wie eine Architektur sich entwickelt, wie autonome Teams Software entwickeln und betreiben und wie Prinzipien Orientierung geben.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
In today's digital landscape, a fast and responsive website is essential for success. The pursuit of improving website performance and speed has transformed the development landscape. Meet Next.js - the solution to building faster, more responsive, and highly visible websites, including the Next.js blog.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Pedro Marques
Slides da lightning talk ministrada no Front In BH.
Os slides falam sobre o processo de se desenhar para telas de altas resoluções e também sobre o web design para Google Glass.
Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.
Alexa IT Solution Responsive Web designingRavi Panchal
Alexa IT Solution company specialising in Business and E-commerce website, mobile and web application and services. We are located in ahmedabad, india.
How to be an effective designer to work with the developer.
This is shared at the UX meetup with NCKU ID Alumni and the topic is inspired by Effective Engineer.
Building E-Commerce Content Marketing Site for Fashion Industry - Drupal Camp...Chris Wu
Our experiences in building a e-commerce site for fashion Industry.
In this presentation, we share our experience building a fashion content marketing site with Drupal and integrating Shopify as the e-commerce platform.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
8. Technical Approach to Responsive Web Design 8
Mobile Friendly
現今搜尋引擎排名的要件
排名退後,你知道你⽼老闆現在⾮非常⽕火嗎?
APR. 21
2015
Google expanding the use of mobile-friendliness as a
ranking signal.
FEB. 26
2015
Google announced two
important changes about
mobile-friendly content.
10. Technical Approach to Responsive Web Design 10
嗨!可以看看你的網站嗎?
好啊!
可以讓我知道你的裝置類型嗎?
我是 iPad mini 上的 Safari
OK,提供你適合的樣式跟程式
AWD
Adaptive Web Design
11. Technical Approach to Responsive Web Design 11
嗨!來看看 modernweb.tw 網站!
好啊!
可以讓我知道你的螢幕多⼤大嗎?
我的畫⾯面寬度是 768 px
OK,那你⽤用平板的樣式瀏覽網站
Tablet
RWD
Responsive Web Design
Desktop Mobile
12. Technical Approach to Responsive Web Design 12
Desktop
Tablet
Mobile
RWD
Responsive Web Design
13. Technical Approach to Responsive Web Design 13
嗨!可以看看你的網站嗎?
好啊!
可以讓我知道你的裝置類型嗎?
我是 iPad mini 上的 Safari
RESS
Responsive Web Design with Server Side Components
Tablet
Portrait
Tablet
Landscape
Mobile
我的畫⾯面寬度是 768 px
OK,這些是你需要的檔案 Mobile
25. Technical Approach to Responsive Web Design 25
960
1,286
1,701
1,953kb
End of
2011
End of
2012
End of
2013
End of
2014
網路終端速度越快,相同時間能下載的量便⼤大
單⽉月平均網站下載⼤大⼩小
HTTP Archive Report
http://httparchive.org/trends.php
三年內網站的下載內容已經成⻑⾧長了⼀一倍
26. Technical Approach to Responsive Web Design 26
End of 2014
280
560
840
1120
1400
HTML CSS Flash JS Images Other
1,243
295
圖⽚片與指令稿
佔了網站內容的⼤大部份
Images: 63.65%
JavaScript: 15.10%
http://www.sitepoint.com/average-page-weight-increases-15-2014/
27. Technical Approach to Responsive Web Design 27
80/20 法則
處理好圖⽚片與 JS 的問題,便能夠解決⼤大部份的下載效能
58. Technical Approach to Responsive Web Design 58
what is <picture> element
HTML5 Living Standard
<picture>
<source
media="(min-‐width:
40em)"
srcset="big.jpg
1x,
big-‐hd.jpg
2x">
<source
srcset="small.jpg
1x,
small-‐hd.jpg
2x">
<img
src="fallback.jpg"
alt="">
</picture>
條件
倍率
未符合條件時的預設值
59. Technical Approach to Responsive Web Design 59
what is <img> element
HTML5 Living Standard
<img
src="small.jpg"
srcset="large.jpg
1024w,
medium.jpg
640w,
small.jpg
320w"
sizes="(min-‐width:
36em)
33.3vw,
100vw"
alt="A
rad
wolf">
Example:
⺫⽬目前寬度等於 30em 則顯⽰示圖⽚片寬度為 100vw
使⽤用 small.jpg 1x (320w / 320px) 或 medium.jpg 2x (640w / 320px)
條件
倍率
未符合條件時的預設值
顯⽰示寬度
60. Technical Approach to Responsive Web Design 60
*_desktop.jpg
only screen and (min-width:769px)
*_landscape.jpg
only screen and (min-width:415px)
*_portrait.jpg
fallback
61. Technical Approach to Responsive Web Design 61
<picture>
<source
media="(min-‐width:
769px)"
srcset="desktop.jpg
1x,
desktop-‐hd.jpg
2x”>
<source
media="(min-‐width:
415px)"
srcset="landscape.jpg
1x,
landscape-‐hd.jpg
2x”>
<img
srcset=“portrait.jpg
1x,
portrait-‐hd.jpg
2x”>
</picture>
RECAP
think about the case
62. Technical Approach to Responsive Web Design 62
RECAP
think about the case
*_large.jpg
*_medium.jpg
—
only screen
and
(min-width:769px)
only screen
and
(max-width:414px)
only screen
and
(min-width:415px)
63. Technical Approach to Responsive Web Design 63
<picture>
<source
media="(max-‐width:
414px)"
srcset="medium.jpg
1x,
medium-‐hd.jpg
2x">
<img
srcset=“blank.gif">
</picture>
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///
yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
RECAP
think about the case
64. Technical Approach to Responsive Web Design 64
<picture>
<source
media="(min-‐width:
415px)"
srcset="large.jpg
1x,
large-‐hd.jpg
2x">
<img
srcset=“blank.gif">
</picture>
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///
yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
RECAP
think about the case
65. Technical Approach to Responsive Web Design 65
Alternative
responsive media
SVG
適合插圖、Infographic 類型資
料使⽤用,可透過 CSS 達成動態
及互動。
可帶⼀一張,或是⼀一系列的圖。
Icon Font
適合網站單⾊色⼩小圖⽰示使⽤用,可
透過 CSS 修改 ICON ⾊色彩。單
⼀一檔案帶多個圖⽰示。
CSS3 Graphic
純 CSS 繪圖,難度較⾼高,可搭
配 CSS3 Animation 與 media
queries 產⽣生⾼高互動的圖案。
75. Technical Approach to Responsive Web Design 75
• Vibration API
• Battery Status API
• Media Capture & Streams
• http://mobilehtml5.org
HTML 5 + Device API
開網⾴頁就可以震動?!
76. Technical Approach to Responsive Web Design 76
Loading Widgets
trigger by device width or user-agent
在需要的時候才載⼊入內容
81. Technical Approach to Responsive Web Design 81
var iFrameLazy = function (viewMode) {
var iframes = viewMode.find('iframe');
jQuery.each(iframes, function (index, item) {
item.src = item.dataset.src;
});
};
Loading iframe
trigger by device width or user-agent