iPhone mobile web app retina image replacement - javascript

I am creating a web app to be accessed through any smartphone. I have the index.html file here:
http://www.mediafire.com/view/?hy2jttea705ukpw
I have 2 jQuery functions on it. One is to detect if it is an iPhone the user is viewing the web app through and comes up with a little bubble, detailing instructions to add it to the homescreen. The next is a script to replace images with the retina images in my root folder with "#2x" in the name.
This is my problem. It works SOMETIMES and it doesnt always find the retina images to replace the original. Any ideas?
You can view the project at www.iammarksummerton.co.uk through an iPhone to see what I mean

I looked at your app in there and think I see the problem. Assuming the images which arent showing up are those with the #2x suffix in their name, the problem is they are returning 404 errors.
Its possible the images are innacessible due to something in the htaccess.
Its possible the path to those images is wrong
Its possible the images are simply not there
PLease check for that, and that may solve your issue
IMPORTANT With that said however, I'd advice abandoning using javascript to look for this retina images and instead going with a css route. I love javascript, but its overkill for what you are trying to do.
Each of those images with the css class .heading could be drawn with code. I assure you it will make your app load faster as a bonus. This is how id replace that with css. I tried it and it looks exactly the same, but did not require images to be replaced.
**The html would be something like for each of those heading divs**
<p class="heading">Can I access your social media?</p>
**The css would be like**
.heading {
min-height: 53px;
border: solid 2px #FD8B25;
border-radius: 5px;
line-height: 53px;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
padding: 0 12px;}
.heading:after {
content: '▼';/*You can replace '▼' with url(path/to/image) if needed */
float: right;
}
This wont replace the image but will look ultra sharp as its code based. If you still want to change your images to sharper ones through css avoiding the slower overhead of javascript. Use this...
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.myCSSClass {
background:url('path/to/image');
/*in the case of an image tag, add lots of padding margin so that original image is not visible*/
}
}
Hope this helps. To avoid this resolution issues, always try to use code over images if you see no issues with this. Only time I see this being an issue is if you must support old versions of IE, and you must keep every graphical element. For image heavy websites, I usually avoid optimizing the images to be retina optimized. Fast load time is sometimes more important than high resolution.

There is no clear cut solution for responsive images at this time. Chris Coyier outlines a few of our options.
No matter which you choose do not serve 2x images to iPhones only. For one, not all iPhones have retina displays—second if you're trying to build something somewhat future-proof, you'd want to target pixel density, not one model of a phone. Other brands and operating systems will probably have high-DPI screens in the near future. In the end it will be less work for you.

Related

Browsers pixelate images when scaling them DOWN

I'm designing a website that has a lot of high quality images. Right now, I've got the images set at 1000px x 1000px. A majority of them are .png with transparency. I've noticed that as some browsers scale DOWN the images, they pixelate the images pretty severely. I've noticed this already in Internet Explorer and Microsoft Edge; however, in firefox and chrome the images look great
Question
I was curious if there was a html/css/javascript method of preventing that from happening?
I will eventually put a system in place that loads a different size image based on width of window; however, for now I'm hoping there is an easy solution available for this.
Sorry if this is a duplicate. Every time I search for this, people are asking about scaling UP images. I couldn't find anything about how browsers effect scaling DOWN images that had a solution.
EDIT
I was asked for the code and I will post the code associated with the images; however, I don't forsee it being a css code issue as it is only effected on certain browers (the two I've noticed are IE and Microsft Edge)
Its fairly basic code
#tribox_1 img,#tribox_2 img,#tribox_3 img { clear: left; width: 50%; height: auto; }

Website content jumping up and down when resizing window?

