Responsive Web Design

Feb 24, 20161 like537 views

This document provides an overview of responsive web design. It defines responsive web design as an approach that aims to provide optimal viewing experiences across different devices. It discusses the history and alternatives to responsive design. The key aspects of responsive design are then explained, including fluid grids, flexible images, CSS media queries, and using the viewport meta tag. Tools for responsive design like Bootstrap and techniques like fluid layouts are also covered. Finally, resources for further learning about responsive web design are provided.

1
An introduction for Libraries
UW-SLIS CES Webinar April 6, 2015

TODAY’S AGENDA
• What is Responsive Web Design?
• Definition & History
• How do I DO Responsive Web Design?
• Tips & Tricks & Jargon
• Where do I go to learn more about Responsive Web
Design?
• Resources, Bibliography, SLIS/CES web course
2

WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
3

http://alistapart.com/article/responsive-web-design

HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

VIEWPORT META  
TAG
• Magic! Sort of
• Tells browser to adjust to
size of device
<meta name="viewport"
content="width=device width”
/>

FLUID LAYOUTS
• Escaping the CSS box model!
<div id=”outerwrap">
<div id="header">
<div id=“bodycontent”>
<div id="footer">
• Grid
• Makes content columns swing below each other to fit on
smaller, narrower, screen

http://www.responsivegridsystem.com/

SECRET OF COLUMNS
• New HTML5 element <section> Defines a section in
the document
• Sizing done in CSS
• Col and span aren’t only for tables anymore
• Table is a display property in CSS3 that says, “Let
the element behave like a <table> element”

