Author Topic: Responsive page layout  (Read 13281 times)

Offline ttlforever

  • Newbie
  • *
  • Posts: 2
  • Hosting Package: basic
Responsive page layout
« on: April 13, 2012, 05:20:55 PM »
So in the design process of my site, what is the best way to develop a responsive layout so that my page will be suitable for mobile users as well as those using a desktop using a single layout?

a good example is
http://www.touchtech.co.nz/

try resizing the window size horizontally, and you should see the contents shift dynamically. note that there is no horizontal resizing bar so this is indeed mobile device friendly

cheers

Offline itapeasy

  • Newbie
  • *
  • Posts: 4
Re: Responsive page layout
« Reply #1 on: April 13, 2012, 05:49:09 PM »
So in the design process of my site, what is the best way to develop a responsive layout so that my page will be suitable for mobile users as well as those using a desktop using a single layout?

a good example is
http://www.touchtech.co.nz/

try resizing the window size horizontally, and you should see the contents shift dynamically. note that there is no horizontal resizing bar so this is indeed mobile device friendly

cheers



The first thing to remember when developing a site to be displayed on an iPhone (mobile) is that it is very similar to designing a print stylesheet. You need to linearise everything. Make sure you have one column and everything is read in one line—straight from top to bottom. This will also put your markup writing skills to the test.

Some people don’t agree with browser sniffing, but you need to detect the iPhone somehow.
This first bit of code is a PHP browser sniffing snippet, the actual CSS you use is not brought through via any server side code,  use some CSS media queries for that. What you will need this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title.


For example :

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>

What the above code does is sees if the user agent contains any instance of ‘iPhone’ using the strpos PHP function. Place this piece of code at the very top of your header include, before any other markup. In order to action something if the browser is an iPhone, simply use the following bit of PHP logic in the place you want it to be initiated:

<?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mahatma Gandhi