Page 1 of 1

Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 1:57 pm
by tommy888
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.

Re: Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 3:08 pm
by tommy888
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.

Re: Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 3:26 pm
by tommy888
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?

Re: Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 4:18 pm
by tommy888
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.

Re: Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 4:23 pm
by BaconFries
Previously asked and answered regarding Parallax in mobile browsers... especially Safari!
viewtopic.php?f=59&t=77111&p=385826

Re: Rendering for Apple OS devices - layers and pictures

Posted: Fri Aug 23, 2019 4:29 pm
by tommy888
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