Responsive Web Pages Responsive design Application code queries

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=BIz 02 q. Y 5 BRA

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 @mediatype and (media feature) { CSS-Code; } • Example @media screen and (max-width: 3000 px) { CSS instructions go here } @media screen and (max-width: 620 px) { CSS instructions go here } @media screen and (max-width: 500 px) { CSS instructions go here }

Approaches • Desktop first • Mobil first • Java

Responsive Web Design • Advantages – You can serve only the most important content for smaller resolutions such as i. Phones, 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 1024 px resolutions and up – Older browsers don’t support CSS 3 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?