2 replies [Last post]
webman81's picture
Last seen: 7 years 2 weeks ago
Timezone: GMT+2
Joined: 2012-03-26
Posts: 16
Points: 28

What is the deal with responsive coding for iPad and iPhone all about?
I don't understand. I created an HTML5 website with all content in 1 div with a fixed width of 1000px in the css code.

This layout looks great for laptop, computer, iPad and even the small iPhone screen.
It seems that the layout adapts automatically to the size of the screen.

What did I miss?
Why is this working out of the box?

I always thought that responsive webdesign is something very specific or difficult,
but it seems that it works out of the box? What am I seeing wrong?

Tony's picture
Last seen: 1 week 6 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi webman81, ipad and phones

Hi webman81,
ipad and phones will scale the page down so everything is still visible, that's fine in many instances.
It can be difficult for people to click links, see images or read text, that's where responsive design comes in.
You can display content differently in different situations so menu's are more accessible etc.

Calman45's picture
Okanagan Valley, BC
Last seen: 8 years 37 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Hi webman81, This is the very

Hi webman81,

This is the very subject which I have my teeth into right now.

As you say, to some degree, well planned layout can help with responsive design, especially for phones. I myself tend to stick to centered main divs with a width of 960px wide. I also design content larger than I would a few years back, keeping everything crisp and accessible. Avoiding lots of small point sized text, complicated layouts etc is my first priority with attempting "mobile compatible" setups.

I am still fairly new to the CSS approach to websites, but tags like line-height, padding and margins and font family interpretation across various browsers feel like important things to be aware of.

One last thing .. from my experiences, don't be fooled by assuming your site sits perfectly on mobile devices (just scaled down), as I later discovered than zooming in to read extensive paragraphs on a mobile device, caused text to overflow the container, which can't be seen under normal browser viewing.

I am sure there are other factors to be aware of, but from what I have learned so far, it's not a walk in the park, designing websites which work 100% on all devices/platforms & browsers.

Right now, I take 1 hour each day to research CSS related design and I typically learn something new on a weekly basis. So, even although I still consider myself a beginner in the CSS world, it's satisfying to know that you are finding better approaches to your coding methods.

Hope this helps?

All the best,
Cal Smile