Rendering for Apple OS devices - layers and pictures

Issues related to previewing and publishing your web site.
Post Reply
User avatar
tommy888
 
 
Posts: 386
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Rendering for Apple OS devices - layers and pictures

Post by tommy888 » Fri Aug 23, 2019 1:57 pm

How can I make a website best adjust to Retina resolutions?

1. Images - I can add a retina prepared images (2 x regular image size - image property). They should have a special naming?
2. Layers. There's no option to add retina version of image in the layer. I think it's necessary - those designed for android and web are optimised for fast page loading and good quality.
3. Graphics, vectors I will use all svg - it's scalable and looks great.

http://tomdesign.esy.es

Test page above renders fine for most browser and android devices.
Nonetheless, It looks horrible on Apple devices: Ipad, Ipad Air, Ipad Pro (retina display).

How to make one project that suit both pc/laptop, android devices and apple retina ones? Maybe, some of you specialise in designing mainly for iOS.

Thank you for your suggestions.

User avatar
tommy888
 
 
Posts: 386
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Rendering for Apple OS devices - layers and pictures

Post by tommy888 » Fri Aug 23, 2019 3:08 pm

I guess the question is how to properly set floating layers with image background so as to produce the best user experience.
I noticed Safari also support parallax background and layers.

User avatar
tommy888
 
 
Posts: 386
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Rendering for Apple OS devices - layers and pictures

Post by tommy888 » Fri Aug 23, 2019 3:26 pm

Everything works fine apart from pictures in the Carousel and Layers - they render only a part of a picture in a low resolution. Why? And the most important what can be done with this?

User avatar
tommy888
 
 
Posts: 386
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Rendering for Apple OS devices - layers and pictures

Post by tommy888 » Fri Aug 23, 2019 4:18 pm

It's not picture resolution issue. (the best picture resolution for me is 1920 x 1080 max. 300 kb, pictures in layers + overlay can be half of this 150 kb - it looks professional making the page lighter)

It's the parallax effect for layer and carousel that causes issues. It works perfectly for all android devices and gives nice effect. But there is something wrong with safari / built-in iOS browser. It cause an image to be load improperly.

Can it be fixed in WB as the parallax effect makes an amazing impressions and spice up the design?

Thank you.

User avatar
BaconFries
 
 
Posts: 4719
Joined: Thu Aug 16, 2007 7:32 pm

Re: Rendering for Apple OS devices - layers and pictures

Post by BaconFries » Fri Aug 23, 2019 4:23 pm

Previously asked and answered regarding Parallax in mobile browsers... especially Safari!
viewtopic.php?f=59&t=77111&p=385826

User avatar
tommy888
 
 
Posts: 386
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Rendering for Apple OS devices - layers and pictures

Post by tommy888 » Fri Aug 23, 2019 4:29 pm

BaconFries wrote:
Fri Aug 23, 2019 4:23 pm
Previously asked and answered regarding Parallax in mobile browsers... especially Safari!
viewtopic.php?f=59&t=77111&p=385826
But it works now in all browsers under android OS I checked and tested. The thing changed a bit since then. Therefore I brought the topic back to life.
Maybe there's a workaround with Safari. Always be open-minded and search for new possible solutions, so you'll never be in arrears ... :) That was rather a monologue.

Thank you Bacon

Post Reply