Graphic Design

All about graphic design, color choosing, photoshop development, techniques, tutorials…

iPhone web development [Part 2]

May 21st

Posted by alex in CSS

In part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags... ) we will now move on to the really clever bit: Orientation detection.

For many sites, we may just have the same thing both on portrait and landscape. But sometimes we will want to use that extra space to display our content differently, and here is how.

Orientation detection with CSS:

We can use some smart CSS3 selectors to ensure that some styles only apply to landscape, or to portrait modes:

/* Portrait */
@media screen and (max-width: 320px){
	h1{ font-size:20px; }
}
/* Landscape */
@media screen and (min-width: 321px){
	h1{ font-size:24px; }
}

Remember that for this to work we must use the viewport meta tag I showed you in my previous tutorial
This media query works (According to Apple's documentation) since iPhone OS 1.0, so there shouldn't be any problem with it, Firefox mobile should also support this, so by using max-device-width and min-width we should be able to develop specific CSS for every device without the need of PHP to include only certain style sheets

Orientation detection with JavaScript:

We can easily detect the device orientation by checking the innerWidth. This method will also work for other PDAs and SmartPhones:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
 
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

This code will add a new attribute (orient) to the body element, which will be either portrait or landscape. All we have to do now is use CSS to filter out whatever orientation we need:
There is another method, which will work only on the iPhone though:

body[orient="landscape"]{
// CSS code here...
}
// ... or ...
body[orient="portrait"]{
// CSS code here...
}

That JavaScript also hides the toolbar by using the scrollTo() function when the orientation changes,

Next release:

On my next release in this series of iPhone web development tutorials, I will get into the really advanced JavaScript API we have for the iPhone (touch detection, gestures... etc) so stay tuned!

Hope you found this useful,
Alex

css, design, detection, iPhone, javascript, landscape, orientation, portrait, web development

iPhone web development [Part 1]

May 5th

Posted by alex in CSS

No comments

Even if websites look great when seen on iPhones, having an iPhone-specific website improves a lot your site's usability, and in spite of what you may think, it doesn't take that long to develop it, here I will show all the necessary steps to develop a great site for iPhones, and making it look as if it were just another iPhone App.

How to differentiate both versions:

There are several ways of setting up the iPhone version, the most common one is by using a subdomain like m.urbanoalvarez.es, iphone.urbanoalvarez.es... etc

You could also use a subdirectory like urbanoalvarez.es/iphone/ or simply do nothing, and just change the display. This last option is no recommended because it won't allow your users to easily switch between iPhone version and full version when on their phones.

For this example I will go with a subdomain, of the sort iphone.urbanoalvarez.es. The next thing we need is to send iPhone users directly there, here is the PHP code for that:

if(ereg('iPhone',$_SERVER['HTTP_USER_AGENT']) || ereg('iPod',$_SERVER['HTTP_USER_AGENT'])) {
     header('Location: iphone.urbanoalvarez.es');
}

Basically we are searching for iPhone or iPod in the user agent which for the iPhone is "Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3" and if we find that one, or the iPod one, we send them over to the mobile version.

The basic HTML:

iPhone screenshot

For an iPhone version of a website, I think the best idea is to make it look as if our website is just a regular App. So we won't allow Zoom, or horizontal scroll. This part is very easy, as Apple has enabled a meta tag that does just that:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

I don't think there is much need to explain each variable as their names are pretty self-explanatory. This was the only real "iPhone-specific code" we will be using, except for a few CSS tricks I'll show you below.

Now that we have that set up, let's go with the body content, as you may have noticed in iPhone Apps, there is a header bar, with the Website name and/or logo, and usually a "back" navigation button. Then in the center we find a background and the content displayed in nice white boxes with rounded corners. And at the bottom of the screen we see a secondary bar with navigation items, usually the main categories. This is nice, but when using Mobile Safari, that would create a duplicated bar, since Safari has it's one one at the bottom.

So I suggest we keep the top bar for the website name and/or logo, and we put the navigation right below it. With a bit of clever JavaScript we will be able to keep that nav bar always at the top of the screen solving the problem of navigation.

This is a little preview of the HTML structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>iPhone version</title>
</head>
 
<body>
<h1 id="header">My Website</h1>
<div id="wrap">
<h2>About this website:</h2>
<div class="box">
<div class="text">Some text in a nice rounded box</div>
</div>
<h2>Some links:</h2>
<div class="box">
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
<li><a href="#">Element 5</a></li>
</ul></div>
<p align="center">&copy; UrbanoAlvarez.es
</div>
 
</body>
</html>

Here you can see a very simple HTML markup, with all the content inside a wrap, and then inside boxes. To create the effects such as rounded corners, shadows... etc we can make use of Webkit's advanced CSS3 features, which all work on the iPhone luckily!

So let's start styling all of that!

The CSS:

If we want to stay with an iPhone-like design, we will have a top bar with the logo, and maybe a search button, and below that with a light background our content. Each "box" of content will be of white background and with nice rounded corners. This will make our website resemble a lot the look of a real iPhone.

 
<style type="text/css">
<!--
body{
	background:#D5DCE1 url(images/pinstripes-classic.gif);
	margin:0;
	padding:0;
	font: 13px Helvetica;
	-webkit-text-size-adjust: none;
}
h1{
	display:block;
	background:#000000;
	color:#FFFFFF;
	padding:10px;
	margin:0;
}
h2{
	color:#333333;
	text-shadow:#FFFFFF 0 1px;
	padding:0;
	margin:10px 0 10px 0;
}
#wrap{
	margin:10px;	
}
.box{
	margin:10px 0 10px 0;
	display:block;
	-webkit-border-radius: 10px;
	background:#FFFFFF;
	padding:1px;
}
.box .text{
	padding:10px;
}
.box ul{
	padding:0;
	margin:0;
	list-style:none;
}
.box ul li{
	margin:0;
	padding:10px 3px 10px 3px;
	background:url(images/arrow.png) right 50% no-repeat;
	display:block;
}
.box ul li a{
	display:block;
	text-decoration:none;
	color:#333333;
}
.box ul li:first-child{
	margin-top:10px;
}
.box ul li:last-child{
	margin-bottom:10px;
}
.box ul li:nth-child(odd){
	background:#F9F9F9 url(images/arrow.png) right 50% no-repeat;
}
-->
</style>