CSS3 MEDIA QUERIES
• Used to mostly be screen or print
• Hide nav when printing
@media print { #navigation { display: none; } }.
• [W3Schools] Media queries look at the capability of the device, and
can be used to check many things, such as:
• width and height of the browser window
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• Resolution
• You can also have different stylesheets for different media

TOOLS
• Bootstrap
• Word Press Responsive themes
• All sorts of code generators & downloads –
• Responsive Grid System
http://www.responsivegridsystem.com/
• GitHub - https://github.com/search?utf8=%E2%9C
%93&q=responsive+web+design

http://designinstruct.com/roundups/html5-frameworks/

RESOURCES, WEBSITES
• W3Schools Responsive
http://www.w3schools.com/
html/html_responsive.asp

EVEN MORE -
• A List Apart - http://alistapart.com/
• Content Strategy for the Web – 2nd ed. 2012 book,
Kristina Halvorson http://contentstrategy.com/
• usability.gov http://www.usability.gov/what-and-why/
content-strategy.html
• CES web course "Designing Mobile & Responsive
Experiences” starts June 1 http://www.slis.wisc.edu/
continueed-DesignMobile.htm

THANK YOU! QUESTIONS?
“But that kind of design thinking
doesn’t need to be our default.
Now more than ever, we’re
designing work meant to be viewed
along a gradient of different
experiences. Responsive web
design offers us a way forward,
finally allowing us to “design for the
ebb and flow of things.” Ethan
Marcotte

Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.

Improving the Responsive Web Design Process in 2016Cristina Chumillas

It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory. The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability. In this session reviewed tools, techniques and concepts to improve our projects: - Performance and best practices - CSS structuring and optization (BEM, SMACSS, etc.) - Fixed-Pixel vs rem, em and % - Responsive images. Drupal non-Drupal solutions and SVGs - Asynchronous Javascript loading - Typography in a responsive environment and FOUT, FOIT effects - How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help. - Beyond the Mouse: Touch and keyboard events - Using RWD patterns

Css3Bronson Quick

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex

HTML5 and CSS3: does now really mean now?Chris Mills

Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.

Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels

Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap. Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

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

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.

Web Development for UX DesignersAshlimarie

Harness jQuery Templates and Data LinkBorisMoore

This document discusses using jQuery Templates and Data Link to build dynamic data-driven browser applications. It describes how jQuery Templates can be used to render templates from data but offers limited interactivity. jQuery Data Link allows binding data to HTML but has no templating. The presentation previews a new approach called JsViews that integrates Templates and Data Link to provide both fast rendering of templates to static HTML strings as well as fully interactive and responsive views through two-way data binding between templates and JavaScript data objects.

Fundamental JQueryAchmad Solichin

This document provides an overview and agenda for a jQuery training session. It introduces jQuery as a JavaScript library that simplifies tasks like HTML document manipulation. It then covers various jQuery basics like selectors and events. The document also summarizes how jQuery can be used for animations, scrolling, forms, images, and more. Examples are given throughout to illustrate jQuery concepts and APIs.

Whirlwind Tour of SVG (plus RaphaelJS)Marc Grabanski

Marc Grabanski gave a whirlwind tour of Scalable Vector Graphics (SVG), covering the basics of SVG including elements, embedding SVG, features like DOM structure and filters, demos of transformations and animation, and tools like RaphaelJS. The presentation provided an overview of SVG and highlighted its advantages like scalability, accessibility, and use of HTML and CSS. Examples of various SVG elements, embedding methods, and features like filters and transformations were demonstrated.

Intro to OOCSS WorkshopJulie Cameron

Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code. Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.

Real World Web componentsJarrod Overson

The document discusses web components, which include HTML templates, custom elements, shadow DOM, and HTML imports. Web components allow the creation of reusable custom elements with their own styles and DOM structure. They provide encapsulation and help avoid issues with global namespaces. While browser support is still emerging for some features, polyfills exist and frameworks like Polymer make web components accessible today. Web components represent an important evolution of the web that will improve how code is structured and shared.

DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke

Accessibility - A feature you can buildMonika Piotrowicz

Html5 publicdoodlemoonch

Responsive EnhancementSven Wolfermann

What is jQuery?tina3reese7

[heweb11] HTML5 MakeoverChristopher Schmitt

This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes explaining differences between HTML5 and XHTML, building with HTML5 elements like <header>, <nav>, <article>, <aside>, and <footer>, bringing back semantic HTML tags, figures and captions, editable elements, drag and drop, HTML5 metadata like microformats, and page structure. It discusses syntax changes in HTML5 and introducing new elements and attributes to improve semantics and accessibility.

Optimizing Sites for Mobile Devicesjameswillweb

Responsive and FastSven Wolfermann

This document discusses strategies for improving website performance. It begins by showing examples of slow loading pages and notes that responsive web design (RWD) does not inherently improve performance—proper implementation is important. Several tips for optimizing performance are provided, such as concatenating files, minifying code, compressing images, using responsive images, optimizing font and image sizes, and inlining critical CSS. The document also covers topics like bandwidth versus latency, measuring performance, and how HTTP/2 may impact current best practices. The overarching message is that performance should be a priority considered throughout the design and development process.

[edUi] HTML5 WorkshopChristopher Schmitt

State of jQuery June 2013 - Portlanddmethvin

The jQuery Foundation coordinates work on the jQuery project, including code, documentation, infrastructure, and events. It is a non-profit organization funded by conferences, donations, and memberships. The Foundation maintains jQuery and related projects like jQuery UI, jQuery Mobile, and QUnit on GitHub. jQuery 1.x continues to support older browsers while jQuery 2.x supports modern browsers, with both versions maintaining API compatibility. Major releases in 2012 included jQuery 1.9 in January and jQuery 2.0 in April.

JsViews - Next Generation jQuery TemplatesBorisMoore

Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data. jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.

Take Your Markup to 11Emily Lewis

Digital Media Night - Responsive Web DesignVirtualtrends

Responsive mobile shopping 06.2016wantad

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburgmarmalade GmbH

More Related Content

What's hot (19)

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

Web Development for UX DesignersAshlimarie

Harness jQuery Templates and Data LinkBorisMoore

Fundamental JQueryAchmad Solichin

Whirlwind Tour of SVG (plus RaphaelJS)Marc Grabanski

Intro to OOCSS WorkshopJulie Cameron

Real World Web componentsJarrod Overson

DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke

Accessibility - A feature you can buildMonika Piotrowicz

Html5 publicdoodlemoonch

Responsive EnhancementSven Wolfermann

What is jQuery?tina3reese7

[heweb11] HTML5 MakeoverChristopher Schmitt

Optimizing Sites for Mobile Devicesjameswillweb

Responsive and FastSven Wolfermann

[edUi] HTML5 WorkshopChristopher Schmitt

State of jQuery June 2013 - Portlanddmethvin

JsViews - Next Generation jQuery TemplatesBorisMoore

Take Your Markup to 11Emily Lewis

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

Web Development for UX DesignersAshlimarie

Harness jQuery Templates and Data LinkBorisMoore

Fundamental JQueryAchmad Solichin

Whirlwind Tour of SVG (plus RaphaelJS)Marc Grabanski

Intro to OOCSS WorkshopJulie Cameron

Real World Web componentsJarrod Overson

DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke

Accessibility - A feature you can buildMonika Piotrowicz

Html5 publicdoodlemoonch

Responsive EnhancementSven Wolfermann

What is jQuery?tina3reese7

[heweb11] HTML5 MakeoverChristopher Schmitt

Optimizing Sites for Mobile Devicesjameswillweb

Responsive and FastSven Wolfermann

[edUi] HTML5 WorkshopChristopher Schmitt

State of jQuery June 2013 - Portlanddmethvin

JsViews - Next Generation jQuery TemplatesBorisMoore

Take Your Markup to 11Emily Lewis

Viewers also liked (20)

Digital Media Night - Responsive Web DesignVirtualtrends

Responsive mobile shopping 06.2016wantad

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburgmarmalade GmbH

Neue Strategie bei Stuffle nach ResearchuxHH

Design UI/UX - AlignMinds Technologiesalignminds

Behind Every App we build, each successful product we engineer, there is strong customer bonding and a great team - where the vision and purpose is shared, technology is carefully chosen and managed and the focus is kept unflateringly on the experience of one person we do all this for - end user. Breathtaking design and user experience is a hallmark of the websites and applications we build. You can understand more about our design philosphy and some of our work in the attached presentation

Website wireframeshayden1314

Facit Digital | Mobile User Interface DesignServiceplan Group

Über Webdesign lässt sich streiten – nicht allerdings über die Menüführung und den Umfang der Inhalte bei mobilen Internetseiten. Zu dieser Aussage führen die Ergebnisse einer Studie des Marktforschungsinstituts Facit Digital, bei der die Websites von vier Automobilherstellern auf ihre unterschiedliche (mobile) Nutzererfahrung hin analysiert wurden. / Das beste geräteübergreifende Surferlebnis bietet Porsche.

Do's and don'ts to local seoSubhasish K (Senior Web Developer)

Rwd im mcp karteikarten 17062013Stella LeMasson

Responsive Design: TWT hilft AGRAVIS mobil zu wachsenTWT

Responsive designThomas Bähr

Responsive DesignMario Fink

"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...Marc Hinse

Aktuelle Trends der Webentwicklung sowie die vermeintlich überall verfügbare hohe Bandbreite verleiten Agenturen, aufwändig produzierte Websites zu gestalten – ohne Rücksicht auf Verluste in Usability, Performance und Kompatibilität. In diesem Talk werden negative Beispiele genannt und wie diese Stolperfallen vermieden werden können. Ebenso soll anhand positiver Beispiele aufgezeigt werden, wie sowohl Zielgruppe als auch deren vielfältige technische Ausstattung in die Konzeption einbezogen werden kann. Im Vortrag waren einige Videos integriert, die hier natürlich so nicht zu sehen sind. Es wird ein Video des Talks geben, einfach mal beim Webkongress Erlangen auf der Seite schauen.

Responsive Design Whitepaperschalk&friends GmbH

Responsive Web Design am Beispiel von Virato (Social News Aggregator)curtis newton gmbh (formerly known as dw capital gmbh)

In diesem Kurzvortrag gibt Markus Dermietzel (Senior User Experience Designer bei curtis newton gmbh, vor 2013 bekannt als dw capital gmbh) Einblicke in das Responsive Web Design des Social News Aggregators virato.de. Dazu erschien im Juli 2012 ein Online-Artikel auf WEAVE.de: http://www.weave.de/weblog/interview-mit-markus-dermietzel-zu-responsive-design-beim-relaunch-von-virato. Bei Fragen melden Sie sich bei [email protected] (Chérine De Bruijn).

Responsive WebdesignMayflower GmbH

Was Responsive Webdesign meint, ist klar: Ein Layout, das sich flexibel an die Bildschirmgröße des Clients anpasst. Für einen perfekten Auftritt auf dem Smartphone ebenso wie dem UltraHD-TV. Was so schön klingt, birgt aber auch viele Fallstricke. Der Vortrag wird einige von ihnen Vorstellen: Von extravaganten Kundenwünschen, überraschender Browser-Inkompatibilität und der Verwendung von iFrames bis hin zu responsiven HTML-Newslettern. Abgerundet wird der Talk durch verschiedene Beispiele für den Workflow, Testing-Strategien und dem Thema SEO im Zusammenhang mit Responsive Webdesign.

Mobile reseach presentation uxcampdc 01052012Christian Eklund

The document discusses the need for Snagajob to develop a mobile job search solution. It notes that while mobile visits have increased significantly, they currently only drive 2% of applications. It then outlines Snagajob's initial mobile efforts, competitors' focus on mobile, and research showing the growing importance of mobile. The document proposes a user-centered design process starting with understanding users through interviews. It presents a persona of a potential user and insights from job seeker interviews. Initial prototype sketches are shown along with plans for further refinement and testing, with the goal of quickly building an initial mobile solution.

UX aus Sicht eines ConceptersuxHH

How to engage with your customer communityCarpathia AG

Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21Zeix AG

Digital Media Night - Responsive Web DesignVirtualtrends

Responsive mobile shopping 06.2016wantad

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburgmarmalade GmbH

Neue Strategie bei Stuffle nach ResearchuxHH

Design UI/UX - AlignMinds Technologiesalignminds

Website wireframeshayden1314

Facit Digital | Mobile User Interface DesignServiceplan Group

Do's and don'ts to local seoSubhasish K (Senior Web Developer)

Rwd im mcp karteikarten 17062013Stella LeMasson

Responsive Design: TWT hilft AGRAVIS mobil zu wachsenTWT

Responsive designThomas Bähr

Responsive DesignMario Fink

"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...Marc Hinse

Responsive Design Whitepaperschalk&friends GmbH

Responsive Web Design am Beispiel von Virato (Social News Aggregator)curtis newton gmbh (formerly known as dw capital gmbh)

Responsive WebdesignMayflower GmbH

Mobile reseach presentation uxcampdc 01052012Christian Eklund

UX aus Sicht eines ConceptersuxHH

How to engage with your customer communityCarpathia AG

Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21Zeix AG

Similar to Responsive Web Design (20)

Responsive Web Design - What You Need to Know to Get Startedjennybchicken

Responsive web design (RWD) uses fluid grids and flexible images to provide optimal viewing experiences across different devices. It involves using media queries and conditional CSS to progressively enhance a website for different screen sizes rather than separate mobile sites. Key aspects of RWD include flexible grids, media queries, and flexible images and media. Popular frameworks like 960 Grid System help build flexible layouts. More websites are adopting RWD to create responsive designs that work on any device.

Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy

Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013 While responsive design may sound like a buzzword, it has real implications for your nonprofit’s website. This session will cover: • responsive design principles • provide several illustrations of responsive design done well (from small to large • nonprofit sites and a few commercial examples) • explain the process of planning for, and implementing responsive design • discuss ways to retrofit an existing site to responsive • the respective level of effort for responsive projects Additionally, we will share several tools that we have found helpful in the planning, design and implementation phases. Confluence focuses on website design and development using open source content management systems for nonprofits and organizations. We have implemented several responsive sites for our clients over the past 18 months and have invested heavily in training our staff in this important discipline.

Great Responsive-ability Web DesignMike Wilcox

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.

SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson

Presented with Christian Ståhl Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”. In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.

Building Responsive Websites with DrupalSuzanne 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

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne 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

Responsive web design pptNAWAZ KHAN

This document discusses the history and concepts of responsive web design. It covers topics like fluid grids and layouts, flexible images and videos, media queries, and the advantages of responsive design. The key points are: - Responsive web design allows websites to automatically adjust to different screen sizes through fluid grids and layouts, flexible images and media queries. - Media queries allow different CSS styles to be applied based on screen width and orientation. - Responsive design helps create a better user experience by optimizing websites for various devices like desktops, tablets and phones.

Approaches to Responsive Wen Design & DevelopmentKeyideas Infotech Private Limited

Responsive design provides an optimal viewing experience across devices by using fluid grids and layouts, flexible images and media, and media queries. Key elements include fluid grids based on percentages, media queries that detect device capabilities and alter styles, and flexible typography that scales with the base font size. Popular frameworks like Bootstrap simplify the process but can limit customization. Plugins also help add responsive features to sites.

Developing for Responsive Design - Frederic WelterlinRazorfish

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.

Introduction to Responsive Web DesignShawn Calvert

Responsive Web Designing FundamentalsADMEC Multimedia Institute

Responsive web designing ppt(1)admecindia1

Portfoliomourya900

This document discusses responsive web design (RWD). RWD ensures usability and satisfaction across all devices by adapting the layout to different viewing environments. It uses fluid and proportion-based grids, flexible images, and CSS3 media queries. Media queries allow different style rules based on device characteristics like browser width. RWD has become important as mobile traffic now accounts for over half of all internet traffic.

Digibury: Getting your web presence mobile ready - David WalkerLizzie 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.

Mobile Best Practicesmintersam

Responsive Web Designdanpastori

Responsive web design displays content clearly across all screen sizes using a consistent theme. It uses techniques like fluid grids, flexible images and CSS media queries to automatically adapt the layout depending on screen size. The benefits are that content is accessible on any device, it improves SEO by having one optimized site, and only needs to be designed once. Common technologies used are CSS media queries and JavaScript. The process involves designing mobile-first and scaling up, avoiding multiple scroll bars, and keeping a consistent look and feel across devices.

Responsive web designingAanand Bohara

This document provides an overview of responsive web design. It defines responsive design as designing websites to be compatible across different devices through flexible layouts. The document outlines some of the key elements of responsive design like meta tags, CSS media queries, grid systems and frameworks. It also lists advantages of responsive design for both users and designers, such as optimized viewing experience, reduced development and maintenance costs.

Multi screen HTML5Ron Reiter

Responsive Web DesignHeru WIjayanto

Twitter bootstrap1www.netgains.org

Twitter Bootstrap is an open-source front-end framework that provides HTML, CSS, and JavaScript design templates for typography, forms, buttons, navigation, and other interface components as well as optional JavaScript extensions. It aims to aid web development and promote responsive design. Developed by developers at Twitter, Bootstrap is one of the most popular front-end frameworks, featuring a grid system, extensive pre-built components, and responsive design capabilities for a variety of screen sizes.

Responsive Web Design - What You Need to Know to Get Startedjennybchicken

Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy

Great Responsive-ability Web DesignMike Wilcox

SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson

Building Responsive Websites with DrupalSuzanne Dergacheva

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva

Responsive web design pptNAWAZ KHAN

Approaches to Responsive Wen Design & DevelopmentKeyideas Infotech Private Limited

Developing for Responsive Design - Frederic WelterlinRazorfish

Introduction to Responsive Web DesignShawn Calvert

Responsive Web Designing FundamentalsADMEC Multimedia Institute

Responsive web designing ppt(1)admecindia1

Portfoliomourya900

Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson

Mobile Best Practicesmintersam

Responsive Web Designdanpastori

Responsive web designingAanand Bohara

Multi screen HTML5Ron Reiter

Responsive Web DesignHeru WIjayanto

Twitter bootstrap1www.netgains.org

Recently uploaded (20)

Lori Vanzant Portfolio. Take a look! ty.vanzan01

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Lori Vanzant's portfolio. Please take a look!vanzan01

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

4K Video Downloader Crack (2025) + License Key FreeDesigner

MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfasfianoor1

Emily's slide design 101 - training moduleyourmisswright

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Presentation for Schoool Management Systemkolay922013

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

Prof House interior Design Project exterNagudiBridget

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

mid-term all revisions g11 s1.pmdzs,zxptxomar164646

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxrachmatunnisa29

Lori Vanzant Online Presence. Take a look!vanzan01

Lori Vanzant Portfolio. Take a look! ty.vanzan01

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Lori Vanzant's portfolio. Please take a look!vanzan01

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

4K Video Downloader Crack (2025) + License Key FreeDesigner

MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfasfianoor1

Emily's slide design 101 - training moduleyourmisswright

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Presentation for Schoool Management Systemkolay922013

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

Prof House interior Design Project exterNagudiBridget

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

mid-term all revisions g11 s1.pmdzs,zxptxomar164646

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxrachmatunnisa29

Lori Vanzant Online Presence. Take a look!vanzan01

Responsive Web Design

1. 1 An introduction for Libraries UW-SLIS CES Webinar April 6, 2015

2. TODAY’S AGENDA • What is Responsive Web Design? • Definition & History • How do I DO Responsive Web Design? • Tips & Tricks & Jargon • Where do I go to learn more about Responsive Web Design? • Resources, Bibliography, SLIS/CES web course 2

3. WHAT IS RESPONSIVE WEB DESIGN? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia, the free encyclopedia] 3