I noticed on some screens and initial load my website content jumps up to meet up with the bottom of the banner. When you resize the window the banner seamlessly resizes to fit. However while resizing the window you will notice the content jumping up and down. I feel like it has something to do with the header height but not sure why it would be delayed in meeting up with the bottom of the banner.
I have posted code question on here without asking this question direclty trying to solve the issue. (For example making a script that changes the header height when the banner size changes.) But was unsuccessful in getting it to work the way i needed and think it was the wrong route anyways.
You can see the site HERE - Resize your browser window to see the content jump and and down.
Any help in the right direction where I could solve this issue would be great! Thanks!
You are using a CSS layout which tries to 'fit' everything perfectly. This is known as a reponsive design (on each 'breakpoint' defined in your css it even tries to use a different height). While this is nice for a website to have (it means that on any device it looks good, to fit) it does put some stress onto the css.
Unfortunately, it is very hard in a comment to help you out. Since it requires some basic refactoring to get a much better performance. If you are interested in fixing it however, a good place to start learning what to take on is: https://developers.google.com/web/fundamentals/performance/rendering/
Also, and this might help allot if you are interested, you can actually 'see' how hard your computer (or device) is working for the drawing performance. When in Chrome (OS X or Windows, doesn't matter) you can open the inspect view (ctrl+shift+j) and go to the timelime tab in the upper bar. When you have opened your website, press the leftmost 'record button', then resize the browser and press stop recording. You will end up with a screen similar to this: https://i.stack.imgur.com/6lS3I.png (this is just an example, not your site).
In the timeline view you can keep track of your performance, you want to avoid purple (layout) bars since that 'costs' a lot performance wise (also the link mentioned earlier explains this very well). As developers we tend to aim for 60fps drawing performance, however this takes quite some effort to reach (especially on full responsive websites). Currently the layout trashing alone takes about 15ms and 10ms paint on your website (on my game pc!). As I 'strip down' the site (leaving only the header) the resizing is fast enough to render smoothly. Clearly the solution to your problem can be found in optimizing your CSS.
On a side note, other than the resizing, you don't seem to have many issues regarding performance it seems. No heavy scripts run around scrolling or anything. Which is a GOOD thing already. And I am quite sure most of your visitors won't be resizing all the time ;-) Hope this helped!
I'm not sure but i think it's because of your responsive design has no min-width and max-width defined.
It's used to limit an element that has responsive design to not get too big or too small.
sample:
.header {
opacity: 0.7;
font-size: 8pt;
color: grey;
width: 100%;
min-width: 150px;
vertical-align: top;
}
you could try reading bit bout it here, good luck trying to fix that page :)
http://www.w3schools.com/cssref/pr_dim_min-width.asp

Duplicate HTML or move elements with JS for responsive site

There's site I'm working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).
My question is, what would be the best way to go about this? So far I have only two ways.
1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it's not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?
2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?
Would really appreciate some input on best practices in a situation like this.
Here's what I'm trying to achieve:
The questions are contradicting a bit :)
First of all, it's 2016 in the WEB, if you are speaking about having responsive layout, support of mobiles, tablets, desktops - they will have JavaScript support, so you shouldn't worry. - it is answer on your question number #2. The percentage of people not having JS is extremely low, it's below <1%.
CSS media queries are enough to make good responsiveness. Sometimes you need to add helper methods with JS to manipulate DOM and to make it even more advanced.
You may check how they do responsiveness with classes in Twitter Bootstrap.
Sometimes content will be duplicated in HTML, but as soon as it's not visible simultaneously on the screen because of visibility rules from CSS media queries - it will not do any harm on SEO.
There's the way to over-complicate things a bit, RESS: Responsive Web Design + Server-Side Components, and to serve different HTML layouts depending on the detected User Agent.
You mentioned that you were reluctant to use display: hidden because something about them being rendered. If I'm understanding correctly, then you can use display: none on the right side for example. Then in your media queries, you can set content on the left to display: none and content on the right to display: initial. That should work just fine, if I understood you correctly. Then no space will be allocated for the hidden elements.
For example:
.leftDiv {
display: initial;
}
.rightDiv {
display: none;
}
#media screen only and (max-width: 1000px) {
.leftDiv {
display: none;
}
.rightDiv {
display: initial;
}

How to make a webpage load to a particular resolution?

