0

Is this a good or best way to configure a web site HTML to add mobile users?

My site pages add Googles default meta viewport, and all code is simple (basic CSS, no frills), but flows well into narrow screens.

It uses 10% margins for readability if wide, but if screen max-width is < 800 pixels, it reduces margin to 1%.

Wide things (large images or tables) use 0 page margin, and auto float to center. Table columns will shrink to size of largest word (a few &nbsp ; are used)

Most regular size images are float left or right, surrounded by text, but a narrow screen will show this down in single file. A few &nssp ; are used to prevent too-narrow text columns.

My concern is, if screen < 800 pixels, it also sets all IMG max-width to 100%, reducing the size of larger images to fit to screen. Is that "responsible" design? It still downloads bytes, but seems to work well, but I fear I may be missing something?

4
  • Do you mean responsive design?
    – Brian
    Apr 4 '16 at 17:06
  • Probably yes, but more like responsible responsive design. :)
    – WayneF
    Apr 4 '16 at 17:14
  • Are you just asking if downloading an 800px image when you plan on displaying it in a <800px box is a good idea? Or are you asking if all the other stuff in your post is also a good idea? I can't really tell if the existing answer is what you're looking for, or what distinction you're trying to make between "responsible" design and the semi-standard term "responsive design".
    – Ixrec
    Apr 4 '16 at 20:18
  • The images and bytes are a concern, but there are several hundred of them, and providing and selecting different sizes would be a major issue. Is there any other standard way of handling this? I guess I'm seeking a responsive reference?
    – WayneF
    Apr 5 '16 at 2:54
1

My concern is, if screen < 800 pixels, it also sets all IMG max-width to 100%, reducing the size of larger images to fit to screen. Is that "responsible" design? It still downloads bytes, but seems to work well, but I fear I may be missing something?

Well, one problem with this approach is that you're still downloading an 800px wide image, even though you're displaying a much narrower image. Sending mobile users a smaller image would look the same, but would load faster and burn less user bandwidth. Mobile users tend to have worse connectivity than desktop users, so this may be important.

1
  • I believe that some of the newer browsers have a srcset attribute for just this purpose. It's not everywhere, but as long as it's on enough mobile browsers you can use it.
    – Katana314
    Apr 4 '16 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.