How to design a site for iPhone..

Posted by Deep in Web Development on July 18, 2009 | 9 Comments

Recently, we had designed / developed a site for iPhone device. It’s a pretty simple thing to do, so let me share some tips with all you guys..

First, let’s figure out the “to do list” before starting the actual code..

  1. Code the CSS for iPhone in landscape and vertical mode (i.e. when you keep it straight and tilt it), the width of the screen area changes, so we will have to code our CSS accordingly.
  2. Some kind of JavaScript snippet which would detect the screen orientation (portrait or landscape) and change the CSS accordingly.
  3. Some kind of code snippet which would not allow the user to zoom the main web page and disable the auto resizing of the page. (iPhone generally auto resizes the web page when you view it)
  4. And finally, a script which would detect the iPhone / iPod touch device and redirect the user to the iPhone customized website / web page.

So now let’s move on to the coding part..

  1. Let’s divide the CSS in 3 chunks.. this is what I have done:
    • main.css – It holds all the design elements, basically everything except the width of the whole layout.
    • portrait.css – It holds width of the layout in portrait mode (In this case 320 pixels)
    • landscape.css – It holds width of the layout in landscape mode. (In this case 480 pixels)
  2. Now it’s time for JavaScript snippet to detect the screen orientation and apply the CSS accordingly. Here is the JavaScript code which you can use. (Nah, it’s not written by us, you can find the same code freely available everywhere on the net) 
    function orient()   {
          switch(window.orientation){
          case 0: document.getElementById("iphone_css").href =  "css/portrait.css";
          break;
          case -90:  document.getElementById("iphone_css").href = "css/landscape.css";
          break;
          case 90:  document.getElementById("iphone_css").href = "css/landscape.css";
          break;
          }
          }
          window.onload =  orient();
  3. After this, we will have to call this JavaScript function in the HTML file and also call portrait.css. (As our orient function will be called on the load of the body). Apart from this, we will also have to iPhone specific meta tag which will prevent zooming and fit the whole page in the screen width.Add the safari specific (iPhone uses Safari as web browser) meta tag: 
    <meta name="viewport" content="width=device-width; initial-scale=1.0;  maximum-scale=1.0;" />

    Above code will set the width to 320 when you are viewing the page in portrait and 480 if you are in landscape mode. The above code will also set the initial & maximum zoom to 1.0 i.e. actual size of the page. Alternatively, you can try putting user-scalable to 0 too. (I have not tried it but you can play around if you wish to, you can check the apple developer page with info on all the available tags here) Call the CSS file:

    <link rel="styleSheet" href="css/portrait.css" type="text/css"   media="screen" id="iphone_css" />

    In the above code, if you notice, I have set the ID as iphone_css, orient function will replace href content of this ID based on the layout orientation. Call the function in the body tag:

    <body onorientationchange="orient();">

    Above code will call orient function on the change of orientation of the page.

  4. Now, after all these points, you will need to setup a script which will detect iPhone device and redirect to the iPhone specific website. Since, we work in PHP, so my code will be in PHP but you can write the code in any language, many people also use JavaScript for browser detection and redirection. I personally would suggest using server side language. 
    $agent = strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
      if (($agent >0))
      {
      	header('Location:'iphone/');
      }

    In above function, I am checking for the value iPhone in the user agent and if it’s found, I am redirecting the user to the folder called “iphone”

    There might be other ways to achieve this and you can use whichever suits your needs.

    5. So, finally with above 4 steps, you will have an iPhone ready site.. I hope it helps you :)

Read More

How to move your WordPress blog to new address?

Posted by Deep in Web Development on July 6, 2009 | 1 Comment

This guide intended towards database level changes than the other common changes like moving the files etc..  If you wish to know step by step guide on how to move your WordPress blog to a new URL, please check this link.

I know, there are plugins available to change the website’s URL but I am not sure if the plugins cover the tables which I am going to take care of.

So, without wasting much of the time, let’s get the ball rolling..

Note: Please take backup of your current database before making any of the changes.

  1. Update the site URL in the wp_options table. – This table holds the values which are very important to run the site. (specially values stored in siteurl and home fields) 
    UPDATE wp_options SET option_value = REPLACE (option_value,'old_url.com','new_url.com');
  2. Update wp_posts table – This table holds all the post related data. 
     UPDATE wp_posts SET guid = REPLACE (guid,'old_url.com','new_url.com');
    UPDATE wp_posts SET post_content = REPLACE (post_content,'old_url.com','new_url.com');
  3. Update wp_links table – This table holds all the links (blogroll) related information, you might want to change the links where the URL is pointing back to one of your site pages or you have link image URL belongs to the old URL. 
     UPDATE wp_links SET link_url = REPLACE (link_url,'old_url.com','new_url.com');
    UPDATE wp_links SET link_image = REPLACE (link_image,'old_url.com','new_url.com');
  4. Update wp_comments table – This table will have all the data posted in the comments. It is highly possible that some of the users might have posted the links to your site pages. And author URLs and email might be pointing to the old site. 
     UPDATE wp_comments SET comment_author_url = REPLACE (comment_author_url,'old_url.com','new_url.com');
    UPDATE wp_comments SET comment_author_email = REPLACE (comment_author_email,'old_url.com','new_url.com');
    UPDATE wp_comments SET comment_content = REPLACE (comment_content,'old_url.com','new_url.com');
  5. And, finally last change in the htaccess file of the old site, so that all the requests made to old site gets redirected to the new one 
     RewriteRule ^(.?)$ http://new_url.com/$1 [R=301,L]

And that’s it.. you should be good to go after following above steps. And yeah, do not forget to replace new_url.com and old_url.com to your respective site addresses.

I hope these tips help you..

Read More