Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 months ago.
Improve this question
I hope this question doesn't end up being closed for being too broad a subject but I was wondering about Responsive/Adaptive Web Design, i.e. one website for all browsers, all devices.
What is the best way to implement such a site when it comes to structure and layout?
I've being trying to read up on it since mobile websites are the big thing right now and will be for a while but I can't find a list of tips and guidelines and I figured that if such a resource was available here on SO then we could all benefit.
Another thing that gets me is how is dynamic image scaling done?
Out of everything this is the thing that puzzles me most because layouts I'm guessing are probably done using percentages rather than pixel values because pixels will vary from one device to another but images are probably the key factor in achieving one website for everything.
I'm looking forward to reading people's opinions and answers, even if it is just links to tutorials on the web that I haven't found.

Answer 1

1. One website all browsers.
As #Tak mentioned the answers here is 'Progressive Enhancement' and 'Graceful degradation'. However the definitions he gave are not quite right. Here are the proper ones:
'Progressive enhacement' (see link) means that you code for the old browser first (IE6/7 with/without JavaScript is a good starting point) using tried-and-tested technologies such as HTML4 and CSS1, then add enhacement as you progress through testing on more modern browsers down to Chome and Safari on mobile devices which support CSS3 and most of HTML5. This way, you aim to provide any browser with the best possible combination of features supported in it (its never going to be perfect by the way so bear in mind the 80/20 rule to avoid running project into the ground).
'Graceful degradation' (see link) is kinda the same thing but backwards, its a more lazy way of doing it. You start building your site against a modern browser and then apply 'patches' and 'fixes' until its acceptable on older browsers. This ends up creating a lot more work than planning it properly from the start and what generally tends to happen with this approach is that the developer/stakeholder will give up at some point (ie. what the hell? its too much work to get this working in IE6/7 - I'll just de-scope them)
2. Best way to standardise the layout
Personally, my suggestion is that if you want a standard layout across mobile and desktop devices I suggest you use a combination of BIG fonts (so they are visible in a tiny mobile screen) and small ones (so people that have a Desktop browser can read all the detail) on a Desktop-size 900-1000px width.
This site is an example:
http://www.valuetrader.net
When I open it in my Desktop browser I see a lot of detail, but when I'm on the go and use my Smartphone all the critical information (ie should I BUY or SELL a share?) is displayed on a very big font that appears legible in my tiny screen.
UPDATE 2014
This part of the question has now effectively changed to 'Whats the best way to implement the layout?'.
At the moment (and for the last few years of widely available CSS3 support) the standard approach for cross-device layout design is to use a so called 'Responsive' layout based on media queries. There are many CSS frameworks available to get users started with mobile-friendly layouts.
The basic principle for 'Responsive' design is that scrolling on mobiles devices makes vertical space virtually endless so you are only limited by horizontal space. Thus you have to ensure that as the screen gets smaller you let the page flow to fill up all the available horizontal space, and any navigation bars or horizontal elements are folded over vertically so that items are stacked on top of each other rather than using space horizontally.
The standard way to test a site's 'responsiveness' is by dragging the side of your browser window to reduce available width.
The better way is using Developer Tools, for example Chrome has a button to toggle device mode, here is an example using Stackoverflow:
An example of a media query to specify a layout for the #site-banner element on desktop and mobile screens would be as follows:
/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }
/* TABLET SUPPORT - rules apply below 1000px width */
#media all and (max-width: 1000px) {
#site-banner { width: 700px; }
}
/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
#media all and (max-width: 700px) {
#site-banner { width: 480px; height: auto; }
}
/* MOBILE SUPPORT - rules apply below 480px width */
#media all and (max-width: 480px) {
#site-banner { width: auto; height: auto;}
}
3. How is dynamic image scaling done?
The mobile device does a lot of this for you so generally you just need an understanding of how it works. Basically, when the first mobile browsers came out they had to make sure that the sites that were already out there working for desktop browsers worked on a mobile too (otherwise nobody would use their smartphone to browse the web) so they had to come up with clever ways to detect the width of the site and resize it to the screen resolution that they had available.
For example my site 'www.desalasworks.com' is coded to 900px width, but it works fine by getting down-scaled on a small 320px screen (images on the page are automatically resampled using a variety of methods - such as nearest-neighbour sampling and bicubic interpolation, and the fonts replaced with native fonts wherever possible). As far as the image sampling goes, if you have ever pinched a photo on your smartphone to 'zoom in' and 'zoom out' you know what I'm talking about.
You generally dont need to worry about CSS to get your images to resample properly, I noticed that sometimes they are a bit funny when using percentage widths so stick to pixels if thats the case to make it easier for the browser to tell where items are in relation to one another. Note that you CAN specifically detect the mobile browser and set the width of your site to 320px and everything in it to fall in-line accordingly but in reality this is not necessary to have a working site on a mobile device and doing this will force you to maintain 2 sites, a mobile site and a desktop site (which some companies are happy to do).
4. Percentages / fixed width.
Personally I tend to use fixed width centered on a screen (using CSS margin: 0px auto), I haven't used percentage widths for a LONG time, mostly because its a bit of a nightmare to standardise the layout. If you do use percentage widths you'll basically have to do a lot more testing so I would tend to veer away from them.
Bear in mind this is just my opinion, some 'reponsive web' gurus will swear by percentage widths on just about everything, I'm just not sold on the idea of sacrificing predictability of the layout for what I see as marginal benefit. But then I come from a background of building desktop webapps, I'd probably think differently if I was just focused on mobile web (where horizontal space is at a premium and layouts tend to be simpler).

