Posts tagged design

iPhone orientation change

iPhone web development [Part 2]

0
624 days
by in CSS, Javascript, iPhone

iPhone orientation changeIn 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

iPhone web development [Part 1]

0
640 days
by in CSS, iPhone

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

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

Keeping up with my redesign

2
1384 days
by in Branding, CSS, Graphic Design, Layout/Styling, Photoshop, Web-related, Weird stuff

As I posted in my previous post I'm redesigning my blog, so I have finally finished my PhotoShop draft and started coding it.
The HTML is pretty straight forward, a few layers, floated divs and intelligent use of margins and paddings... if it can deserve the use of intelligent.

Here you can see the development page:
http://urbanoalvarez.es/test/

I'm still having some problems with the center divs, those floated things never get to behave the way they are supposed to... It's one of those kitches that makes Web Designing (Not developing) interesting, yet exasperating, and somehow addicting ;)

So well, I'll keep on working as hard as possible to deliver you my dearest reader the best design... (Ok let's be serious, I'll work about half an hour a day, until a CSS error appears in IE, just the moment in which I desperately scream, take a coffee and run out for a walk... But well, it's nice to imagine the other way sometimes)
I'm done complaining and pretending I'm a great web designer that has no problems at all with IE, but well, I'm a web ... whatever word ... talking to another web ... whatever you like to call yourself... right?

Have fun and enjoy design, css, html and all this we've grown to love

Web Design DIY

0
1394 days
by in Branding, CSS, General talk, Graphic Design, Layout/Styling, Web-related

WebDesign DIY

I've recently found out that I've committed the design error I hate the most in the world. I've thought as I was doing my first design in paper "I'll put ... right here, as it is now done". And I must say, this is the greatest brick wall for a designer, where many get stuck among the others, that humongous group formed by all the mediocre designers out there that do stuff the way it is supposed to do, the group of web designers who think that being original is "putting that cool badge in the header" or adding an "accordion menu" in their sites...

And of course I'm not saying that an accordion menu is not a good navigation element, which could be perfectly discussed it that were the current topic, or that having the Web 2.0 badge is not appropriate, and I'm sure that if you as a reader are not understanding it is probably because you have fallen for this common errors.

The solution: The simplest thing possibly, let your inner designer go, free yourself from conventional constraints that diminish your ability to create great sites, original layouts, CSS innovative techniques... After all, you don't need to be a Guru to create high quality things, you only need to use your unique understanding of the world, of the design fashion, and the site's personality to develop the final design.

Following this philosophy I've been experimenting with this blog's design, and my main website's design, without arriving at a result I actually enjoy. Many ideas are running around my mind without taking a concrete form yet. I am willing to produce all the graphics myself, with bright colors and a high contrast relation between background/foreground, without any intermediary elements, a design that will make both the logo and design pop out, without over-filling the background with distractive images, but still have it be astounding.

I wonder if you've ever heard of M.C.Escher, for me one of the greatest artists of all times, an artist who new how to blend the illusion with the art, creating a deeply emotional kind of art that seemed almost magical. I wish to produce a design for both my website and blog that will share that ability, and create in the reader the illusion/delusion of art.

Hopefully you'll soon be able to see here in this blog that idea coming to a concrete shape, and materializing into my definite public appearance.
For the moment you'll have to cope with this ;)

Thanks to all of you readers,
Alex

Easiest rounded corners ever

3
1419 days
by in Javascript, Programming, Web-related

After an incredible amount of time spent looking for a way of easily rounding my corners, I've come across the one I find the easiest possible:

jquery + rounded corners plug-in

So now I'll explain how to install, use, improve...

Installation:

First of all, download and place the needed files:

Now place them in your desired folder, for this tutorial I'll be using "js/"

Usage:

In a html document, you would paste the following code in the head:

 
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script src="js/rounded.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
        $(document).ready(function() {
                $(\\'div.round\\').corner(); 
                // Note: Due to wordpress formatting a backslash \ is introduced here.
                //      You must delete it for the script to work
        });
-->
</script>

And anywhere in your website's body, whenever you place a div with a class="round", its corners will be rounded.

To create special corners, or achieve special effects, visit my demo page, full of special tricks.

Special cases:

The round command fills the "rounded" area with the body background color, so if you place this inside somewhere with a different background-color you must specify what color you want the corner to have.
Here you have an example:

 
        $('div.round').corner("cc:#F1F1F1");

If you want a bigger radius for your corners, just write the pixel radius in the parameters of corner():

 
       $('div.round').corner("10px");

Example and demo page:

I've set up an example and demo page, with all possible ways to do this, just go and see.

If you find any problems or suggestions feel free to comment!

Go to Top