Responsive Design & CSS Frameworks

•

1 like•1,008 views

This document discusses responsive design and CSS frameworks. It defines responsive design as designing websites that respond to different screen sizes, platforms, and orientations. Responsive design uses media queries and CSS techniques to create a single website that adjusts its layout and features based on how it is viewed. Some key benefits of responsive design include being content focused, cost effective, cross-platform, easy to manage, and SEO friendly. The document then discusses responsive strategies like breaking points, dynamic fonts, flexible grid layouts, and content choreography. It also covers responsive design tools like the developer toolbar and responsive design mode in browsers. Finally, it lists some popular CSS frameworks and other libraries that can be used for responsive design.

RESPONSIVE DESIGN
&CSS FRAMEWORKS
(OR HOW TO MAKE YOUR WEBSITE LOOK AMAZING ALL THE TIME)

A little
about me
I’m a Branding specialist
that works in the intersection between
Branding and technology
a.k.a UX Design
currently:

RESPONSIVE WEB DESIGN MEANS DESIGNING
YOUR WEBSITE SO THAT IT RESPONDS TO YOUR
USERS ENVIRONMENT BASED ON SCREEN-SIZE,
PLATFORM AND ORIENTATION.

RESPONSIVE DESIGN IS A
‘WRITE ONCE’
RUN EVERYWHERE STYLE OF DESIGNING WEBSITES.
RATHER TO BUILDING SEPARATE WEBSITES FOR EACH
WEB AND MOBILE DEVICE.

RESPONSIVE DESIGN USES MEDIA QUERIES AND OTHER
CSS TECHNIQUES TO CREATE A SINGLE WEBSITE THAT
ADJUSTS IT’S LAYOUT AND FEATURES BASED ON HOW
ITS BEING VIEWED.

KEY BENEFITS:
CONTENT
FOCUSED
COST
EFFECTIVE
CROSS
PLATFORM
EASY TO
MANAGE
SEO
FRIENDLY
FUTURE
PROOF?

DAY BY DAY, THE NUMBER OF DEVICES,
PLATFORMS AND BROWSERS THAT NEED TO WORK
WITH YOUR SITE GROWS. RESPONSIVE WEB DESIGN
REPRESENTS A FUNDAMENTAL SHIFT IN HOW WE’LL
BUILD WEBSITES FOR THE DECADE TO COME
- Jeffrey Veen

YESTERDAY
Desktop app, poor mobile interfaces

TODAY
Web App, Mobile, Smart TVs, Game Consoles

FUTURE
WEAREABLES, IOT, ARTIFICIAL INTELLIGENCE

A DIGITAL
EXPERIENCE,
SAME CONTENT,
DIFFERENT
SHAPES

BUT BEFORE WE START..
WHAT OTHER
OPTIONS EXIST
?AND WHY SHOULD WE CONSIDER THEM?

STATICADAPTATIVERESPONSIVE
AWDRWD SWD
COST
EFFECTIVE
CROSS
PLATFORM
EASY TO
UPDATE
SEO
FRIENDLY
PERFORMANCE
USER
FRIENDLY
<CODE>
2X

RESPONSIVENESS STARTS AT RESPONDING FAST
OPTIMIZATION
IS EVERTHING

OPTIMIZATION
IS EVERTHING
BLAME THE IMPLEMENTATION NOT THE TECHNIQUE.

!
USER FEEL THAT THE SYSTEM IS
REACTING INSTANTANEOUSLY.
!
USER START FEELING DELAY
!
!
!
USER'S ATTENTION IS GONE
OPTIMIZATION
IS EVERTHING
0.1SECONDS
1.0SECONDS
10SECONDS

OPTIMIZATION
IS EVERTHING
PERFORMANCE IS A FUNDAMENTAL
COMPONENT OF THE USER EXPERIENCE
PERFORMANCE NEEDS TO MATTER
BECAUSE IT MATTERS TO THE USER.

FLUID GRIDS, FLEXIBLE IMAGES, AND MEDIA
QUERIES ARE THE THREE TECHNICAL INGREDIENTS
FOR RESPONSIVE WEB DESIGN, BUT IT ALSO
REQUIRES A DIFFERENT WAY OF THINKING.
-ETHAN MARCOTTE

