Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Enthusiast Zone > Art & Graphic Design > iPad web design trouble

iPad web design trouble
Thread Tools
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Dec 13, 2012, 06:08 AM
 
Hey,

my parents are about to getting an iPad for christmas I think, but... I have a problem with their website. I didn't really know that, but the web on the iPad seems to be a bit different. I didn't really ever notice any difference, I had rather thought it works really great, and the web was mostly what I expected it to be, but... I tried to google and there seems to be some more technical debate on how to do it - it's an open secret you rediscuss your design in general, but that's not what I meant.

So, this website: http://atelierkunterbunt.net

On the Mac, or on any desktop computer and browser for that matter, there is this sort of "paralax effect" - so there's a background image and a foreground layer that scrolls holding the background fixed. It's cool for this sort of blog, I thought.
But with iPad, this won't work, the iPad Safari browser simply ignores the command, and everything goes weird.

Any idea? What to do? A Safari bug? A quick workaround?

Hmm,
Pete
Think a new age is coming.
     
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Dec 13, 2012, 06:42 AM
 
Usually you can simulate the experience on an iPad or iPhone by simply making your browser window smaller, but you can also simulate the site on any iOS device using the iOS simulator.

Having a fixed position background-attachment is supported under iOS (http://www.w3schools.com/cssref/pr_background-attachment.asp) so off the top of my head I'm not sure what is going on here. Usually CSS targeting smaller viewports can be isolated by making your browser window smaller, like I said...
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Online
Reply With Quote
Dec 13, 2012, 09:52 AM
 
You need to simulate your site at 768 px and 1024 px wide- as besson says, most browsers have a way to do this. Try Opera, it has a "view at full width" option that responds to changes. Firefox with Developer Tools plugin has a "view responsive layouts" which will show you different widths at once. The ipad does a pretty good job of squeezing most sites down to viewscreen but preferably you can use CSS media queries to tell the page to display differently at different widths. For instance, for a vertical ipad page, you may want to stack the columns, with the left column shifting on top. Make the graphic shorter. etc.
     
   
Thread Tools
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Top
Privacy Policy
All times are GMT -4. The time now is 01:54 PM.
All contents of these forums © 1995-2015 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2015, Jelsoft Enterprises Ltd., Content Relevant URLs by vBSEO 3.3.2