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 8 years ago.
Improve this question
I was having a discussion with a designer friend yesterday, the salient points of which I'll detail below:
2x images are larger files, but not the 4x you may think. In one example a 1x image file is 47kb & its 2x counterpart is only 55kb.
2x images are only for Retina screens, and despite being phased in on the desktop/laptop side, the truth is that most retina screens are mobile.
While wifi is becoming fairly ubiquitous, desktops (mostly 1x) are the only devices that never have to download data off a cell network.
These all led me to posit the question: Why are we spending energy on providing 2x images, when they are mostly accessed by mobile devices which have the greatest bandwidth limitations?
After sleeping on it, I started to wonder: well fine, if we're going to ignore that last issue, why not just only deal in 2x? CSS can handle scaling down the images in any case (perhaps I'm wrong here?) so why not save the media queries & save the effort to generate and store 2 copies of every image by just using 2x everywhere?
Am I crazy?
The file size issue does bother me. I think things should be as small as possible.
If you're not worried about that, though, the only, temporary issue I can think of is browser support for background-size. IE8 doesn't support it and it's still used enough to have to worry about it (at least on my projects). There's a polyfill for it, but it's not up to snuff with the real thing.
I think the answer depends on where you live in the world. Believe it or not, I live in an area with a lot of country roads that still only have dial-up. Sometimes, even that does not work. We are still not nearly as high-speed as we should be with desktops. I can't imagine them having to download that extra data when they view 1x.
So, I think it depends on your target audience, where they are more likely to live or what devices they use. We will get there in time, but for some, not yet.
Let analytics be your guide
I use the 5% rule. Once any feature is more than 2 standard deviations out of the norm, I drop support for it. In browserland, that means IE6 and IE7 are gone for me but I keep supporting IE8 because a size-able chunk of the audience is using that feature. Yeah the big guys like Google have dropped it but I still see a good chunk of traffic from it on a lot of sites. Why make them suffer?
Now how this relates to your question: ask yourself what percentage of your audience is on a 10Mbps+ LTE connection with retina screen. Maybe in your case it's 95% retina screens with LTE on mobile, but check your analytics package. My guess is that it's probably under 20%, in which case having fall-backs gives a better UX to 80% of your audience - easily worth the effort.
In my opinion I see those problems:
some older phone models (ex: iPhone 3G) and tablets (ex: iPad 1) have low memory. A big enough image can cause out of memory errors.
to scale an image the system has to load it at full size and do a complex scaling operation each time it draws it (sometimes it is cached).
a scaled down image doesn't look as good.
you can run into problems with them in older browsers (as mentioned by Bill Criswell)
it increases download size. If we consider a 10kb increase in size / picture * 10 pictures per page than you get 100kb per page load. If your page has to display a lot of images (think social), than the overhead is a lot.
you can improve your search engine rankings if your page loads faster and it is smaller.
The only major issue is file size. And as you state, in a lot of cases, the file size differences are minimal.
If we're talking mostly icons, the benefit is that a) icons aren't huge to begin with, so the file size increase is minimal and b) icons benefit the most from retina resolution.
On the other hand, if we're talking 'full screen' news photos, those could be quite a bit larger file-size-wise, but also look perfectly fine if they are not retina (as they are continuous tone) so there's a less compelling need to make those retina if you are targeting a mobile device.
A compromise for the latter might be to lazy-load them. Check the screen size. If phone-sized, load the regular image and call it good. If it's larger than phone size, load the regular image, then go back and grab the retina version for those on an iPad 3, for example.
The only technical problem is IE8 and older. They can't handle the CSS you'd typically use for retina images. There are workarounds, but not for sprites--which you'd commonly use for icons.
Eventually, we'll see more SVG support, which will solve this problem--at least for icons. When I am doing pure iOS work, for example, most all of my imagery is SVG now. It's smaller, and automatically retina-ready.
Related
I already used RecordRTC, but I had to abandon this decision, because I was getting videos with low quality and small fps. I tried change the options (videoBitsPerSecond, frameInterval) to improve quality, but nothing helped. Maybe I was not competent enough on this issue, but searches on this topic were futile.
If solution isn't exist, I'll look in universal plug-ins direction. Tell me what is better to use in a plugin to record a screen or region in good quality.
Presently only Firefox supports Screen Capture at navigator.mediaDevices.getUserMedia(). You can try testing various constraints at the Firefox implementation for screen, application, and window at getUserMedia Test Page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
When building mobile application for Android or iOS we must provide images for several resolutions (mdpi, hdpi, xhdpi..2x, 3x..etc), beacuse mobile devices do have different resolutions...
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
A solution to do this has been proposed some time ago now, as it is a totally relevant use-case.
The answer to your question about "why we don't have to do this" would be, "we do have to do this", as pixel density differs on bigger screens too and especially for responsive pages, there is need to provide different pictures (not just different resolutions) that fit the content better (commonly referred to as art direction based selection).
This is why the <picture> - element (link to w3c HTML spec) exists and has added support for various attributes like media-queries, multiple sources and srcsets for different screen densities, as we use them on mobile pages.
Additionally, srcset and sizes - attributes exist for the <img>-tag as well.
This page (usecases.responsiveimages.org) describes the different use-cases for this.
The "right" approach will always depend on what you want to achieve, but at least offering different resolutions for varying pixel-ratios should be a standard in my opinion.
So these elements and attributes give you tools to select your image based on
device-pixel - ratio
viewport
context (completely different pictures, not just resolution)
image-format
and you should make use of these tools, no matter what device you're targeting.
Note that the browser support for the picture-element is getting better and better, but is not complete now (at the time of this writing, only Chrome and Opera have it fully implemented when it comes to Desktop - Browsers, Firefox has it implemented but still locked behind a flag, this should change with FF 38). There is a fairly well working polyfill though (https://github.com/scottjehl/picturefill)
tl;dr We really should do this, no matter what device and modern browsers give us very competent tools for doing so.
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
Actually we do, its called retina ready design.
Here three things are to be understood.
1. Pixel density
Pixel density is the number of pixels a display can fit into a fixed distance. This is most of the time measured is PPI (Pixel Per Inch)
2. Resolution
Resolution is a simple count of the number of pixels across the entire width and height of a device.
Now, to further explain this concept, lets take an example of two tablets of same dimensions, say 7 inch tablets, both are physically identical in width and height.
Now at a glance these both tablets may seem quite identical, but first one (Tab-A) has a resolution of 320 x 480 while other one (Tab-B) has a resolution of 640 x 960. So These directly affect the PPI.
What this means is that the Tab-B is cramming (displaying) more (double) no of pixels in the same physical dimensions, effectively increasing the PPI.
So if we choose an icon of say 150 x 150px and display it on both the devices, the same icon on Tab-B shall(should) be half the size of the same icon displayed on Tab-A. With this, the user of the Tab-B shall have double the content of what the user of Tab-A has.
This may sound good, but we must remember that the user of Tab-B has everything half the size of what the logo was originally intended to be, so now he has to exert his eyes more, in order to figure out what that logo is about. But thats not the case.
Here enters the Third concept.
3. Viewport
In my own view/understanding (for lack of official def), A viewport is the virtual resolution that your browser renders, irrespective of the native device resolution. This is supposed to solve the problem of "too high resolution making objects too small".
What this does is that, it renders the logo(and every other thing) on Tab-B the same physical size as Tab-A, effectively stretching the graphics.
Now if the graphics were vector then they would scale seamlessly, but if they are images, then they create a shabby/jagged edges making the images look bad.
This is where you need images 2x the resolution.
So, Coming back to your problem, The difference between the viewport of a normal desktop and its native resolution isn't much.
You should not post the question with a (false) answer included:
We don't have to, but we should create and use images with higher resolutions for all devices that may have pixel ratio>1 because it is not rare that those devices display images using much more pixels than it supposed to. Even if the pixel ratio is 1, all browsers have a zoom feature, which also requires high(er) resolution images.
This means that simple image that we define as:
<img src="myimage.jpg" style="width: 200px; height: 100px;" />
may be displayed at 400x200 px or more. Check some common device pixel ratios.
Therefor all the images used should be at least 2x width, 2x display height (which means 4x larger). If possible, for vector images we should use SVG or icon fonts.
We can also target devices by pixel density using CSS media-queries (short article here. Personally, I do not care that much, serving few Kb or Mb more is nothing to current internet speeds (and will mean nothing in years to come).
Folks voting to close as not constructive, read the whole thing please. Specific questions at the end. Looking for real world examples and approaches.
Context
With numerous devices like smart-phones, tablets being used increasingly to access the web its important to plan, design (responsively) and develop (esp. your front end) to give the devices a fast and tailored user experience.
There's some amazing sites being built. Have a look at mediaqueri.es (resize your browser)
We see approaches such as
big screen first, then target smaller devices.
mobile first then media queries to spice things up for bigger screens.
device detection with different techniques (including server side)
and serving completely different markup and content to devices.
Question(s)
What are you folks doing out there today? Why did you choose your approach and most importantly if it isn't the most efficient approach to tackle this, then what is?
Things I'm looking for:
Is it a pure CSS / JS / HTML approach, or server side, or a combination - why?
Each device gets only the resources (images etc.) that it needs so it performs well
Maintenance of the site is easier, i.e. adding / changing features is not a huge pain
Some code samples are always useful
lets leave out old shitty browsers like ie7 and below
I think what you are looking for is Responsive Web Design.
See:
http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsive Web Design (using CSS) does not necessarily address performance issues but is a good starting point. Keeping in mind that premature optimization is the root of all evil, you can profile your users and bandwidth and determine where you need to optimize once you have a working design in place.
For a discussion of some of the downsides, e.g., image resizing in the browser (you can work around this with CSS and/or AJAX, though), see:
http://www.webdesignshock.com/responsive-design-problems/
You will want to use a framework like PhoneGap. HTML evolves slowly but every day, about 10 new devices with new bugs "features" hit the market and you innocent app - there simply is no way for a small group of people to handle the necessary work.
As for different devices, there are two trouble areas:
Screen sizes
Render bugs
For screen sizes, there are pretty cool solutions today. For example, some frameworks add the CSS style "640x400" or "480x800" to the body element. That makes it dead simple to style elements depending on the screen size. Or you can use JavaScript pull in the matching style sheets.
For render bugs, you'll need workarounds. As I said above, this is nothing a single person or a small group can handle. Every few months, there is a new version of Android with a new render engine and new "features". You fix problems for one of them and break ten others at the same time. Select a framework which plays well with many devices and which is open to changes (read: avoid anything proprietary).
That way, you get solutions for the common problems and you can fix small issues yourself.
I would definately recomment RedFilters Answer (+1).
I just wanted to add some libraries which you might find interesting relating to this topic. They involve Browser feature detection & conditional resource loading.
check them out:
http://www.modernizr.com/
http://yepnopejs.com/
I read somewhere that once you log in here (http://skweezer.com/) and put the website url, we can get the way the site will appear on mobile browsers. I tried getting this url (http://sachindra149.wordpress.com/) and was baffled to see he way it looked.
1) Can anyone please let me know why is that so ??
2) Why such a major difference???
3) And also what needs to be done ...
keeping one thing in mind that I dont have the control over the web codes for the page as it is a blog....
Hope I am clear enough !!!!!!!!
It looks like it just dumps pages to text. That isn't a realistic view of what mobile browsers do these days. Unless you are explicitly developing websites for low end and old mobile devices, don't worry about it.
If you are developing websites for such devices, then:
Don't use generic blog hosting which doesn't give you lots of control
Avoid tabular data
Avoid chrome (large navigation, anything that isn't the primary content)
Keep content short and to the point
Test of real mobile devices instead of third party emulators
First of all, it's not as bad as it looks. Mobile device have only very limited resources but they are much better today.
What you see on skweezer.com is just the raw text without CSS styling, tables and other complicated HTML. This way, the site loads much (!) faster and you only transfer a fraction of the data. Your original site needs 320KB, the skweezer version needs 50KB - less than 1/6th. Mobile browsing got much faster and cheaper but it's still many times slower and more expensive than on the desktop.
As for what you can do about it: Not much. You could select a design which is optimized for mobile devices but to know how good it looks, you would need all mobile devices that access your site. I suggest to rely on the experience of the designers at Wordpress. Your site does look much better on most mobile devices.
I prefer checking them on real devices.
Chrome extension like this will help you vew your website on different screen sizes if there is a limit on devices.
How do you make your website look good in both a standard browser and on the various mobile devices available?
Currently I am undecided between trying to make my layout resizable so that it will work for small devices, or providing a separate CSS for mobile devices.
My use case is a chess game where I want the entire board to be available without scrolling down.
What would you recommend?
basically there is no easy way to do this, you can use CSS on most modern phones to control the output but you need to resize the images before they are displayed on the phone as all phones have different screen sizes.
The best site I have come across dealing within mobile design is : http://patterns.littlespringsdesign.com/index.php/Main_Page
In this particular case, it sounds like for optimal viewing it might be worth targeting mobile devices specifically.
I would recommend the CSS approach. Otherwise, I fear you'll have an interface that will only look adequate in both and only mediocre at that.
You don't want your site to look like it's compromised for one audience or the other.
I don't know if you realise how big a question you're asking -- "the various mobile devices"? That's a lot of devices, a lot of resolutions and a lot of bugs and limitations, all the way from iPhones, which can handle anything a normal browser can handle, to tiny little black-and-white screens.
In theory, you can write separate CSS to target hand-held devices
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">
but personally, if you're trying to support a large number of devices I think detecting the device and trying to feed it code it can handle is the only real solution.
You can start looking at how big the problem is by getting WURLF which is a 13MB XML file of details about the different devices and their capabilities.
Try Google's new Mobile friendly test tool to evaluate your site 1