4. WHAT IS RESPONSIVE WEB DESIGN? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia, the free encyclopedia] “adapts the layout to the viewing environment by using fluid, proportion-based grids” 3

5. WHAT IS RESPONSIVE WEB DESIGN? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia, the free encyclopedia] “adapts the layout to the viewing environment by using fluid, proportion-based grids” “flexible images” 3

6. WHAT IS RESPONSIVE WEB DESIGN? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia, the free encyclopedia] “adapts the layout to the viewing environment by using fluid, proportion-based grids” “flexible images” “CSS3 Media Queries” 3

7. WHAT IS RESPONSIVE WEB DESIGN? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia, the free encyclopedia] “adapts the layout to the viewing environment by using fluid, proportion-based grids” “flexible images” “CSS3 Media Queries” <meta name=“viewport" content="width=device-width"> 3

8. http://alistapart.com/article/responsive-web-design

9. HOW WE GOT TO RESPONSIVE • Choices: • Mobile site • App • Responsive

10. HOW WE GOT TO RESPONSIVE • Choices: • Mobile site • App • Responsive

11. HOW WE GOT TO RESPONSIVE • Choices: • Mobile site • App • Responsive

12. HOW WE GOT TO RESPONSIVE • Choices: • Mobile site • App • Responsive