Answer 2

You're correct about the percentages.
As art elements, the habit is to (with CSS) set a percentage width on an image and set it's display to block.
There's a couple techniques for changing the resolution of images based on the client's screen size as well, like responsive-images.js. I don't think there's a perfect answer on how to tackle this issue yet.
If you're really interested in responsive design, I highly recommend Ethan Macotte's Responsive Web Design.

Answer 3

The two buzzwords at the moment are graceful degradation and progressive enhancement and I'm a fanboy of the latter. Graceful degradation means you hide and/or resize elements on the page for viewing on a mobile screen. Progressive enhancement means you code for the mobile browser, then add bits on if they're using something bigger. The latter is best because it prevents mobile browsers having to download giant images and a bunch of includes it'll never use, and mobile bandwidth is at a premium.
I use 320andup which is a great way to style a web page at 320px for mobile browsers, then other resolutions for tablets, netbooks, PCs and ridiculously large Mac displays. Web pages look great on all resolutions.
I never use percentages. I style a web page at 320px fixed width, 480px fixed width, etc so I know exactly how it'll look on each device. I do all my image scaling on the server with variables in the URL - the server caches the resized images for later page loads. That way my shiny web 2.0 logos are tiny for mobile devices but large on the big screen. This is another reason not to use percentages!

Answer 4

The answer by Steven de Salas is excellent! If you have the time, effort, and/or team available to do a hand-crafted mobile website, then go for it with his tips.
But if you want just an automated, mobile-ifying function, then that's also possible. In fact, starting with an automated function that can make a website mobile-friendly is a good starting position for making your own customized version.
Basic Approach
Use document.styleSheets[0].cssRules to parse the CSS Rules and cssRule.style to change previously configured styles. The advantage here is clear: Most of your CSS already done can automatically be ported over to the mobile version.
Basic Solution
viewport — Set your viewpoint in the header: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
img.width — The simple part is to parse every image and adjust the width according to a scale (currently, I use 1:2 ratio for image sizes).
document.styleSheets[0].cssRules[i].style — Use document.styleSheets[0].cssRules and the rule.style attribute to parse the CSS file for your site, and adjust everything up/down in size as needed.
Demo
var isMobile = false;
var ui_scale = 1;
var image_scale = 1;
document.getElementById('mobile-ify').addEventListener('click', function(ev) {
isMobile = !isMobile;
if(isMobile) {
ui_scale = 2;
image_scale = 2;
} else {
ui_scale = 0.5;
image_scale = 0.5;
}
const styles = getUIScaleableStyles();
const stylesheet = document.styleSheets[0];
const ruleList = stylesheet.cssRules;
for (var i = 0; i < ruleList.length; i++) {
const rule = ruleList[i];
for (const style of styles) {
if(rule.style[style]) {
const fontsize = rule.style[style];
const numeric = parseInt(fontsize, 10);
const unit = fontsize.replace(/^\d+/, '');
if(unit !== '%') {
const resize = ui_scale * numeric;
const newvalue = resize + unit;
rule.style[style] = newvalue;
}
}
}
}
const images = document.getElementsByTagName('img');
for (const image of images) {
const oldwidth = image.width;
const newwidth = image_scale * oldwidth;
image.setAttribute('width', newwidth);
}
});
function getUIScaleableStyles() {
const updateableStyles = [
'fontSize',
];
return updateableStyles;
}
.text {
font-size:1em;
}
<center>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Honeycrisp.jpg/1920px-Honeycrisp.jpg" width="100">
<br><br>
<button id="mobile-ify"><span class="text">Mobilify Site</span></button>
</center>