Tag Archives: CSS

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

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

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile

SharePoint 2010 Centered MasterPages

I spent a lot of time creating centered MasterPages for SharePoint 2010 using Adventure Works and Minimal MasterPages as starting point.

There was a number of issues when using these pages (as starting points). I struggled to get the QuickLaunch to appear on the adventure works MasterPage without distorting the content and also struggled with compatibility with IE7 and other random combinations of browsers. Starting from scratch with the minimal MasterPages creates a huge amount of work rewriting all of the CSS (although this would be the preferred method if I had time!)

In the end I went back and started to make my MasterPage based on the V4 master. Here is how I managed to get it to work by using CSS and very minor changes to the MasterPage itself. I based it around blogs I had read by Randy Drisgill and a few of my own trial and error experiences http://blog.drisgill.com/2010/12/my-real-world-branding-with-sharepoint.html.

I set the class s4-nosetwidth to the workspace div (this stops SharePoint setting the width automatically). We can then wrap our content in a table (single cell) or a div. This will be the container for the page. The reason we dont set a width to the workspace is because this would put the scroll bar in the center of the page.

<div id=”s4-workspace” class=”s4-nosetwidth”>
<table class=”s4-workspace-maintable”>
<tr><td>
<div id=”s4-bodyContainer”>

In the CSS file, you just need to set the width and centering of this table….simple! I have also included a fix for IE7 which crops content. This is a bug found in the standard V4 master. You may still find some issues using IE7 with this MasterPage but much less than using the Adventure works master or using the V4 master with the alternative method of centering.

CSS

/*——————-Browser Fixes ———————*/
/* fixes IE7 cropping*/
.ms-rte-layoutszone-outer
{
float:none!important;
}
/*—————End of Browser Fixes ——————*/

/* —————width and centering——————-*/
.s4-workspace-maintable{
background:white!important;
/*Fixed width*/
width:95%!important;
/* Center the page */
margin: 0 auto!important;
}
/* ———end of width and centering——————*/