As you can see this CSS code uses a lot of CSS3 selectors and properties, since they are fully supported on the iPhone. This makes our live a lot easier, specially when dealing with rounded corners, shadows, alternating row colors... etc

I have just designed a very simple site to show you how this can be achieved.
The background image and the arrows are from the great WP Touch plugin.

Next release:

This was Part 1 of my Full guide to web development on the iPhone, and it was the basics. In my next part we will add some JavaScript functionality to ensure a smooth user interaction with the site, different CSS rules for landscape and portrait mode, and some other advanced things we can do to make our site stand out from the crowd,

Take care!
Alex

apple, compatible, design, development, iPhone, ipod, mobile, smartphone, web

Fast and dirty CSS trick for IE

Mar 11th

Posted by alex in CSS

No comments

I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn't have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn't exist... But well, there are some times when we need something to work, we need it fast, and we just don't have time to care for the standards at that moment. For those times, we can use a simple trick like this:

Underscore to comment out lines

This is probably the simplest tip, you can use underscores preceding style definitions to set them as comments... for all good browsers out there, except of course IE. This way you can easily define specific IE rules by putting an underscore before the style.

#underscore{
	width:300px;
	_width:320px; /* This rule is only for IE */
}

This way we can easily add a different width, padding, or anything to an element in order to "get it right"

The clean way:

Now we are not going to do that with every single rule we need fixed! When we are going to fix more things, it's much better to put the fixes in a different stylesheet, and link it using a conditional statement. Basically, we want only IE6 for example to use those fixes, how is that done?

<!--[if lte IE 6]> <link media="screen" rel="stylesheet" href="something.css" /> <![endif]-->

But this doesn't validate! We need to find a solution then, and it is not as hard as one could think

We are going to include that, inside another conditional comment, but this time inside one that is valid! So we would write it as follows:

<!--[if IE]><![if lte IE 6]><![endif]-->
<link media="screen" rel="stylesheet" href="something.css" />
<!--[if IE]><![endif]><![endif]-->

Now it validates! We have achieved using valid conditional comments to do this! I will now explain a bit more about these and how they work:

Conditional comments at a glance

You're smart (I hope) So let's race through this, conditional comments allow you to tell the browser to use some parts of your html only if a specific version is running (Or not) Let me show you the options we have: (Please note that this is the html valid version for each of them)