13. HOW WE GOT TO RESPONSIVE • Choices: • Mobile site • App • Responsive

16. VIEWPORT META   TAG • Magic! Sort of • Tells browser to adjust to size of device <meta name="viewport" content="width=device width” />

17. VIEWPORT META   TAG • Magic! Sort of • Tells browser to adjust to size of device <meta name="viewport" content="width=device width” />

18. VIEWPORT META   TAG • Magic! Sort of • Tells browser to adjust to size of device <meta name="viewport" content="width=device width” />

19. VIEWPORT META   TAG • Magic! Sort of • Tells browser to adjust to size of device <meta name="viewport" content="width=device width” />

22. FLUID LAYOUTS • Escaping the CSS box model! <div id=”outerwrap"> <div id="header"> <div id=“bodycontent”> <div id="footer"> • Grid • Makes content columns swing below each other to fit on smaller, narrower, screen

23. http://www.responsivegridsystem.com/

24. http://www.responsivegridsystem.com/

25. SECRET OF COLUMNS • New HTML5 element <section> Defines a section in the document • Sizing done in CSS • Col and span aren’t only for tables anymore • Table is a display property in CSS3 that says, “Let the element behave like a <table> element”

26. SECRET OF COLUMNS • New HTML5 element <section> Defines a section in the document • Sizing done in CSS • Col and span aren’t only for tables anymore • Table is a display property in CSS3 that says, “Let the element behave like a <table> element”

