Responsive Web Pages.

Slides:



Advertisements
Similar presentations
3.02B Authoring Languages 3.02 Develop webpages..
Advertisements

Authoring Languages and Web Authoring Software 4.01 Examine web page development and design.
CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
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.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Lloyd-Jamie Bennett – P Stylianos Michael – P
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
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).
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.
Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.
Relatore: Ing. Marco Porta Correlatore: Ing. Massimo Cellario Tesi di Laurea di: Andrea Marchetti Anno Accademico 2010/2011 UNIVERSITA’ DEGLI STUDI DI.
DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA  Why you should go mobile  Mobile Design Options  Responsive Design  Tips & Tools to Help You Build.
Responsive Design - It’s time for a reality check.
Looking Good Online Design and Presentation of Websites 1.
Using Styles and Style Sheets for Design
INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
Browsing MITA Seminar 2003 Mikko Pohja & Alessandro Cogliati.
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.
CSS : Cascading Style Sheets Ann Dobbs Class: i385e.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Unit 5 The Web Book Test. Unit 5 Test The Web Book Test 1. On the bottom of page 46, why is writing web pages not like writing printed documents ?
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
Copyright © 2015 rosixtechnology.in To be a world renowned company for providing Software Solutions & Product based IT infrastructure.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
How HTML responsiveness translates to PDF
Web Development & Design Foundations with HTML5
Web Basics: HTML/CSS/JavaScript What are they?
Implementing Responsive Design UNIT I.
Implementing Responsive Design
A better approach to mobile
Responsive Design and Twitter Bootstrap
Concepts for fluid layout
Styling For Print From Screen to Paper
Introduction to CSS Media Query - Lesson 11
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Web Development & Design Foundations with HTML5
CS 0134 (term 2181) Jarrett Billingsley
RESPONSIVE WEB DESIGN.
IS1500: Introduction to Web Development
Responsive Design in WordPress
Responsive Design.
Making Your Site Mobile-Ready
Chapter 8 - How to Use Responsive Web Design (RWD)
Web: Big Concepts Ch. 3 1/10/2019.
WEB DESIGN FOR MULTIPLE SCREENS
The Significance of a Responsive Website Design WEB Design Company | Digital Hub Solution +1(833)
Web Development & Design Foundations with HTML5
Concepts for fluid layout
Separating activities
Various mobile devices
17 RESPONSIVE WEB DESIGN.
Christopher Harrison Jeremy Foster
Presentation transcript:

Responsive Web Pages

Responsive design Application code queries about the size of the screen on a device and adjusts its output to fit nicely on the devices screen. Create one site that looks and behaves well on big monitors, small mobile devices, and everything in between https://www.youtube.com/watch?v=BIz02qY5BRA

Responsive Design Desktop Tablet Phone

Cascading Style Sheets (CSS) Style sheet language for describing the presentation of a document written in a markup language XML, HTML, SVG, etc. Designed to separate document content from document presentation

Media queries The @media rule is used to define different style rules for different media types/devices. Media queries look at the capability of the device, and can be used to check many things, such as: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution and much more

Media Queries Syntax Example @media mediatype and (media feature) {     CSS-Code; } Example @media screen and (max-width: 3000px) { CSS instructions go here } @media screen and (max-width: 620px) { @media screen and (max-width: 500px) {

Approaches Desktop first Mobil first Java

Responsive Web Design Advantages You can serve only the most important content for smaller resolutions such as iPhones, thus eliminating clutter Higher chances that the website will lead to more conversions (better selling of products or services) If a significant portion of your audience are using mobile devices, a responsive website makes sense.

Responsive Web Design Disadvantages Responsive websites take longer to code and are more expensive Don’t use if visitors are using 1024px resolutions and up Older browsers don’t support CSS3 media (Java fallback) Some non-tech clients wouldn’t understand why their website does not look the same on desktop and phone

Many books about Responsive Web Design Many more

Discussion Question Can Responsive design be use on smart watches and smart rings?