New Screencast: Basics & Tips on Designing for the iPhone
* October 2nd, 2008 *
Designing a web page that is optimized for the iPhone isn’t rocket science. It’s the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, how to create a “Back to Top” button, and then show some iPhone pages I’ve made.
Code Snippets from the Video and Download
<script type="application/x-javascript">
addEventListener('load', function() {
setTimeout(hideAddressBar, 0);
}, false);
function hideAddressBar() {
window.scrollTo(0, 1);
}
</script>
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "stylesheets/iphone_portrait.css";
break;
case -90: document.getElementById("orient_css").href = "stylesheets/iphone_landscape.css";
break;
case 90: document.getElementById("orient_css").href = "stylesheets/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>The above requires and ID attribute of “orient_css” on the link to the stylesheet.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('.backtotop').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
Loading ...
Thanks for the info Chris!
Just wondering why you didn’t add “180″ (when the phone is turned upside down) to the orientation?