27. SECRET OF COLUMNS • New HTML5 element <section> Defines a section in the document • Sizing done in CSS • Col and span aren’t only for tables anymore • Table is a display property in CSS3 that says, “Let the element behave like a <table> element”

28. SECRET OF COLUMNS • New HTML5 element <section> Defines a section in the document • Sizing done in CSS • Col and span aren’t only for tables anymore • Table is a display property in CSS3 that says, “Let the element behave like a <table> element”

32. CSS3 MEDIA QUERIES • Used to mostly be screen or print • Hide nav when printing @media print { #navigation { display: none; } }. • [W3Schools] Media queries look at the capability of the device, and can be used to check many things, such as: • width and height of the browser window • width and height of the device • orientation (is the tablet/phone in landscape or portrait mode?) • Resolution • You can also have different stylesheets for different media

44. TOOLS • Bootstrap • Word Press Responsive themes • All sorts of code generators & downloads – • Responsive Grid System http://www.responsivegridsystem.com/ • GitHub - https://github.com/search?utf8=%E2%9C %93&q=responsive+web+design

45. TOOLS • Bootstrap • Word Press Responsive themes • All sorts of code generators & downloads – • Responsive Grid System http://www.responsivegridsystem.com/ • GitHub - https://github.com/search?utf8=%E2%9C %93&q=responsive+web+design

49. http://designinstruct.com/roundups/html5-frameworks/

53. RESOURCES,  BOOKS:

54. RESOURCES,  BOOKS:

55. RESOURCES,  BOOKS:

56. RESOURCES,  BOOKS:

57. RESOURCES, WEBSITES • W3Schools Responsive http://www.w3schools.com/ html/html_responsive.asp

58. RESOURCES, WEBSITES • W3Schools Responsive http://www.w3schools.com/ html/html_responsive.asp

59. RESOURCES, WEBSITES • W3Schools Responsive http://www.w3schools.com/ html/html_responsive.asp

60. EVEN MORE - • A List Apart - http://alistapart.com/ • Content Strategy for the Web – 2nd ed. 2012 book, Kristina Halvorson http://contentstrategy.com/ • usability.gov http://www.usability.gov/what-and-why/ content-strategy.html • CES web course "Designing Mobile & Responsive Experiences” starts June 1 http://www.slis.wisc.edu/ continueed-DesignMobile.htm

61. THANK YOU! QUESTIONS? “But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” Ethan Marcotte

Responsive Web Design

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Responsive Web Design (20)

Recently uploaded (20)

Responsive Web Design