Google Plus Company Page Has Landed

Anthony Fabrizio — Mon, 07 Nov 2011 22:25:05 +0000

Google has finally unveiled brand pages for Google+, allowing businesses and brands to join Google’s social network. So why not create a company page for our self. Add us to your circle.

How To Build A Website For The IPhone

Anthony Fabrizio — Mon, 31 Oct 2011 20:38:07 +0000

Everywhere you look you see people playing on their smart phones. Where it is checking their Facebook, writing their latest tweet, or even checking out near by restaurants. By creating a mobile website it makes it easier for viewers to view your website without all that annoying scrolling. You can get your message across with only one page.

As we promised we created this tutorial on how to create a mobile website from beginning to end. Using Photoshop to create our layout and bringing it into Dreamweaver to create the magic. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.

To make this easy, I have provided a mobile template for you to download, which means that all we will have to do is set up redirects for mobile browsers. You can customize the template landing page however you see fit – it’s just standard HTML/CSS. Or you can follow bellow to see how this is done.

Step 1: Getting Started

We’re first going to start off with creating the PSD file that fits the design for your site. The size we are using is 320 x 626px( standard iPhone size is 320 x 480px. Height can change to whatever size you want. Just keep in mind the higher the number the more scrolling is involved)

Now we create the look and feel of the site.You can create any look and feel you like. But for this tutorial we are using the contact page for our mobile website.

Now this is the last step in Photoshop. Slice or crop out all our main elements that we want to bring into Dreamweaver ( or any HTML editor you like). I prefer to crop my images so I have better control over what I want to save.

Step 2: The HTML

We will start working on the iPhone HTML page; the code below has some key differences from a regular XHTML transitional document.




Final Elements Studio

The code above explained line by line:

Line 1 – 7: This is standard HTML5 Transitional Doctype.

Line 8 -9 This line is the iphone specific. It sets initial values for the viewport in the device’s browser.

Width= states the width of the page to be the same width of the device
Initial = maximum scale set the starting point for the zoom of the page

Line 11 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. You do not need to add the shine or corners as the iPhone will do that for you.

Line 12: Standard CSS function

Step 3: Laying Out The Divs

We now continue with the rest of the html before we add any javascript functions. Code the site the same way you do with a website.

Final Elements Studio | Digital Creative Agency

Final Elements Studio

We are a digital creative agency located in Long Island, New York. We strive to find creative solutions for our clients while pushing the envelope on what technology can do. Our work includes website design, print design, logo development, and helping our clients market themselves online.

Step 3: Clickable Phone Number

First, most handheld devices include a phone, so let’s make our phone numbers clickable

On line 16

Call

Now mobile users can click this number to call it, however there are a few things to note. First, the number in the actual link starts with a 1 which is important since the web is international (1 is the US country code).

Second, this link is clickable whether or not the user has a mobile device. Since we’re not using the server-side method, our best option is to simply hide the fact that the number is clickable via CSS. So use the call class to disable the link styling in your screen stylesheet, and then include it again for mobile.

Step 4: The CSS

The CSS is very important in switching the content. Using classes and ID’s we can make sure that only the correct content is being displayed. First though, we need to set up the page so that none of the iPhone’s default styles will interfere.

/*-----------------------------
RESET STYLES
-----------------------------*/

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none; /* This stops the iPhone from automatically changing the size of the text when you flip the phone */
	background:#000 url(images/bg.png) repeat;
}
body{
	font-size: 10px;
}
body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}
ul, li, ol, dl, dd, dt{
	list-style:none;
	padding:0;
	margin:0;
	}
a{
	text-decoration:none;
	}

/*-----------------------------
	SITE SPECIFIC STYLES
-----------------------------*/

body{
	background:#000;
	font-family: Helvetica; /* Helvetica is on the iPhone already, so you may as well take advantage */
	color:#999;
	}
p{
	font-size:12px;
	padding-bottom:8px;
	}
a{
	color:#E30000;
	text-decoration:none;
	}

/*-----------------------------
	HEADINGS
-----------------------------*/

h1{
	display:block;
	width:112px;
	height:41px;
	background-image:url(images/logo.gif);
	text-indent:-5000px;
	}

/*-----------------------------
	BASIC LAYOUT
-----------------------------*/

#page_wrapper{
	padding-top:0px;
	overflow:auto;
	width:320px;
	}
header{
	background:url(images/headerBg.png) repeat-x;
	height:74px;

}
header h1{
	display:block;
	width:181px;
	height:54px;
	background:url(images/finalElements.png) no-repeat;
	text-indent:-5000px;
	float:right;
	margin-top:10px;
	margin-right:20px;
}
#logo{
	background:#E30000;
	width:98px;
	height:89px;
	position:absolute;
	z-index:4px;
}
#logo h2 a{
	display:block;
	width:98px;
	height:89px;
	background:url(images/logo.png) #E30000 no-repeat;
	text-indent:-5000px;
}
#banner{
	background:url(images/banner.png) no-repeat;
	width:320px;
	height:154px;
	border-bottom:3px solid #E30000;
}
nav#mainNav{
	background:url(images/navBg.png) no-repeat;
	width:320px;
	height:49px;
}
nav#mainNav li{
	float:left;
	padding-top:10px;
}