RESPONSIVE
STRATEGIES
A. BREAKING POINT
B. DYNAMIC FONTS
C. FLEXIBLE GRID LAYOUT
D. CONTENT COREOGRAPHY

A. BREAKING POINT
@media screen(min-width: 320px;) {
.banner{color:red;}
}
RESPONSIVE SRATEGIES

A. BREAKING POINTS
/*========== Mobile First Method ==========*/!
!
/* Custom, iPhone Retina */ !
@media screen(min-width : 320px) {!
!
}!
!
/* Extra Small Devices, Phones */ !
@media screen (min-width : 480px) {!
!
}!
!
/* Small Devices, Tablets */!
@media screen(min-width : 768px) {!
!
}!
!
/* Medium Devices, Desktops */!
@media screen (min-width : 992px) {!
!
}!
!
/* Large Devices, Wide Screens */!
@media screen (min-width : 1200px) {!
!
}!
RESPONSIVE SRATEGIES

B. DYNAMIC FONTS
RESPONSIVE SRATEGIES
em pxfont-size: 1em; font-size: 20px;
SCALE
DYNAMICALLY
DOESN’T SCALE
DYNAMICALLY

em px
html { font-size: 1em; }!
!
h1 { font-size: 2.074em; }!
!
h2 { font-size: 1.728em; }!
!
h3 { font-size: 1.44em; }!
!
h4 { font-size: 1.2em; }!
!
small { font-size: 0.833em; }!
!
.box { padding: 1.25em; }!
!
!
!
@media screen(min-width: 1400px) {!
html { font-size: 1.25em; }!
}
html { font-size: 16px; }!
!
h1 { font-size: 20px; }!
!
h2 { font-size: 25px; }!
!
h3 { font-size: 30px; }!
!
h4 { font-size: 35; }!
!
small { font-size: 45px; }!
!
.box { padding: 15px; }!
!
!
:(!!
!
http://pxtoem.com/
B. DYNAMIC FONTS
RESPONSIVE SRATEGIES

C. FLEXIBLE GRID LAYOUT
1 2 3 4 5 6 7 8 9 10 11 12
RESPONSIVE SRATEGIES

http://getbootstrap.com/examples/grid/
C. FLEXIBLE GRID LAYOUT
RESPONSIVE SRATEGIES

D. CONTENT COREOGRAPHY
RESPONSIVE SRATEGIES

RESPONSIVE
DESIGN MODE
NETWORK MONITOR
+ialt+
Firefox
DEVELOPER
TOOLBAR
DEVELOPER TOOLBAR AVAILABLE IN FIREFOX, CHROME AND SAFARI

DEVELOPER
TOOLBAR
RESPONSIVE
DESIGN MODE
+ialt+

CSS FRAMEWORK
BOOTSTRAP FOUNDATION
OTHER OPTIONS: SKELETON, GOLDEN GRID SYSTEM, MUELLER GRID SYSTEM, ETC.

OTHER
LIBRARIES
http://simplefocus.com/ﬂowtype/http://jqueryui.com/
http://fortawesome.github.io/Font-Awesome/ http://modernizr.com/ http://ﬁttextjs.com/

Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/ It seems that not a week goes by without a shiny new framework of some type — be it CSS or JS. But no matter how awesome they are, each have shortcomings and idiosyncrasies that invariably make you ask, 'Why?' Now imagine someone gave you the ability to start from scratch to create your own framework. No strings. No preconceptions — well, except that it has to be enterprise scale, platform agnostic, and work in a whole host of disparate situations. In this session, Stephanie will talk about some of the challenges, hurdles, tradeoffs, and unique decisions Salesforce UX made on the way to building an enterprise framework.

Service Design & the Internet of Things / Service Design Drinks

Service Design Berlin

The internet of things is surrounding us. We are wearing fitness bands around our wrists, have scales in our bathroom connected to our smartphones and a smoke detector to send us a notification in case of fire. How can we integrate this new generation of connected products into existing or new services? How can we incorporate them into services ranging from the smart home to smart car to smart city? This special edition of Service Design Drinks took place at Fab Lab Berlin and invited service designer, service innovators, makers and entrepreneurs to discuss the application and integration of connected things into future services. Three speakers from renown companies gave short input talks, followed by an interactive session and time for further exchange. The guest speakers were: • Hannes Jentsch, Independent Design Consultant • Thomas Schörner, Design Lead IoT, SAP • Ricardo Brito, UX & Service Designer, Futurice

Seven Steps to Creating a Framework

Rob Philibert

Amuse UX 2015: Y.Vetrov — Platform Thinking

Yury Vetrov

Responsive Webdesign

Antonio De Pasquale

Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution. This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.

Interaction designers vs algorithms

cxpartners

An Introduction To Chat Bots

Sohan Maheshwar

Artificial Intelligence: Predictions for 2017

NVIDIA

Finite Element Analysis of Human RIB Cage

IJMER

This paper of finite element analysis of the rib cage model is applied to recognize stress distributions and to determine the rate of bone fractures(especially for pathologically changed bones). Also to determine the load and stress to occurs on the human rib cage at any accident. Also find the maximum load sustain capacity of human rib cage and according to the load sustain capacity of the human rib cage by finite element analysis and search a material as like a bone cement and it take on a rib fracture and see the result . This paper is only of to nullify the rib fracture as present medical treatment give the elastic belt but due to respiration, the human ribs are contract and relax that’s the rib fracture are only minimize not a nullify. The human models are considered in between age 15 to 40 year. The Simulation result shows a good agreement with the cadaver test data.

Responsive Web Design

Tien Tran Le Duy

Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia

Viewers also liked

Managing responsive websites with css preprocessors.

The University of Akron

Lessons Learned From Building Your Own CSS Framework

sonniesedge

Roll Your Own CSS Framework

Mike Aparicio

Making Your Own CSS Framework

Dan Sagisser

How to develop a CSS FrameworkOlivier Besson

Mobile Convention Amsterdam 2015 / IoT Strategy - Mark Brill

Mobile Convention Amsterdam 2015

Media queries and frameworks

Nicole Ryan

Artificial intelligence study project

Victoria Gnatoka

Interusability: designing a coherent system UX

Claire Rowland

SXSW 2014: Re-orientating UX Design for the Internet of Things

Alfred Lui

Grid system introduction

ananda gunadharma

Designing an Enterprise CSS Framework is Hard, Stephanie Rewis

Future Insights

Service Design & the Internet of Things / Service Design Drinks

Service Design Berlin

Seven Steps to Creating a Framework

Rob Philibert

Amuse UX 2015: Y.Vetrov — Platform Thinking

Yury Vetrov

Responsive Webdesign

Antonio De Pasquale

Interaction designers vs algorithms

cxpartners

An Introduction To Chat Bots

Sohan Maheshwar

Artificial Intelligence: Predictions for 2017

NVIDIA

Finite Element Analysis of Human RIB Cage

IJMER

Viewers also liked (20)

Managing responsive websites with css preprocessors.

Lessons Learned From Building Your Own CSS Framework

Roll Your Own CSS Framework

Making Your Own CSS Framework

How to develop a CSS Framework

Mobile Convention Amsterdam 2015 / IoT Strategy - Mark Brill

Media queries and frameworks

Artificial intelligence study project

Interusability: designing a coherent system UX

SXSW 2014: Re-orientating UX Design for the Internet of Things

Grid system introduction

Designing an Enterprise CSS Framework is Hard, Stephanie Rewis

Service Design & the Internet of Things / Service Design Drinks

Seven Steps to Creating a Framework

Amuse UX 2015: Y.Vetrov — Platform Thinking

Responsive Webdesign

Interaction designers vs algorithms

An Introduction To Chat Bots

Artificial Intelligence: Predictions for 2017

Finite Element Analysis of Human RIB Cage

Similar to Responsive Design & CSS Frameworks

Responsive Web Design

Tien Tran Le Duy

Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia

Developing for Responsive Design - Frederic WelterlinRazorfish

Responsive Web Design

danpastori

Workshop 11: Trendy web designs & prototyping

Visual Engineering

The Rise Of Tablets: Responsive Web Design is in your future

Rick Wilson

The rise of tablets how responsive web design is in your future

Internet Merchants Association

Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future. Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Suzanne Dergacheva

Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors. This session will discuss how you can apply responsive design techniques to your Drupal website and how to make design choices that work within a responsive framework. Topics will include: Steps to building a responsive Drupal 7 theme Challenges when designing a responsive layout Drupal elements that are particularly challenging to adapt CSS techniques for responsive design Responsive Drupal base themes

Building Responsive Websites with Drupal

Suzanne Dergacheva

Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors. This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics: * Steps to building a responsive Drupal 7 theme * Challenges when designing a responsive layout * Drupal elements that are particularly challenging to adapt * CSS techniques for responsive design * Responsive Drupal base themes

Designing for mobile

Dee Sadler

Optimizing Sites for Mobile Devices

jameswillweb

Stocktwits & Responsive Web Design, social network meets flexible framework

John Strott

Introduction to Responsive Web DesignShawn Calvert

Responsive Web Design (HeadStart TechTalks)

Tirthesh Ganatra

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

jameswillweb

Mobile Web Overview https://www.edocr.com/v/k52p5vj4/

Jack Zheng

For the most recent version please visit: https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview I have developed the mobile web development course and modules for some courses in KSU/SPSU. This is overview module to introduce the whole field. Topics include choices of mobile application development and delivery, basic principles and best practices of mobile friendly web sites and web applications, and major tools and frameworks.

Responsive Web Design in iMIS (NiUG Austin 2015)

Andrea Robertson

Adaptive layouts - standards>next Manchester 23.03.2011

Patrick Lauke

Adobe 30iun2011Agora Group

Responsive Web Design Basics

Austin Walker

Similar to Responsive Design & CSS Frameworks (20)

Responsive Web Design

Breaking the Box: Pushing the Boundaries of UX with Drupal

Developing for Responsive Design - Frederic Welterlin

Responsive Web Design

Workshop 11: Trendy web designs & prototyping

The Rise Of Tablets: Responsive Web Design is in your future

The rise of tablets how responsive web design is in your future

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Building Responsive Websites with Drupal

Designing for mobile

Optimizing Sites for Mobile Devices

Stocktwits & Responsive Web Design, social network meets flexible framework

Introduction to Responsive Web Design

Responsive Web Design (HeadStart TechTalks)

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

Mobile Web Overview https://www.edocr.com/v/k52p5vj4/

Responsive Web Design in iMIS (NiUG Austin 2015)

Adaptive layouts - standards>next Manchester 23.03.2011

Adobe 30iun2011

Responsive Web Design Basics

Recently uploaded

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.

Epistemic Interaction - tuning interfaces to provide information for AI support

Alan Dix

Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024 https://alandix.com/academic/papers/synergy2024-epistemic/ As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...

Product School

Key Trends Shaping the Future of Infrastructure.pdf

Cheryl Hung

Bits & Pixels using AI for Good.........

Alison B. Lowndes

Neuro-symbolic is not enough, we need neuro-*semantic*

Frank van Harmelen

Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”. All of this illustrated with link prediction over knowledge graphs, but the argument is general.

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

Designing Great Products: The Power of Design and Leadership by Chief Designe...

Product School

The Future of Platform Engineering

Jemma Hussein Allen

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Product School

Elevating Tactical DDD Patterns Through Object Calisthenics

Dorra BARTAGUIZ

After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Jeffrey Haguewood

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams. Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Connector Corner: Automate dynamic content and events by pushing a button

DianaGray10

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

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

GraphRAG is All You need? LLM & Knowledge Graph

Guy Korland

Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs. 1. Unifying Large Language Models and Knowledge Graphs: A Roadmap. https://arxiv.org/abs/2306.08302 2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs: https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/

Monitoring Java Application Security with JDK Tools and JFR Events

Ana-Maria Mihalceanu

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

Product School

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

Prayukth K V

The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development. The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers: State of global ICS asset and network exposure Sectoral targets and attacks as well as the cost of ransom Global APT activity, AI usage, actor and tactic profiles, and implications Rise in volumes of AI-powered cyberattacks Major cyber events in 2024 Malware and malicious payload trends Cyberattack types and targets Vulnerability exploit attempts on CVEs Attacks on counties – USA Expansion of bot farms – how, where, and why In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East Why are attacks on smart factories rising? Cyber risk predictions Axis of attacks – Europe Systemic attacks in the Middle East Download the full report from here: https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/

Assuring Contact Center Experiences for Your Customers With ThousandEyes

ThousandEyes

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

Recently uploaded (20)

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

Epistemic Interaction - tuning interfaces to provide information for AI support

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...

Key Trends Shaping the Future of Infrastructure.pdf

Bits & Pixels using AI for Good.........

Neuro-symbolic is not enough, we need neuro-*semantic*

When stars align: studies in data quality, knowledge graphs, and machine lear...

Designing Great Products: The Power of Design and Leadership by Chief Designe...

The Future of Platform Engineering

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Elevating Tactical DDD Patterns Through Object Calisthenics

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Connector Corner: Automate dynamic content and events by pushing a button

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

GraphRAG is All You need? LLM & Knowledge Graph

Monitoring Java Application Security with JDK Tools and JFR Events

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

Assuring Contact Center Experiences for Your Customers With ThousandEyes

How world-class product teams are winning in the AI era by CEO and Founder, P...

Responsive Design & CSS Frameworks

1. RESPONSIVE DESIGN &CSS FRAMEWORKS (OR HOW TO MAKE YOUR WEBSITE LOOK AMAZING ALL THE TIME)

2. A little about me I’m a Branding specialist that works in the intersection between Branding and technology a.k.a UX Design currently:

3. WHAT IS RESPONSIVE DESIGN?

4. RESPONSIVE WEB DESIGN MEANS DESIGNING YOUR WEBSITE SO THAT IT RESPONDS TO YOUR USERS ENVIRONMENT BASED ON SCREEN-SIZE, PLATFORM AND ORIENTATION.

5. RESPONSIVE DESIGN IS A ‘WRITE ONCE’ RUN EVERYWHERE STYLE OF DESIGNING WEBSITES. RATHER TO BUILDING SEPARATE WEBSITES FOR EACH WEB AND MOBILE DEVICE.

6. RESPONSIVE DESIGN USES MEDIA QUERIES AND OTHER CSS TECHNIQUES TO CREATE A SINGLE WEBSITE THAT ADJUSTS IT’S LAYOUT AND FEATURES BASED ON HOW ITS BEING VIEWED.

7. KEY BENEFITS: CONTENT FOCUSED COST EFFECTIVE CROSS PLATFORM EASY TO MANAGE SEO FRIENDLY FUTURE PROOF?

8. DAY BY DAY, THE NUMBER OF DEVICES, PLATFORMS AND BROWSERS THAT NEED TO WORK WITH YOUR SITE GROWS. RESPONSIVE WEB DESIGN REPRESENTS A FUNDAMENTAL SHIFT IN HOW WE’LL BUILD WEBSITES FOR THE DECADE TO COME - Jeffrey Veen

9. YESTERDAY Desktop app, poor mobile interfaces

10. TODAY Web App, Mobile, Smart TVs, Game Consoles

11. FUTURE WEAREABLES, IOT, ARTIFICIAL INTELLIGENCE

12. A DIGITAL EXPERIENCE, SAME CONTENT, DIFFERENT SHAPES

13. A DIGITAL EXPERIENCE, SAME CONTENT, DIFFERENT SHAPES

14. http://madamegautier.co.uk/

15. http://www.regent-college.edu/

16. http://danielvane.com/

17. BUT BEFORE WE START.. WHAT OTHER OPTIONS EXIST ?AND WHY SHOULD WE CONSIDER THEM?

18. STATICADAPTATIVERESPONSIVE AWDRWD SWD COST EFFECTIVE CROSS PLATFORM EASY TO UPDATE SEO FRIENDLY PERFORMANCE USER FRIENDLY <CODE> 2X

19. RESPONSIVENESS STARTS AT RESPONDING FAST OPTIMIZATION IS EVERTHING

20. OPTIMIZATION IS EVERTHING BLAME THE IMPLEMENTATION NOT THE TECHNIQUE.

21. ! USER FEEL THAT THE SYSTEM IS REACTING INSTANTANEOUSLY. ! USER START FEELING DELAY ! ! ! USER'S ATTENTION IS GONE OPTIMIZATION IS EVERTHING 0.1SECONDS 1.0SECONDS 10SECONDS

22. OPTIMIZATION IS EVERTHING PERFORMANCE IS A FUNDAMENTAL COMPONENT OF THE USER EXPERIENCE PERFORMANCE NEEDS TO MATTER BECAUSE IT MATTERS TO THE USER.

23. RESPONSIVE STRATEGIES

24. FLUID GRIDS, FLEXIBLE IMAGES, AND MEDIA QUERIES ARE THE THREE TECHNICAL INGREDIENTS FOR RESPONSIVE WEB DESIGN, BUT IT ALSO REQUIRES A DIFFERENT WAY OF THINKING. -ETHAN MARCOTTE

25. RESPONSIVE STRATEGIES A. BREAKING POINT B. DYNAMIC FONTS C. FLEXIBLE GRID LAYOUT D. CONTENT COREOGRAPHY

26. A. BREAKING POINT @media screen(min-width: 320px;) { .banner{color:red;} } RESPONSIVE SRATEGIES

27. A. BREAKING POINTS /*========== Mobile First Method ==========*/! ! /* Custom, iPhone Retina */ ! @media screen(min-width : 320px) {! ! }! ! /* Extra Small Devices, Phones */ ! @media screen (min-width : 480px) {! ! }! ! /* Small Devices, Tablets */! @media screen(min-width : 768px) {! ! }! ! /* Medium Devices, Desktops */! @media screen (min-width : 992px) {! ! }! ! /* Large Devices, Wide Screens */! @media screen (min-width : 1200px) {! ! }! RESPONSIVE SRATEGIES

28. B. DYNAMIC FONTS RESPONSIVE SRATEGIES em pxfont-size: 1em; font-size: 20px; SCALE DYNAMICALLY DOESN’T SCALE DYNAMICALLY

29. em px html { font-size: 1em; }! ! h1 { font-size: 2.074em; }! ! h2 { font-size: 1.728em; }! ! h3 { font-size: 1.44em; }! ! h4 { font-size: 1.2em; }! ! small { font-size: 0.833em; }! ! .box { padding: 1.25em; }! ! ! ! @media screen(min-width: 1400px) {! html { font-size: 1.25em; }! } html { font-size: 16px; }! ! h1 { font-size: 20px; }! ! h2 { font-size: 25px; }! ! h3 { font-size: 30px; }! ! h4 { font-size: 35; }! ! small { font-size: 45px; }! ! .box { padding: 15px; }! ! ! :(!! ! http://pxtoem.com/ B. DYNAMIC FONTS RESPONSIVE SRATEGIES

30. C. FLEXIBLE GRID LAYOUT 1 2 3 4 5 6 7 8 9 10 11 12 RESPONSIVE SRATEGIES

31. http://getbootstrap.com/examples/grid/ C. FLEXIBLE GRID LAYOUT RESPONSIVE SRATEGIES

32. D. CONTENT COREOGRAPHY RESPONSIVE SRATEGIES

33. RESPONSIVE DESIGN TOOLS

34. RESPONSIVE DESIGN MODE NETWORK MONITOR +ialt+ Firefox DEVELOPER TOOLBAR DEVELOPER TOOLBAR AVAILABLE IN FIREFOX, CHROME AND SAFARI

35. DEVELOPER TOOLBAR RESPONSIVE DESIGN MODE +ialt+

36. DEVELOPER TOOLBAR NETWORK MONITOR

37. CSS FRAMEWORK BOOTSTRAP FOUNDATION OTHER OPTIONS: SKELETON, GOLDEN GRID SYSTEM, MUELLER GRID SYSTEM, ETC.

38. OTHER LIBRARIES http://simplefocus.com/ﬂowtype/http://jqueryui.com/ http://fortawesome.github.io/Font-Awesome/ http://modernizr.com/ http://ﬁttextjs.com/

39. THANKS! @JERRYCID GCID@MYRING.IO