INTRO TO. Adaptive Web Design. Aaron slideshare.net/aarongustafson. Brad Frost
|
|
- Kevin Sherman
- 8 years ago
- Views:
Transcription
1 INTRO TO Adaptive Web Design Aaron slideshare.net/aarongustafson Brad Frost
2 Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1,024 pixel wide screen. Times have really changed. Jason Samuels IT Manager, National Council on Family Relations Source Windows users used to comprise 93.5% of our web visits. Now that percentage is 72.4%. Visitors using a Mac have more than tripled.
3 The percentage visiting from a mobile device or tablet was just 0.1% in It has since grown exponentially, % per year, to 6.2% today. Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%.
4 In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected 830 Brad Frost
5 6.8 Billion Smartphone sales accounted for nearly 85% of all mobile phone sales in the US in Q
6 Smartphones have reached 50% penetration in the US but that s concentrated in 30% of households
7
8 Brad Frost
9 RWD To the Rescue! Brad Frost
10 INTRO TO ADAPTIVE WEB DESIGN What is RWD? Fluid grids Flexible media Media queries 19 INTRO TO ADAPTIVE WEB DESIGN Fluid Grids 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 32% 32% 32% 32% 66% 48% 48% 100%
11 INTRO TO ADAPTIVE WEB DESIGN Flexible Media img { max-width: 100%; height: auto; } INTRO TO ADAPTIVE WEB DESIGN Media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */ }
12
13
14
15
16 INTRO TO ADAPTIVE WEB DESIGN But That s the Easy Stuff Content strategy Page weight JavaScript support Interaction methods Network latency & performance Hardware performance Screen resolution Sensor availability etc. 31 INTRO TO ADAPTIVE WEB DESIGN What s in a name? Responsive Web Design Adaptive Web Design Progressive Enhancement Aggressive Enhancement Responsible Web Design 33
17 We don t know Brad Frost
18 Even when we think we know, we re probably wrong So how do we cope?
19 Content
20 I like an escalator because an escalator can never break, it can only become stairs. Mitch Hedberg
21 Graceful Degradation Modern Browsers Older Browsers
22 Modern Browsers Older Browsers
23 User Experience BASIC Browser Capabilities ADVANCED User Experience BASIC Browser Capabilities Content ADVANCED
24 User Experience BASIC Semantics Browser Capabilities Content ADVANCED User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
25 User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
26 User Experience {} ARIA JavaScript CSS BASIC <> HTML Browser Capabilities ADVANCED Text & HTTP HTML
27 HTML5 HTML Microformats HTML4 MCMLXXVII (that s 1977)
28
29 HTML CSS
30 fault tolerance n. a system s ability to continue to operate when it encounters and unexpected error.
31
32 Browsers ignore what they don t understand User Experience BASIC Browser Capabilities Content ADVANCED
33 Content is why we build websites Users must have access to key content tasks &
34 Make sure markup, styles scripts don t obscure it. & User Experience BASIC Semantics Browser Capabilities Content ADVANCED
35 INTRO TO ADAPTIVE WEB DESIGN Semantics 101 <p>html5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>please fill out the form below. <strong>note: all fields are required.</strong></p> <p>i like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="i don t know what">je ne sais quoi</i>.</p>
36
37
38
39 User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
40
41
42 :-) Responsive Web Design Mobile First User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
43
44 But it s not only about no JavaScript Bugs Browser Add-ons Overzealous Firewalls Underpowered devices Page is still loading
45 User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED special needs
46 special needs can be CONTEXTUAL
47 User Experience {} ARIA JavaScript CSS BASIC <> HTML Browser Capabilities ADVANCED Text & HTTP
48 Thank you!!! Further Reading
49 Intro to Adaptive Web Design by Aaron Further reading: Slides available at This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 except where otherwise noted flickr Photo Credits
Responsive Web Design. birds of feather
Responsive Web Design birds of feather Approaches to Mobile Development 1. No Mobile Approach 2. Native Mobile Applications 3. Mobile Websites 4. Responsive (universal) design No Mobile Approach Website
More informationWhy? Mobile. 0Your content is no more than 3 taps away from Angry Birds. 0 Many people access your website via smartphones and other mobile devices
Why? Mobile 0 Many people access your website via smartphones and other mobile devices 0Your content is no more than 3 taps away from Angry Birds Image src: http://www.angrybirds.com/ It is 2013? 0 Which
More informationResponsive Web Design in Application Express
Insert Information Protection Policy Classification from Slide 13 1 Responsive Web Design in Application Express using HTML5 and CSS3 Shakeeb Rahman @shakeeb Principal Member of Technical Staff Oracle
More informationYou can use percentages for both page elements and text. Ems are used for text,
By Megan Doutt Speaking broadly, responsive web design is about starting from a reference resolution, and using media queries to adapt it to other contexts. - Ethan Marcotte (creator of the term Responsive
More informationGoing Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps. JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc.
Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc. Introduction. Learning Points. What is Responsive Design and its Role? Design
More informationPrinciples of Web Design 6 th Edition. Chapter 12 Responsive Web Design
Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create
More informationResponsive Web Design for Drupal
Responsive Web Design for Drupal www.responsivewebdesignguild.com @emmajanedotnet emma@designtotheme.com I am IAM Sorry A boot eh? Drupal drupal.org/user/1773 Photo: morten.dk Legs: walkah Author / Trainer
More informationResponsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone
Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone An Infopeople Webinar November 13, 2013 Jason Clark Head of Digital Access & Web Services Montana State University
More informationResponsive Web Design: A Three-Screen Study in Site Performance
1 June 17, 2014 Responsive Web Design: A Three-Screen Study in Site Performance Ken Harker Senior Consultant ken.harker@keynote.com Keynote Consulting Mobile Research Summit: Data & Insights 2014 June
More informationWeb Publishers Group. Tuesday 13 March 2012
Web Publishers Group Tuesday 13 March 2012 Responsive Web Design Mobilising the Internet Scott O Brien Technical Web Coordinator ANU Marketing Office 3 Responsive web design Designing a website in a manner
More informationResponsive and Adaptive Web Design. Responsive & Adaptive websites-respond to the user s device by showing an optimized view.
Responsive and Adaptive Web Design Responsive & Adaptive websites-respond to the user s device by showing an optimized view. Web Design Assumptions Are Changing Rapidly Making a desktop layout small is
More informationResponsive Web Design (RWD) Best Practices Guide Version: 2013.11.20
Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 This document includes best practices around responsive web design (RWD) when developing hybrid applications. Details on each checklist
More informationBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework Michael Slater and Charity Grace Kirk michael@webvanta.com 888.670.6793 1 Today s Presenters Michael Slater President and Cofounder of Webvanta
More informationResponsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
More informationResponsive Design for Enterprise. July 2012
Responsive Design for Enterprise July 2012 Contents Progressive enhancement 3 Responsive design 6 Combine the two 23 Lessons Learned: Deloitte Digital website 27 Impact on Time and Cost 39 Responsive Design
More informationHOW Interactive Design Conference 2013
HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting
More informationSizmek Features. Wallpaper. Build Guide
Features Wallpaper Build Guide Table Of Contents Overview... 3 Known Limitations... 4 Using the Wallpaper Tool... 4 Before you Begin... 4 Creating Background Transforms... 5 Creating Flash Gutters... 7
More informationResponsive Design Best Practices
Responsive Design Best Practices Heather Shore Account Director Silverpop Harlan Cayetano Sr. Email Specialist Silverpop Yin Mac Program Manager Silverpop Andrea Shyrock Production Manager Alchemy Worx
More informationIBM Worklight: Responsive Design for Mul8- Channel Applica8on Development
IBM Worklight: Responsive Design for Mul8- Channel Applica8on Development Please Note IBM s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at
More informationOne Page Everywhere. Fluid, Responsive Design with Semantic.gs
One Page Everywhere Fluid, Responsive Design with Semantic.gs The Semantic Grid System Grid System Fluid or Fixed Responsive Semantic Sass or LESS Grid Systems Grid System Fixed Size Grid System Fixed
More informationWeb Browser. Fetches/displays documents from web servers. Mosaic 1993
HTML5 and CSS3 Web Browser Fetches/displays documents from web servers Mosaic 1993 Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror There are standards, but wide variation in features Desktop Browser
More informationRESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
More informationCREATING RESPONSIVE UI FOR WEB STORE USING CSS
CREATING RESPONSIVE UI FOR WEB STORE USING CSS Magdalena Wiciak Bachelor s Thesis May 2014 Degree Programme in Information Technology Technology, communication and transport DESCRIPTION Author(s) WICIAK,
More informationRelease: 1. ICAWEB414A Design simple web page layouts
Release: 1 ICAWEB414A Design simple web page layouts ICAWEB414A Design simple web page layouts Modification History Release Release 1 Comments This Unit first released with ICA11 Information and Communications
More informationMSOW. MSO for the Web MSONet Workstation Configuration Guide
MSOW MSO for the Web MSONet Workstation Configuration Guide For personal and public computer users accessing MSOW Practitioner Home Page (PHP) and Primary Source Verification (PSV) Updated June 4, 2013
More information1. About the Denver LAMP meetup group. 2. The purpose of Denver LAMP meetups. 3. Volunteers needed for several positions
1. About the Denver LAMP meetup group 1.Host a presentation every 1-3 months 2.Cover 1-3 related topics per meeting 3.Goal is to provide high quality education and networking, for free 2. The purpose of
More informationBrowser tools that make web development easier. Alan Seiden Consulting alanseiden.com
Browser tools that make web development easier alanseiden.com My focus Advancing PHP on IBM i PHP project leader, Zend/IBM Toolkit Contributor, Zend Framework DB2/i enhancements Developer, Best Web Solution,
More informationWeb. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development
h0p://home.hit.no/~hansha/?page=sojware_development Web O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Programming Hans- Pe0er Halvorsen, M.Sc. 1 Web is the Present and the Future 2
More informationProduct description version 1.0 16-12-2013
Product description version 1.0 16-12-2013 Table of content 1. Introduction 2. Target customer 2.1. Validated needs of customer 2.2. Top USPs 3. Core Features 3.1. Feature description 4. System requirements
More informationChapter 1. Introduction to web development
Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.
More informationResponsive web design Are we ready for the new age?
Responsive web design Are we ready for the new age? Nataša Subić, The Higher Education Technical School of Professional Studies in Novi Sad, Serbia, subic@vtsns.edu.rs Tanja Krunić, The Higher Education
More informationHTML5 & Digital Signage
HTML5 & Digital Signage An introduction to Content Development with the Modern Web standard. Presented by Jim Nista CEO / Creative Director at Insteo HTML5 - the Buzz HTML5 is an industry name for a collection
More informationLevel 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
More informationResponsive Design: Ben Callahan
Responsive Design: Ben Callahan (Video: 0_Introduction.mp4): Introduction 00:00:0000:08:15: Ben describes a moment that changed his life. Receiving his first iphone and coming to the realization the web
More informationJoomla Templates 101 Barb Ackemann
Joomla Templates 101 Barb Ackemann Joomla Day NE May 30, 2009 NOTE: Slides, files and resources are all online So you can listen /think hard and not worry about writing everything down! Joomla Templates
More informationWhite Paper. How To Deliver Fast, Engaging Responsive Web Design Sites
White Paper How To Deliver Fast, Engaging Responsive Web Design Sites Table of Contents MOBILE IMPACTS THE BOTTOM LINE...1 RESPONSIVE WEB DESIGN ADOPTION GROWING FAST...2 FAST, QUALITY WEB EXPERIENCES
More informationWritten by: Doug Schust, WSI Digital Marketing Expert
Written by: Doug Schust, WSI Digital Marketing Expert Responsive web design is generating a lot of buzz in the digital marketing space these days, even among the guru web designers. So what s all the excitement
More informationSizmek Formats. HTML5 Page Skin. Build Guide
Formats HTML5 Page Skin Build Guide Table of Contents Overview... 2 Supported Platforms... 7 Demos/Downloads... 7 Known Issues:... 7 Implementing a HTML5 Page Skin Format... 7 Included Template Files...
More informationJoostrap RWD Bootstrap Template
Joostrap RWD Bootstrap Template Step by Step Guide to Installing & Set-up Updated 17 th November 2012 Prepared by Philip Locke What is Joostrap?...3 JooStrap & The Basics...3 The Past & How Templating
More informationResponsive Design How to get started
Responsive Design How to get started Website traffic from mobile devices has grown significantly year over year prompting marketers to include responsive website design into their digital marketing strategy.
More informationHow Responsive Is Your Testing?
Cognizant 0-0 Insights How Responsive Is Your Testing? To accelerate business digitization, organizations need to ensure a seamless user experience across diverse channels, one that starts with a fresh
More informationRESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
More informationGet the right advice now. What we can offer?
Get the right advice now What we can offer? 1. A smart simple Design will convert searches into Phone calls. Let s start with the design of your site The reason why many websites fail other than the searcher
More informationJavaScript Testing. Beginner's Guide. Liang Yuxian Eugene. Test and debug JavaScript the easy way PUBLISHING MUMBAI BIRMINGHAM. k I I.
JavaScript Testing Beginner's Guide Test and debug JavaScript the easy way Liang Yuxian Eugene [ rwtmm k I I PUBLISHING I BIRMINGHAM MUMBAI loading loading runtime Preface 1 Chapter 1: What is JavaScript
More informationRecommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS. February 2014 Update
Recommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS February 2014 Update Is Mobile SEO Required Now? In a Google Smartphone User study, mobile searches will make up 25%
More informationCoding for Desktop and Mobile with HTML5 and Java EE 7
Coding for Desktop and Mobile with HTML5 and Java EE 7 Coding for Desktop and Mobile with HTML5 and Java EE 7 Geertjan Wielenga - NetBeans - DukeScript - VisualVM - Jfugue Music Notepad - Java - JavaScript
More informationModern Web Development:
: HTML5, JavaScript, LESS and jquery Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft MVP @shawnwildermuth http://wilderminds.com What it was like
More informationAdvanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication HTML5 HTML5 is the most recent version of Hypertext Markup Language. It's evolution
More informationWeb Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
More informationProject Proposal. Developing modern E-commerce web application via Responsive Design
Project Proposal Developing modern E-commerce web application via Responsive Design Group Members Nattapat Duangkaew (5322793258) Nattawut Moonthep (5322770892) Advisor: Dr. Bunyarit Uyyanonvara School
More informationThe Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
More informationWebsite Design Agreement
Website Design Agreement We will always do our best to fulfil your needs and meet your goals, but sometimes it is best to have a few simple things written down so that we both know what is what, who should
More informationBuilding a Simple Mobile optimized Web App/Site Using the jquery Mobile Framework
Building a Simple Mobile optimized Web App/Site Using the jquery Mobile Framework pinboard.in tag http://pinboard.in/u:jasonclark/t:amigos-jquery-mobile/ Agenda Learn what a mobile framework is. Understand
More informationBlueball Design Dynamic Content 2 Stack Readme Manual v1.0
Blueball Design Dynamic Content 2 Stack Readme Manual v1.0 A unique responsive stack that dynamically populates and updates a content area within the stack using a warehoused external XML flat text file
More informationTesting Responsive Web Pages Using the Consistency of Automated Web Pages
Testing Responsive Web Pages Using the Consistency of Automated Web Pages Yulia Samoylova Dissertation 2014 Erasmus Mundus MSc in Dependable Software Systems Department of Computer Science National University
More informationMetService Online Advertising Technical Specifications
MetService Online Advertising Technical Specifications Updated: 17 August 2012 FORMATS & DEADLINES Please note: If advertisements do not meet the specifications below, MetService may be unable to load
More informationWeb Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
More informationWeb Design Technology
Web Design Technology Terms Found in web design front end Found in web development back end Browsers Uses HTTP to communicate with Web Server Browser requests a html document Web Server sends a html document
More informationSPLIT BLOCK FINAL Web Design
SPLIT BLOCK FINAL Web Design MULTIPLE CHOICE 1. A(n) site shares user-created content with site visitors. a. portal c. informational/educational b. Web 2.0 d. business 2. sites include Erly, Flickr, Pinterest,
More informationc r a f t i n g a m o b i l e e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e m o b i l e s i t e
c r a f t i n g a m o b i l e e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e m o b i l e s i t e Ryan Huber School of Medicine Web Development c r a f t i n g a t a b l e t e x p e
More informationBeginning Smartphone Web Development
Beginning Smartphone Web Development I3. jl!c;llirici JavaScript C;SS, f HTML and A-, p p I i с at i о n s f о r«p ri о n e,, А л ei ro i ci, P a! ei P re, Eli ас к I Windows Мкаане, and inotaa S60 Gail
More informationDESIGNING MOBILE FRIENDLY EMAILS
DESIGNING MOBILE FRIENDLY EMAILS MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT EMAIL CLIENTS
More informationResponsive Web Design
Responsive Web Design Evaluation of Techniques to Optimize Load Time Joel Nandorf Student Spring 2013 Bachelor Thesis, 15 hp Computer Science Abstract Responsive Web Design has, in short time, become a
More information<?xml version= 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.
dhtml
More informationDesigning for Mobile Devices
Designing for Mobile Devices October 2010 Pawel Zareba Table of Contents Mobile market overview... 3 Smartphone penetration... 3 Mobile browsers:... 9 Browser detect techniques... 11 Progressive enhancement:...
More informationResponsive Web Design: Is It Worth It?
Responsive Web Design: Is It Worth It? (Adapted from " Responsive Web Design," by EyeImagine, LLC, December 2012, www.eyeimaginetech.com) Introduction Responsive Web Design is generating a lot of buzz
More informationRESPONSIVE WEB DESIGN: THE FUTURE. Written by: Doug Schust, WSI Digital Marketing Expert
Responsive Web Design: The // 1 2 10.ch RESPONSIVE WEB DESIGN: THE FUTURE Written by: Doug Schust, WSI Digital Marketing Expert Responsive Web Design: The // 2 Table of Contents Introduction... 3 1.Benefits
More informationslides at goo.gl/kifue
chrome slides at goo.gl/kifue 1/29 The Mobile Web Developer's Tool Belt Pete LePage Developer Advocate, Google 2/29 Tooling In The Web Dev Lifecycle Development Environments Authoring Abstractions Frameworks
More informationDesigning for the Web
Designing for the Web Design Issues Technical Issues Some Web Design Issues Breadth vs. Depth Navigation vs. Content Seller vs. Buyer (i.e., Designer vs. User) Colors and Images Several images in this
More informationICAWEB502A Create dynamic web pages
ICAWEB502A Create dynamic web pages Release: 1 ICAWEB502A Create dynamic web pages Modification History Release Release 1 Comments This Unit first released with ICA11 Information and Communications Technology
More informationViewports. Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU, 28 February 2014
Viewports Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU, 28 February 2014 or: Why responsive design works Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU,
More informationImproving Magento Front-End Performance
Improving Magento Front-End Performance If your Magento website consistently loads in less than two seconds, congratulations! You already have a high-performing site. But if your site is like the vast
More informationAdvanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
More informationResponsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
More informationExamples and Best Practices in Responsive Web Design
Examples and Best Practices in Responsive Web Design WHAT IS RESPONSIVE DESIGN? What is Responsive Design? fluid grid flexible images media queries Ethan Marcotte, 2010 What is Responsive Design? Responsive
More informationBEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13
BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/710680 = mori) 1 my first responsive mobile experience was in 2004 2 2 target devices target resolutions: 240 x 320 and 480 x 640 one code base for layout
More informationWompMobile Technical FAQ
WompMobile Technical FAQ What are the technical benefits of WompMobile? The mobile site has the same exact URL as the desktop website. The mobile site automatically and instantly syncs with the desktop
More informationUnity web- player issues in browsers & in client system
Software /Hardware requirements for unity web player i) Software Requirement Operating System: Windows XP or later; Mac OS X 10.5 or later. ii) Graphics Card: Pretty much any 3D graphics card, depending
More informationDesigning for the Mobile Web Lesson 3: HTML5 Web Apps
Designing for the Mobile Web Lesson 3: HTML5 Web Apps Michael Slater, CEO Andrew DesChenes, Dir. Services course-support@webvanta.com 888.670.6793 www.webvanta.com Welcome! Four sessions 1: The Mobile
More informationDesigning HTML emailers
24 SEPTEMBER 2015 Designing a beautiful but functional HTML emailer can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide
More informationIntroduction to Dreamweaver
Introduction to Dreamweaver ASSIGNMENT After reading the following introduction, read pages DW1 DW24 in your textbook Adobe Dreamweaver CS6. Be sure to read through the objectives at the beginning of Web
More informationHTML5 Standard Banner
Sizmek Formats HTML5 Standard Banner Build Guide Table of Contents Overview... 2 Supported Platforms... 3 Demos/Downloads... 3 Known Issues... 3 Recommended Specs... 3 Implementing an HTML5 Standard Banner...
More informationResponsive Web Design for Libraries: Beyond the Mobile Web
Grand Valley State University ScholarWorks@GVSU Books and Contributions to Books University Libraries 3-1-2013 Responsive Web Design for Libraries: Beyond the Mobile Web Matthew Reidsma Grand Valley State
More informationChristopher Zavatchen
Christopher Zavatchen chris@cnc137.com 330-558-1137 273 Bettie Lane Brunswick, Ohio 44212 Objective Seeking a career opportunity enabling me to fully utilize my web design and development skills while
More informationTrends in Developing and Publishing Content: How HTML5 and Mobile Change the Game
Trends in Developing and Publishing Content: How HTML5 and Mobile Change the Game Greg Fagan, Sales Director Data Conversion Laboratory Publishing your content to multiple devices creates lots of options
More informationCSE 203 Web Programming 1. Prepared by: Asst. Prof. Dr. Maryam Eskandari
CSE 203 Web Programming 1 Prepared by: Asst. Prof. Dr. Maryam Eskandari Outline Basic concepts related to design and implement a website. HTML/XHTML Dynamic HTML Cascading Style Sheets (CSS) Basic JavaScript
More informationJohn Kail Criminal Defense Attorney
John Kail Criminal Defense Attorney May 21, 2015 Proposal created for: John Kail Proposal created by: Josh Stewart Hook Creative 221 South Avenue Springfield, MO 65806 United States www.hookcreative.co
More informationBuilding Responsive Layouts
Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi August 28, 2012 Responsive Web Design Summit What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com
More informationPROPOSAL. + Branding + Web Design + Development. November 18, 2014 Prepared by: Maya Elious Prepared for: Client Name
PROPOSAL + Branding + Web Design + Development November 18, 2014 Prepared by: Maya Elious Prepared for: Client Name Project Overview Why You re Here You are a coaching and development company for startups
More informationMobile Analytics from Netbiscuits. Using parameters to build web visitor insights April 2014
Mobile Analytics from Netbiscuits Using parameters to build web visitor insights April 2014 Table of Contents Welcome to Mobile Analytics... 3 Introduction... 3 Parameters... 3 1. Choice of device and
More informationAKAMAI WHITE PAPER. How To Deliver Fast, Engaging Responsive Web Design Sites
AKAMAI WHITE PAPER How To Deliver Fast, Engaging Responsive Web Design Sites TABLE OF CONTENTS MOBILE IMPACTS THE BOTTOM LINE 1 RESPONSIVE WEB DESIGN ADOPTION IS GROWING FAST 1 FAST, QUALITY WEB EXPERIENCES
More informationCurriculum Currency Report for Fall 2015 Computer Networking and Information Technology. Courses
Curriculum Currency Report for Fall 2015 Computer Networking and Information Technology Review Year 2014 2015 Department Computer Networking & Information Technology s The following active courses in the
More informationPROJECT MANAGEMENT SYSTEM
Requirement Analysis Document v.2 14.12.2009 CENG-401 SOFTWARE ENGINEER PROJECT MANAGEMENT SYSTEM (Project Manager) Ahmet Edip SEÇKİN 07010555 (Developer) Erhan ŞEN 07010507 (Developer) Semih Serdar CENGİZOĞLU
More informationMinimum Requirements for Web Based Applications
Recommended Browsers Skyward recognizes the diverse Operating Systems, Devices, and Internet browsers our customers are using. While we want every customer to have the best possible experience, we recognize
More informationRESPONSIVE DESIGN: OPTIMIZING THE CUSTOMER WEB EXPERIENCE ACROSS DEVICES
RESPONSIVE DESIGN: OPTIMIZING THE CUSTOMER WEB EXPERIENCE ACROSS DEVICES FORESEE RESPONSIVE DESIGN REPORT Author: Bruce Shields, Usability, ForeSee 2012 ForeSee FORESEE RESPONSIVE DESIGN REPORT 2 Just
More informationCurrent Order Tool Experiences Complaints
Current Order Tool Experiences Complaints Log in unadvertised case sensitivity for email address that is used as login id CERES Dataset Info pages are too crowded!! On the Data Products Catalog page, remove
More informationGalleryAholic Documentation
GalleryAholic Documentation After a successful install click onto the module called GalleryAholic. The first drop-down option you will have is asking, where do you want to get your photos from. Your selections
More informationAirangel s WiFi Portal Best Practice Guidelines Get the most out of your WiFi infrastructure
CONTROL PERSONALISE SOCIALISE www.airangel.com Airangel s WiFi Portal Best Practice Guidelines Get the most out of your WiFi infrastructure Contents Why is my portal design so important? Page 03 - You
More informationLooking Good! Troubleshooting Email Display Problems
E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014 Today s Speaker Geoff Phillips Senior Editor & Email
More informationMagento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
More information