.home a{
	background:url(images/home.png) no-repeat;
	width:79px;
	height:27px;
	display:block;
	text-indent:-5000px;
	padding-left:20px;
}
.about a{
	background:url(images/about.png) no-repeat;
	width:104px;
	height:27px;
	display:block;
	text-indent:-5000px;
	padding-left:20px;
}
.contact a{
	background:url(images/contact.png) no-repeat;
	width:94px;
	height:27px;
	display:block;
	text-indent:-5000px;
}
#bodyWrapper{
	padding:5px;
}
article{
	padding:10px 10px 0px 10px;
}
article h2{
	background:url(images/services.png) no-repeat;
	width:294px;
	height:37px;
	display:block;
	text-indent:-5000px;
	margin-top:10px;
}
article h3{
	background:url(images/social.png) no-repeat;
	width:294px;
	height:37px;
	display:block;
	text-indent:-5000px;
	margin-top:10px;
}
article li{
	padding:10px;
	border-bottom:1px solid #FFF;
	font-size:14px;

}
nav.contactPanel{
	padding:10px 10px 0px 10px;
}
nav.contactPanel li{
	float:left;
	padding-top:5px;
}
.call a{
	background:url(images/callus.png) no-repeat;
	width:134px;
	height:39px;
	text-indent:-5000px;
	display:block;
	padding-left:10px;

}
.email a{
	background:url(images/email.png) no-repeat;
	width:134px;
	height:39px;
	text-indent:-5000px;
	display:block;

}
footer{
	padding:10px 0px 0px 0px;
}
footer img{
	padding-top:20px;
	padding-left:10px;
}
#copyright{
	text-align:center;
	padding-bottom:10px;
}
nav#footerNav {
	background:url(images/footerbg.png) no-repeat;
	height:33px;
}
nav#footerNav li{
	float:left;
	display:block;
	padding-left:20px;
	padding-top:10px;
	text-align:center;
}
#social {
	margin-bottom:20px;
}
#social ul{
	display:block;
}
#social li a{
	float:left;
	display:block;
	margin-bottom:20px;
}
.facebook a{
	background:url(images/facebook.png) no-repeat;
	width:74px;
	height:55px;
	text-indent:-5000px;
}
.twitter a{
	background:url(images/twitter.png) no-repeat;
	width:77px;
	height:55px;
	text-indent:-5000px;
}
.flickr a{
	background:url(images/flickr.png) no-repeat;
	width:88px;
	height:55px;
	text-indent:-5000px;
}
.digg a{
	background:url(images/digg.png) no-repeat;
	width:70px;
	height:55px;
	text-indent:-5000px;
}

Step 4: The Javascript

The following javascript detects and sets the iPhone’s viewport orientation by evaluating the innerWidth property of the window object and setting the orient attribute of the body element at regular intervals:

Currentwidth ==320 sets the size of the website allowing Safari to stretch the site if it is displayed in portrait or landscape.

Step 6: The Removing the toolbar in Safari

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

Now to make this work we need to add a function into the tag.

Step 7: Setting it all up

Now the last part which has two steps. Creating the sub folder and redirecting the main site to the mobile site. First create the sub folder and name it m (stand for mobile, a lot of company use this folder name for redirecting). From here we place all our files that we created for the iphone website (images, js, and html).

Now to make the mobile website work we have to tell our website to redirect. By doing so we will need to add a JavaScript code to the index of your original site. JavaScript file can be downloaded here.

Line 3 redirects the site to the mobile sub folder, here we called our folder “m”. This means when the iPhone loads up your website it automatically redirects it to m.domainname.com ( for us m.finalelements.com).

Step 8: Conclusion

As the worldwide shift to mobile continues, handheld device support will become increasingly important. Hopefully this article has left you with both the desire and toolset necessary to make mobile support a reality in your websites.

Although mobile occupies a significant chunk of global web browsing, the technology is still very much in its infancy. Just as standards emerged for desktop browsing, new standards are emerging to unify mobile browsers. This means that the techniques described in this article are only temporary, and it is your responsibility to stay on top of this ever-changing technology.

CSS Downunder Monthly Winner

Anthony Fabrizio — Mon, 17 Oct 2011 23:15:18 +0000

CSS Downunder is a website design gallery for web designers in Australia and around the globe to showcase their best work. It is also a place to come for inspiration for both experienced designers and newbies that are looking to see what web design trends are doing in Australia. The CSS Downunder gallery showcases only the best CSS based websites plus outstanding Flash based sites that are worthy of a mention.

Thank you for picking us to be best of the month..

Thank You Steve

Anthony Fabrizio — Wed, 05 Oct 2011 23:30:38 +0000

The one thing to say about Steve – Like him or not – He was a visionary, a perfectionist but most importantly – BOLD. He was bold enough to make tough decisions, to make game changing ideas come to life, take business chances on new technologies like NeXT and Pixar and inspire.

Today is a sad day not only for the technology world but also for the world at large.

Launched Our New Mobile Website

Anthony Fabrizio — Mon, 26 Sep 2011 15:18:31 +0000

Today is the day we finally launched our mobile website. After many hours of creating our new site, it was time for the mobile one. So grab your iPhone and check it out!

We will be posting our first tutorial on how to create a mobile website from start to finish. Keep an eye out on your Twitter or Facebook pages for the release.

Final Elements Studio LLC | Digital Creative Agency