Forums

attilahajzer

How do i design for mobile? i seems like every time I look at my website on my ipod, and go through the pages, the width changes. and its really weird!

http://attilahajzer.host-ed.net/

id love a screen cast about MOBILE designing.

chrisburton

media queries.

Also, you should get rid of the horizontal overflow, the scrollbar is hideous.

attilahajzer

what page? i dont see it.

Adman

Check out this website, this will help give you a better understanding.

Responsive Web Design

chrisburton

http://i52.tinypic.com/2rw6iph.png

attilahajzer

Got it. i didn't notice it because ive been so used to it. haha. ill change it now. thanks.

Done. if you go back to the site, you can refresh the page :)

chrisburton

Great. I would also put the ad under your social icons.

attilahajzer

theres also a problem now. ive put the ad on the right, under social icons, but now theres a white space GAP under my footer and can't get rid of it.

attilahajzer

i just removed the HEIGHT for my footer, but now its black and a huge hap. of black with nothing there. i can't fix it and remove that gap.

chrisburton

Seems all out of whack. Your grid system doesn't look right. Nothing aligns left evenly, nothing aligns right evenly. The spaces between the images on your portfolio page don't match or maybe there's too much space.

Just looking at your page tells me you can use 2 page wraps. One for the header and main, the other for the footer.

attilahajzer

im not using a gridsystem. i dont know how to use a gridsystem. ive tried learning it. but it just doesn't make sense.

chrisburton

I'm not referring to 960.gs or anything. Anyway, in your header, the arrow thing should align to the line under it, not stick outside. That tells me something isn't right.

The menu in your footer also displays outside the wrap.

attilahajzer

i figured the header one was because of the :after element. but i dont know. The footer one isn't out of the grid because its lining up with the Content. which is Padded as well as the nav. the footer.inside has padding.. okay maybe not (just double checked) but it doesn't seem to exceed the line. maybe there is something seriously wrong. i do hope i can fix it.

couldn't i just position relative :left a little more and it'll fix it? or is there more to that then just Position:relative left:more;

chrisburton

Tell you what, if you throw your whole site on jsfiddle, I'll make it look better.

wolfcry911

he has a live page - why in the world put it on jsfiddle?

The arrow navigation can be aligned with the line below it simply by adding a right margin of 25px to #navigation, the footer nav can align with the body content with a 12px left margin (and lose the width), the ad can lose the relative positioning, change width to 234 and apply a top margin of -80px. Done.

Mottie

You could try this site for a quick and dirty look of what your site looks like at different browser sizes. Then adjust your media queries as ChristopherBurton suggested.

For fun, check out "http://css-tricks.com" to see how media queries can adjust the sizes of the content.

chrisburton

I had reasons other than to align the site.

attilahajzer

http://jsfiddle.net/attilahajzer/FqsUT/1/

it looks realllly messed up lol but im sure you can fix that. its cause php is injected.

chrisburton

Haha, all you had to do was view source, copy and paste. I'll take a look at this tomorrow.

attilahajzer

oh yeah ahahahaha. my bad man thank you. Id appreciate comments in it aswell please? because im not sure how to set up grid sys. (i know not 960, but just saying in General) have a good night.

ketu

Hi,

Create your HTML site with 100% and use below 2 meta's in your page head tag, so width will be adjusted with your device(iPhone, android, black berry or iPad).


<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

Let it try :)

attilahajzer

@ChristopherBurton hows the fixing going?

chrisburton

I apologize, I simply forgot. I would implement what wolfcry has suggested. I'm not sure it would be beneficial to you if I made design changes with my own style. There's nothing you would learn from that.

attilahajzer

WOW! @wolfcry911 really worked. i never knew the relative position would be the thing that messed it up. thank you. i guess i have some reading to do. Thank you very much.

attilahajzer

@ketu and so what your saying is html{width:100%} and then

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

will do it?

chrisburton

change

<meta charset=uft-8>

to

<meta charset="utf-8">

attilahajzer

didnt work.

check it out: http://attilahajzer.host-ed.net/

and when im looking at my website in my iPod Touch for some reason my letters are doubling. and its only my H1.

chrisburton

What does your php in your header look like?

attilahajzer

INDEX

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset=uft-8>
	<!--[if IE]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script&gt;
    <![endif]-->
<link rel="stylesheet" href="global.css" media="screen"/>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

<link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'> <!-- Header Font -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400italic' rel='stylesheet' type='text/css'> <!-- Header Sub header -->
<?php include ("title.php"); ?>
</head>

<body>

<?php
include ("header.php");

	if(isset($_GET["page"]) && $_GET["page"] != "home"){
		if(file_exists($_GET["page"].".html")){
			include($_GET["page"].".html");
		}else{
			include("PageNotFound.html");
			 }
	}else{
		include("home.html");
		}
    
include ("footer.php");
?>

</body>
</html>

HEADER

<div id="wrapper">

<header>
	<a href="/" id="header"><h1>Attila Hajzer</h1><span>Web Design Portfolio</span></a>