<!--[if IE]> To select Internet Explorer
<!--[if IE]><![if !IE]> Only if the browser is not Internet Explorer
<!--[if IE 5.0]> Only if it is Internet Explorer 5.01 (There are other options as well)
<!--[if !IE 5.0]> To select for IE 5.5 or 6 or 7.0

We also have some keywords that will allow for more control:

gt = Selects greater than
lt = Selects less than
gte = Selects greater than or equal to
lte = Selects less than or equal to
! = Selects all but what the expression says (i.e. It negates the expression)

For more information on conditional comments check out this guide by Manfred Staudinger

css, easy, fast, fix, ie, trick

Our of the oven Flash Templates:

Nov 3rd

Posted by alex in Graphic Design

No comments

I was building a site for a relative new company a couple weeks ago, and they wanted "A professional looking, brilliant display" for their products, I know Flash, and can do decent stuff with it, but seriously, how long does it take to do something really cool?

So I headed to the only place where I know this can be found for sure, Flash Mint, it was right then when I realized how much I had grown accustomed to it, the ease of use and friendliness of the design, and always full of new stuff!

You can even customize the products, get full website designs, and many flash templates for almost anything (Along with HTML, CSS, WordPress themes... etc) the list looks almost endless haha

Not so long ago I even bought a WordPress theme for a client I didn't have enough time to spend on. He was looking for something like that and I told him I could offer him a better price if he bought a pre-made template, so I showed him the ones that best fit his description and he ended up getting the "Personal Blog Theme", which looked really nice and fitted my client perfectly,

So if you are in a rush, or simply need a professional-looking Flash Movie, Template, or anything of the sort, this is a great alternative!

javascript, jquery, rotate, tabs, ui

Perfect jQuery UI rotating tabs

Oct 20th

Posted by alex in CSS

1 comment

Tabs are nice. They create a very elegant interface, and jQuery UI does this marvelously, here we have a little preview of this:

jQuery UI Tabs

How to do that?

Include the files

With jQuery and jQuery UI it is dead simple. First, load the JS libraries, I recommend using the hosted files at Google for jQuery:

 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="path/to/jquery UI" type="text/javascript"></script>

Remember to include also the CSS files for the UI Theme! Otherwise the tabs won't seem to work!

The HTML for the tabs:

We need a little HTML for our tabs to work:
A wrapper, a few divs with the content, and an unordered list with the tabs:

 
<div id="tabs-rotate">
<ul>
<li><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab 2</span></a></li>
<li><a href="#tab3"><span>Tab 3</span></a></li>
</ul>
<div id="tab1">Tab 1 content</div>
<div id="tab2">Tab 2 content</div>
<div id="tab3">Tab 3 content</div>
</div>

The JavaScript:

Now comes the cool part, basically we want to have tabs. But although tabs are nice, people may not realize there is more content, or they might be just too lazy to browse through it, so, why not rotate through the tabs?
jQuery UI does that by itself with a very simple commant, but it is not perfect! So we need to program our tabs to rotate, unless the mouse is over them. This way when a user is looking for a link, the tab will wait!

So here is how this is achieved:

 
$(document).ready(function(){
	$("#tabs-rotate").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
	$('#tabs-rotate').hover(function(){
			$(this).tabs('rotate', 0, false);
		},function(){
			$(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
		}
	);
});

First we instruct jQuery UI to set up tabs in that div, and to rotate them. Then we use a hover event to control the rotation. On hover no rotation, and on out resume rotation.

See it in action

You can see it working on the DJs Music homepage

As with the best stuff, it's terribly simple

Hope you enjoy,
Alex

javascript, jquery, rotate, tabs, ui

Graphic Design

iPhone web development [Part 2]

Orientation detection with CSS:

Orientation detection with JavaScript:

Next release:

iPhone web development [Part 1]

How to differentiate both versions:

The basic HTML:

The CSS:

Next release:

Fast and dirty CSS trick for IE

Underscore to comment out lines

The clean way:

Conditional comments at a glance

Our of the oven Flash Templates:

Perfect jQuery UI rotating tabs

How to do that?

Include the files

The HTML for the tabs:

The JavaScript:

See it in action

Looking for something?

Receive notifications!

About me