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

Slides:



Advertisements
Similar presentations
Coding a Responsive HTML
Advertisements

HTML Basics Customizing your site using the basics of HTML.
RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
Archana Mandape. 234 million Wireless subscriptions in USA. Many players in the smart phone market. Apple iPhone OS, RIM BlackBerry OS and Android OS.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4: Web Browsing.
Sculpt Framework Mobile-First with Progressive Enhancement.
Lesson 4: Web Browsing.
Project Two Art3870 fall Web Services Concept Selling web services to Art Galleries ◦ Our group sells web site development for art galleries: the.
Chapter 15 The Mobile Web. Objectives Describe the important characteristics of mobile web browsing platforms Explain three strategies for effectively.
Responsive Wed Design : An Emerging Technology Archana Jain.
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).
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University.
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
And Mobile Web Browsers
Publishing to Mobile Devices: Best Practices and Strategies Mike Hamilton V.P. Product Evangelism MadCap Software
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no guarantee that people will see/experience your web pages.
INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,
Web Browsers And Mobile Web Browsers. Guiding Questions What is a mobile Web browser? Why do Web pages look differently on different Web browsers? What.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Accessibility Through Responsive Design. Justin Stockton 2
Responsive design - Bedrock to our site Responsive site templates included.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
PACS - 09/19/15 1 favicon A ‘Favorite icon’ is a file containing one or more small icons associated with a particular website or web page. Web browsers.
Objective Understand concepts used to web-based digital media. Course Weight : 5%
MediMizer User Group  Users want an iPad application  Users want a web application  IT wants a no-installation client  Can be used anywhere.
Teacher In-service January 25, 2013 Presented by Kevin Pedersen of.
Concepts Telerik Software Academy Telerik School Academy.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Browser Wars (Click on the logo to see the performance)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
Vocabulary 3 Internet Vocabulary. internet A system that connects billions of computers around the world.
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
OU Campus Version 10 INTRODUCTION VERSION 10. Welcome Version 10.
Thực hiện: D3 GVLT: BROWERS. Browser Compatibility I Check the compatibility II Tools III.
HTML HyperText Markup Language Victoria E. Kozlek.
Mobile Finder By Monica Yarbrough. Google’s Suggestions for SEO Vary HTTP Header Annotations within the HTML: On desktop page: On mobile page: Media queries.
Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between.
World Wide Web 16 World Wide Web 16. World Wide Web 16 Everyone also talks about the Web But people don’t really understand how it works You need to know.
+ CIW LESSON 4 Web Browsers. + Basic Functions of Web Browsers Provide a way for users to access and navigate Web pages Display Web pages properly Provide.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
Less – Design That is More… BY SPEC INDIA. Less – Design  Adaptive Cross Platform CSS grid system  Responsive & Mobile First Projects  Uses Standards-based.
Gayatri Global Services Get More Customers Automate your business Kolhapur Office 2985, A Ward, Babujamal Road, Near Mahalaxmi Temple, Kolhapur
And Mobile Web Browsers
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
App Inventor إعدادأشرف رفاعي أحمد
What this activity will show you
Responsive Web Pages.
Lesson 4: Web Browsing.
Web Browsers & Mobile Web Browsers.
Office 365/OneDrive Installation Guide.
PRESENTATION 1.0 BY – SAFEEBOOK Web browsers.
Lesson 4: Web Browsing.
What is HTML used for? STRUCTURE Text Video Lists Audio Links Forms Images Tables Click: Fades in text, lists, links, images, tables, forms, audio,
WEB DESIGN FOR MULTIPLE SCREENS
Web Design Principles.
Web Client Side Technologies Raneem Qaddoura
Web Client Side Technologies Raneem Qaddoura
And Mobile Web Browsers
Internet Vocabulary Beth Felton McKelvey.
And Mobile Web Browsers
Will Code For Food The website will begin as a site where I can advertise my skills as a programmer and offer services for free, for food, or for money.
Various mobile devices
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

Taking Your Website On The Road

Technology

No Where to Go

Your Website..

Spec Sheet... A responsive site gracefully repositions and re-sizes to any screen dimension it displays on. Page elements will be left-aligned on wider screens, and move to be under each other under smaller screens. Fonts and images will resize to be optimal for the screen. Tablets generally support a screen width of 1024 px. Desktop computers generally have 1024px as a minimum width. Accounting for factors like the width of the scrollbar, a good rule of thumb is to optimize the site to work in a columnar "grid" format, with dimensions in multiples of 320px. For example: 320px for 1-column-wide, 640px for 2-columns, 960px and 3-columns as a maximum content width. Previously, the standard way to detect and adjust for different user platforms was to detect the type of device the user was browsing with, the browser applications, etc. For example: your computer reports to the Web server a string of information like: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ Knowing a user's browser and platform was important because there were differences in how Internet Explorer, Firefox, Chrome, etc., rendered Web pages. With each new version of these applications, they have all worked to be more adherent to industry-accepted Web standards, which means they should all deliver a Web site the same way. This isn't always perfect, but a lot better in recent years. Detecting a user's computer and browser is no longer 100% reliable. Android-powered tablets and mobile phones, for example, simply report "Android" and lack data as to if they are a phone, tablet, laptop, and the such. The columnar grid format listed above will help using multiples of 320px. Below are some links that will help you with the conversion…. web-design-with-physical-units/

Putting your new website to work

Taking Your Website On The Road

Wordpress Dashboard

Rental Application (personal information)

Rental Application (instrument selection)

Inventory Control (instrument data)

At Event Portal

Our Rental Package