I have designed a (non-responsive) website in my machine which has a native resolution of 1920x1020. But, most of the machines nowadays come with 1366x768 resolution in which my website looks jagged up. I want it to load in a particular fixed resolution. How can I do that?
You cannot.
Browsers provide no API to reconfigure a user's graphics drivers.
Even if it was possible, it would be a terrible idea since modern screens tend to give poor rendering when not run at their native resolution.
Designing a site that only looks good in 1920x1020 is not a good idea. There are two basic options:
Wrap all your content in a <div> which has a fixed width. Then use that width as the basis for your design. Use margin-left: auto and margin-right: auto to get the content in the middle. This is the way Stack Overflow is designed. On a bigger screen there will be empty space on the sides. On a smaller screen there will be a scroll bar.
Create a responsive design that properly scales down. Harder but better.
There are browser addons that can help you on this. They resize your broswer to sizes that you want to test. for chrome you can use this extension
https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
You can find firefox addons with similar functionality.
If you want a rough check on how responsive your site is then for checking on a higher resolution zoom out in your browser. for lower resolutions you can zoom in. but the disadvantage here is you can only visualize in resolutions that are of same aspect ratio of yours so you need to resize the browser to that particular aspect ratio and then do the zooming.
Hope this helps.
at the beginning that's all you need to do
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#mainContentDivInsideBody{
margin:auto;
width: 990px; //or more
height: 100%;
}

Background instead of inline images for mobile optimization with media queries?

