EverWeb Widgets HTML5

One Site Or Two?

Although EverWeb allows the mobile site to be built using the same project file as the conventional one, sometimes this may not be the best way.
The decision to create two project files will be decided by how and where the website is published.
Mobile websites are normally published to a sub domain with a prefix such as mobile, mobi or simply m like so…
http://mobi.website.com/index.html
This sub domain is created on the server so those publishing to the EverWeb one will have to publish the smart phone version as a sub site where the URL will be like this…
http://website.com/mobile/index.html
If the HTML5 building block widgets are used to create the content, it's simply a matter of creating the tablet/PC version first and then copying over the content to the smart phone version.
This goes a lot easier and quicker if the sites are built on separate project files…

Open the tablet/PC version in EverWeb.
Open the Projects Window from the File menu.
Now open the mobile site in another window.
Open each page in turn in both versions and copy over the building blocks - one by one.
As the blocks are copied over, take the oportunity to increase the font size slightly, remove any styles that are not required and omit any blocks of info that are not absolutely necessary.

Redirect Code

If publishing to the EverWeb server, the redirect code is automatically added when the page is selected as a mobile one.
If publishing to another server so that a proper sub domain can be set up for the smart phone site, this code - suitably edited - should be added to the Head Code box in the Page inspector of every page of the PC/tablet version of the site…

<script type="text/javascript">
!-- if (screen.width
= 600) { window.location = "http://mobile.domain-name.com"; } //-->
</script>

Substitute the URL to your own mobile website - marked in red.
In this case, if the device screen width is equal to or less than 600 px, the narrower mobile version of the site will load instead of the wider one.
This value is chosen so that tablet & PC users will see the wider site but those using a smart phone will get the narrow version. This value can be changed if required.
The URL in the code above redirects to Home page. Change it suit the other pages by adding the page-name.html or, if the page is in a directory, use this…
http://mobi.websiite.com/directory-name/page-name.html
Obviously it is more efficient to use relative file paths and instructions can be found by clicking the link.

Content

Create a master or template page with the header, h1 heading, the navigation and footer. Plan the layout of each page before adding the content.
The first item to be added should be the h2 heading with the page name. Use the HTML heading widget for this.
Add the content blocks in the order that they are required to load in the published page.
No matter where the website is being published - or what method is used to upload the files - it is essential to first publish to a local folder so that the pages can opened in the iOS Simulator to test it in both the iPad and iPhone device types.
See the next column for how to download, install and use the free iOS Simulator app for testing websites in three different versions of both iPad and iPhone.

Mobile Website Testing

Download Xcode from the Apple Developer website.
Once installed, you should see it in the Applications folder.
Control (right) click it and select to show the package contents.
Drill down through the folders…

Contents/Developer/Applications.

Select iOS Simulator.app and do a Command L to create an alias. Drag this alias onto the desktop or put it somewhere convenient like in the Applications folder.
Open the Simulator and select the device type from the Hardware drop downmenu.
Use the Command key in conjunction with the arrow keys to change the orientation.

Click the arrow to view a screenshot of the iPad simulator

Click the arrow to view a screenshot of the iPhone simulator