<nav id="navigation">
	<ul>
	<?
	$nav_array = array("/", "about", "services", "portfolio", "resume");
	
	foreach($nav_array as $nav_array_list)
    {
    $nav_title=$nav_array_list;
    $nav_title= str_replace('-', ' ', $nav_title);
    $nav_title= str_replace('/', 'home', $nav_title);
    $nav_array_list != "/" ? $nav_link='index.php?page='.$nav_array_list : $nav_link=str_replace('index.php','', $_SERVER['PHP_SELF']);

    if($pagelink==$nav_array_list)
        {
        echo '<li><a href="'.$nav_link.'" id="active">'.ucwords($nav_title).'</a>';

        echo '</li>'."\n";
        }
    else
        {
        echo '<li><a href="'.$nav_link.'">'.ucwords($nav_title).'</a>';

        echo '</li>'."\n";
        }
    $i++;
    }
    ?>
	</ul>
</nav>
</header>



<div id="main-content">

chrisburton

Yeah, so the meta charset is not effected by the php. Once you change it to what I specified, all should be good.

attilahajzer

i didn't even seee that! thanks!

and it didn't change anything chris.

still is massive on ipod. and.

chrisburton

Still wrong. It is not uft-8 it is utf-8.

It may not change anything at this point but it's correct and will also allow me to validate your code.

attilahajzer

ohhh okay im sorry. haha im just so used to saying it uft.lol ill change it now haha.

okay, so changed it to utf-8. and refreshed it a few times on ipod. design change didn't .. change. (i need to get better at wording my issues)
but one thing i noticed in the ipod version. because i removed the 960px width of the footer, the black coloring only goes until the end of the right edge in the browser before beginning the horizontal scroll

AND THEN! changes when turned onto its side thats pretty neat.

chrisburton

After following your progress from the beginning, you've come a long way.

Johnnyb

Hey Attila, have you tried checking your CSS to see why changing the html width to 100% isn't making a difference? Try looking at the width of the wrapper element and then maybe it'll make sense!

attilahajzer

worked for a bunch of elements. now im thinking, can't i just make a seperate stylesheet for mobile devices? and link that to ALL MOBILE DEVICES? or is that not posible?

chrisburton

Just use media queries. Soooooooo much easier and is one of the main reasons we don't have to use separate stylesheets.

attilahajzer

where do i start.

chrisburton

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website

http://www.alistapart.com/articles/responsive-web-design/

attilahajzer

its not working. im just getting frustrated.

chrisburton

...it's going to take more than 10 minutes to learn and implement.

attilahajzer

like theirs some things that will work. and some that wont.
such as if i make the header bottom-border:red. it will work. but for some reason i have removed the nav:before arrow. and removed the floating. but it still floats right and the arrow is STILL THERE

chrisburton

Try again so I can have a look.

attilahajzer

allll the styling is removed from the navigation and it is still showing up weird.

and refresh (ipod)

chrisburton

How exactly are you removing the styling?

attilahajzer

linking to a NEW stylesheet for the ipod, and THERE's no nav styling in it.

here's that entire code.


*{margin: 0; padding: 0;}

html>body{overflow: x-scroll;}
header, nav,footer,section,aside {display: block}

body{background:url('images/background.jpg') repeat ; #FFFFFF;}


h2{color: #333333; font-family: Georgia, serif;}
h3{color: #1B9BE0; font-family: Georgia, serif;}
h4{color: #333333; font-family: Georgia, serif;}

ul{padding-left: 0;}
li{list-style-type: none;}

a{color: #1B9BE0; text-decoration: none;}

p, h2{margin-bottom: 1em;}
p{line-height: 26px; font-size:1.08em}

img{ border:0; }

header{border-bottom: 1px solid #CCCCCC;}
header a#header{text-decoration: none;}
header a#header h1{font-family: 'Gentium Book Basic', serif; font-size: 50px; color: red;}
header a#header span{font-family: 'Crimson Text', serif; color: #06a8eb; font-size: 16px; text-align: center;}


#main-content{
	color: #000000;
	padding: 20px;
	font-family: Gill Sans / Gill Sans MT, sans-serif;
}

a.button{
	padding:5px 10px;
	background-color:#1B9BE0;
	border-radius:8px;
	color:#FFFFFF;
}

h3.button{color:#000000; text-align:center; margin-top:20px;}

it passes the nav. because i deleted that for the ipod.

and here's the index.php Link to that stylesheet.css

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="small-device.css" />

chrisburton

I'm not seeing your nav code in small-device.css

Also this is pointless

html>body{overflow: x-scroll;}

attilahajzer

okay. ill take that out. and thats what im saying.

i have removed it from the small-device.css.

but for some reason, its still shows on the ipod. it doesn't make sense.

Adman

@attilahajzer

Why not just use media queries and only pass the parts that you need to make the website work for the mobile device instead of using all the same code again? If you only want to call a mobile phone you could use..


	 @media screen and (max-device-width: 480px) {
            
	 }

attilahajzer

and it goes into global.css ?

chrisburton

yes

treehouse : what would you like to learn today?

Forums

Designing for mobile?