Ive mobile optimised my site with media queries. Everything looks how I would like it to but unnecessary images (as they're hidden with css) are being downloaded, slowing page loading times.
The easiest solution to this seems to be to replace as many inline images as I can with divs with background images. Then I can hide the div's with media query css for the mobile version.
I know there are potential downsides to this, outlined well in this post:
When to use IMG vs. CSS background-image?
So the company logo, pictures of staff, etc will stay as inline images.
Are there any issues to my approach I havn't considered? Ive read a lot about mobile optimisation, particularly with media queries, and I havn't heard of anyone doing this even though it seems quite an obvious solution where images could be inline or background.
Note, ive done some experiments with iPhones and Android (im waiting to get some Blackberrys) and I know to stop background images downloading I need to set display none to the div's parent, not the div with the background image itself.
Note2, in an ideal world sites would probably have been built as mobile first but in this situation (and often in others) there is a limit to how much the original site can be modified.
Thanks
Unfortunately, there are no great answers for the problems you’re trying to solve.
First, you have the option of moving everything from img tags to css background images. As you note, you have to be careful of losing semantic meaning by doing so.
But even if you can move to background images without losing semantic value, it is still not going to be 100% reliable. I wrote a series of tests last summer. I retested them last week in preparation for the chapter in our book on mobile first responsive web design. The tests are located at http://www.cloudfour.com/examples/mediaqueries/image-test/.
Unfortunately, Android fails every one of those techniques. You can see it downloading multiple copies of the image files via Blaze’s mobile test:
www.blaze.io/mobile/result/?testid=111031_96_316
UPDATE 3 Nov 2011: I’m currently trying to reconcile inconsistent results between what I see on Blaze and what I see using the same device in person. On my local Nexus S, it passes the fifth css test which limits the imgs by putting them inside the media queries. I watched the apache logs and confirmed the device only downloads one image instead of two for test 5. Blaze is running 2.3.3. My phone is running 2.3.6.
This is true for Android 2.2, 2.3 and 3.0. Hopefully, 4.0 will incorporate the webkit fixes that prevent this behavior:
bugs.webkit.org/show_bug.cgi?id=24223
BTW, this seems to conflict with your comment about testing setting the parent div to display:none on Android. If you’re getting different results, I’d love to hear about it.
If you keep them as img tags, what are your options? On this topic, I have written a multi-part series. The second part in the series provides an in-depth look at the different techniques:
http://www.cloudfour.com/responsive-imgs-part-2/
Again, none of the solutions are great. If you want something that is simple and will work most of the time, I’d go for adaptive-images.com. Or route images through Sencha.io SRC until we have a better solution for this problem.
BTW, sorry for having so many links that aren’t actually links. This is my first response on stackoverflow and it will only allow me to include two links.
Why not do a mobile first approach and then use media queries to enhance bigger screens.
Also you can use media queries to serve specific CSS files.
With the inline images I have tried a script block in the head and immediately after the opening body tag, which runs only for mobile devices (detect via classname added to body, or presence of a media query CSS file) that find all inline images with a certain class and empty the src attribute.
see here Prevent images from loading
<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>
another way is to use url re-writing with mod rewrite and .htaccess or url rewrite module for iis. redirect user agent strings for mobiles to a small blank image.
see:
A way to prevent a mobile browser from downloading and displaying images
RewriteCond %{HTTP_USER_AGENT} (nokia¦symbian¦iphone¦blackberry) [NC]
RewriteCond %{REQUEST_URI} !^/images/$
RewriteRule (.*) /blank.jpg [L]
you can improve the above by loading your inline images from a different sub-domain and rewriting only those for mobile, as you don't want to rewrite all images (logo etc.)
If I'm understanding your question correctly, this seems like a perfect use case for srcset and sizes. This MDN article is a great post for learning the concept in-depth, but I will also summarize here. Here is a full, kind of complicated example:
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
This code says:
If my browser doesn't support srcset use what is in src by default. Don't leave this out.
Hey browser, in srcset, here are 3 files and their natural widths separated by commas.
Hey browser, in sizes here are the widths of the space I want my image to take up depending on the media query. Use the one that matches first.
Then the browser itself will calculate which is the best image to use based on size AND screen resolution of the user then ONLY downloads that one which is pretty awesome in my book.
Ok, important thing to note is that mobile != low bandwidth != small screen and desktop != high bandwidth != large screen.
What you probably want is to make a decision based on client bandwidth and client screen size. Media queries only help with the latter.
David Calhoun has a great writeup on how to do this here: http://davidbcalhoun.com/2011/mobile-performance-manifesto
Highly recommended.
I stumbled recently on a great blog article on the subject, adressing the problem of responsive images (ie serving smaller images on smaller devices). The comments of the article are the most interesting part, and I think the replacement technique coined by Weston Ruter is a promising one :
http://jsbin.com/ugodu3/13/edit#javascript,html,live
(look at the other iterations in the comments).
It has lots of caveat (and is maybe difficult, but not impossible, to merge in an existing website, as the affect all your non absolute links, not only imgs), but I will try it (merged with a lazy loading) on my next project, which is a responsive website that my designer made quite heavy (and he does not want to make it lighter). Note that you could combine this to a php script resizing the images on demand if your server supports it.
The others common solutions for responsive imgs are cookie based (check Filament Group Responsive images plugin).
I prefer responsive images to css background because they're more correct semantically and parse-able SEO-wise. If I agree that we should not assume that bigger screen = more bandwidth, we lacks tools to address this (navigator.connection is Android only.) so assuming that most mobile users have a crappy 2G/3G connection is the safest way.
I'm not sure if you have thought about doing this but one of the things you can do is check for the width of the screen resolution with javascript and then if the resolution is less than some number (I use 480 because at that point that site looks bad) then switch the css templates from the default to the mobile themed template.
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
if (myWidth < 48)
{
switch css template to mobile template
}
}
Adapting to an existing site sucks but we do what me must. Here is how I solved it when importing a blog's feed into a mobile site. It scales the existing image on the page to the page's width ONLY if it's larger than the screen.
var $images = $("img[width]");
$images.each(function(){
try{
var $image = $(this);
var currentWidth = Number($image.attr("width"));
if(currentWidth > screen.width){
$image.width("100%");
$image.removeAttr("height");
}
}
catch(e)
{/*alert("image scale fail\n"+e)*/}
});
By making the width 100% and removing any height attribute, the image will scale perfectly to take up the full width whether you're in landscape or portrait orientation.
Chances are, the images on your regular site are already web optimized. There's usually not that much performance boost to be gained by loading smaller images. Reducing HTTP requests will make much more of a performance boost than bringing over smaller images. It may not be the perfect solution but it is certainly going to be the least maintenance. If you can't reasonably control what images are going to be used on the site, this is a pretty reasonable solution. If nothing else, maybe this will spark another idea for you.

Categories