Member Avatar for cab_driver

Wonderin if I might be able to get a little help from you guys...

I've heard that to traverse various screen sizes and resolutions, it's best to design things from a 600*800 res then it can be veiwed in differently sized windows without scroll bars and the like. Is there a way to do this in reverse? Would I be able to, in essense, scale material on the website, such as images, relatively?

Thanks!

  • 4 Contributors
  • 3 Replies
  • 111 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The old “design for a fixed 600×800 canvas” approach is out of date. and were right to point toward flexible layouts, and ’s server-side resizing idea addresses asset size — but modern best practice is to combine adaptive assets with responsive HTML/CSS so the layout and images both adapt to viewport and device pixel density without brittle heuristics.

Include a viewport meta and let images scale with CSS. For example:

<meta name="viewport" content="width=device-width, initial-scale=1">

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* optional for cropped thumbnails */
}

Use the HTML responsive-image features (picture/srcset/sizes) to let the browser pick the right file and format (AVIF/WebP/JPEG) and to serve higher-density files for retina displays:

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w">
  <img src="hero-1200.jpg"
       srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
       sizes="(max-width:600px) 100vw, 50vw"
       alt="...">
</picture>

Operational notes: server-side on-the-fly PHP resizing works but is CPU-heavy; prefer pre-generating multiple sizes at build time (Sharp, gulp) or using an image CDN (Cloudinary/imgix) that serves correct formats and DPR automatically. Pair responsive images with lazy-loading, accessible alt text, and fluid typography (for example font-size: clamp(...)) so text scales consistently. For an implementation guide and further examples see MDN’s responsive images and responsive design documentation (Responsive images, Responsive design).

Recommended Answers

All 3 Replies

Member Avatar for Menster

Hi there,
One option you could look into is using php to resize all your images according to a client's native resolution which you would have to store in a cookie/session and get initially with javascript (or by the user following a link specific to their resolution). Be aware though this would be quite cpu/memory intensive and would be worthwhile looking into creating a copy of each image for each resolution.

Member Avatar for almostbob

current recommended practice is to design a flexible layout

width: 35%; font-size:1em;

the w3c reccommend screen layouts be in em and %, then regardless of screen size the page is visually the same. and the same layout can be used - blackberry to projection screen.

<html>
<head>
<style type='text/css'>
<!--
.wrapper {width:98%; text-align:left; margin:1%; float:none;}
.left { width:33%; font-size:.85em; float:left; margin-right:2%; margin-top:0; padding:1%; text-align:right; border:1px solid; }
.right { width:33%; font-size:1.15em; float:right; margin-left:2%; margin-top:0; padding:1%; text-align:left; border:1px solid; }
/* other css just got lazy */
-->
</style>
</head><body>
<div class='wrapper'>
<p class='left'>
Lorem Ipsum<br>
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur</p>
Lorem Ipsum is not simply random text.<br>
 It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.<br>
 Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </div>
<div class='wrapper'>
<p class='right'>
Lorem Ipsum<br>
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur</p>
Lorem Ipsum is not simply random text.<br>
 It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.<br>
 Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </div>
 </body>
 </html>
Member Avatar for MidiMagic

If you want screen resolution compatibility in your pages, use % and em to set your sizes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.