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?