INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media.

Slides:

Advertisements

Similar presentations

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Advertisements

INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.

Tutorial 4: Creating page layout with css

Media Queries Jeffery Davis CIT media is used to define different style rules for different media types and devices. Media queries.

Responsive Web Design Sheri German, Instructor Montgomery College.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.

RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).

RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).

1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

WRA 210 – SS2014 RWD1 : CSS Media Queries. Responsive? Responsive Web Design… Means that a web site works optimally well for users regardless of the device.

‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University.

CIT 256 Mobile Web Development Dr. Beryl Hoffman.

Intro to RESPONSIVE DESIGN. Why? What?

Kathy E. Responsive Design and Twitter Bootstrap.

Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.

Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/

WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.

CIS 1310 – HTML & CSS 7 More on Links, Layout & Mobile.

DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA  Why you should go mobile  Mobile Design Options  Responsive Design  Tips & Tools to Help You Build.

Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Neal Stublen Font Limitations  Browsers can only display the fonts installed on the device Arial, Verdana, Times, Georgia  Custom.

INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,

COMP 135 Web Site Design Intermediate Week 8. Responsive Web Design Responsive Design Adaptive Design.

Mike Hamilton V.P. Product Evangelism MadCap Software Content Authoring for Responsive Design.

Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.

Accessibility Through Responsive Design. Justin Stockton 2

Taking Your Website On The Road Technology No Where to Go.

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

Website Development with Dreamweaver

Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.

Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.

PRESENTED BY Content Authoring for Responsive Design Mike Hamilton V.P. Product Evangelism at MadCap Software

Tutorial 8 Enhancing a Web Site with Advanced CSS

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML, CSS, and XML Tutorial 8 Enhancing a Web Site with Advanced CSS.

Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”

CSS BEST PRACTICES.

Web Design: Responsive Layouts Sarah Murto 09/29/ W - Graduate Workshop.

+ Responsive Design Communication Strategy for Mobile, Desktop Los Alamos National Laboratory Ask a question at #interlab.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.

GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India

LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.

Responsive (Mobile) Design What is this? Why Should You Care?

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.

04 – CSS Informatics Department Parahyangan Catholic University.

Basic Elements of Responsive Web Design Jason Bengtson, MLIS, AHIP Emerging Technologies/R&D Librarian UNM Health Sciences Library and Informatics Center.

1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.

CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.

Implementing Responsive Design

HTML5 Level II Session V Chapter 8 - How to Use Responsive Web Design (RWD)

CS 321: Human-Computer Interaction Design

CS 0134 (term 2181) Jarrett Billingsley

RESPONSIVE WEB DESIGN.

CSS part 2 Outro.

Responsive Design.

Responsive Web Design (RWD)

Responsive Web Design (RWD)

Chapter 8 - How to Use Responsive Web Design (RWD)

WEB DESIGN FOR MULTIPLE SCREENS

Multiple Columns By Derek Peacock

17 RESPONSIVE WEB DESIGN.

Presentation transcript:

INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN

WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media queries Apply to different screen sizes, platforms and orientations Example:

MOBILE LAYOUT Larger font size Smaller image Larger links/buttons, especially for touchscreen Content: usually one column Use percentages, instead of px

MEDIA QUERY Method 1: In Html if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

MEDIA QUERY Method2: In CSS More efficient

MIN-WIDTH & MAX-WIDTH min-width: If anything is below this limit, the style sheet link or styles will be ignored. max-width: Anything above the maximum browser or screen width specified would not apply to the respective media query. min-device-width and max-device-width

RESOURCES

ACTIVITY Download the zip folder: 7.zip Use the mockup for lab prep to edit main.css & mobile.css to make the page responsive to different screen sizes (&mobile version)