Getting started with creating Mobile App like websites, quickly and Easily

So, I am assuming if you have come across this posting, you're looking to create a mobile friendly website of your current website or from scratch. Well, you've come to the right place. I am going to assume you have at least some familiarity with things like CSS, HTML, jQuery & Javascript, and we'll go from there.

So how do we begin? Step one. Have a design, well at-least in mind. To create something mobile friendly, your content is going to have to be presented in a mobile friendly fashion. In alot of cases, these changes can be made very easily and I'll outline a few examples. So without further ado, Lets start.

Step 1.

Start with the correct html structure and  doctype.

In this case, there are two doctypes you should look into using, the mobile doctype like so:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

or the standard HTML5 doctype like so:

<!DOCTYPE html>

Using one of theses doctypes will help your application render better in Mobile devices.

Step 2.

Add in the appropriate "meta tags"

<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="user-scalable=no" /> <meta name="viewport" content="width=480" /> 

The meta tags above are going to give you much better cross device look and consistency. As you can see, in my example, I am assuming the viewport should be 480px wide (I have found this yields nice results on most devices).

Add in the optional "Meta tags"

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
These are i-Device specific meta tags (see apple documenation

And lastly, add some polish (note file paths will be unique and you'll have to change).

<link rel="shortcut icon" href="/GetSiteFile/favicon.ico" />

These are all Apple specific items

<link rel="apple-touch-icon" href="/GetSiteFile/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/GetSiteFile/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/GetSiteFile/touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="/GetSiteFile/startup.png">
Step 3.

We have our doctype, we have our meta tags and other tid bits setup, now how about actually displaying content. This goes back to having a design in mind, and designing in mind for mobile.

Mobile Layouts have to be tuned to work with less real-estate, which means, cut the crap, and only show what is relevant. This can be a bit challenging when scaling from a Desktop website to a Mobile site, but its not impossible.

A typical Menu on a website may look something like this:

[Option 1][Option2][Option3][Option4][Option5]

but in a mobile site, that should be re-structured to something like this:

[Option 1]
[Option 2]
[Option 3]
[Option 4]
etc...

Step 4.

Consider implementing touch gestures (where applicable). Not everything, or everyone will require swipe gestures for items, but in some instances it makes sense to include it. To keep this posting short, I'll leave you with a nice little jQuery plugin which I have found most useful and easy to use.

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library



Step 5.

The rest is for you, this is very quick list of things to create a mobile website quickly.

Other things to investigate if you haven't
-Using a mobile framework like Sencha Touch
-Using a framework like Less.js to make styling changes easier

I will post more relevant items when I think of them.



View this: http://bren1818.blogspot.ca/2012/09/simple-web-app-for-android-and-ios.html (A newer post)

Magento

If any of you work on E-stores, you probably have come across, or developed a store using Magento. Magento is a powerful php e-store, which is flexible, configurable, fairly easy to style and nice to work with. The other thing I really like about Magento is the community. It is rare that you run into an issue in Magento which you can't fix with a quick Google. There are plenty of forums and websites devoted to Magento help. Seeing as how I have now developed a few Magento sites, this time around  decided to document the problems one will typically run into. I have layed some of this out, and with luck, it will help someone out.

Remove Components (hide em)
System > Cofiguration > Advanced and disable ex:  Mage_Newsletter


Change Layout
Open the \app\design\frontend\nameofProj\default\layout\catalog.xml
find:

<block type="page/html" name="root" output="toHtml" template="current Template">

to

<block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml">

eg: one-column.phtml


File Locations



Product View Template
\app\design\frontend\YourPath\default\template\catalog\product\view.phtml


Image Maginifcation for product
\app\design\frontend\YourPath\default\template\catalog\product\view\media.phtml



Varients Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\wrapper.phtml


Bottom of product Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\bottom.phtml 



Menu for Categories
\app\design\frontend\YourPath\default\template\catalog\navigation\top.phtml


-simply add list items here with custom links which may not be in the categories by default
<?php echo $_menu ?>
<li id="storeHome" class="level0 nave-1 level-top first parent">
        <a class="level-top" href="/index.php">
                <span>HOME</span>
        </a>
</li>


Header of Site
\app\design\frontend\YourPath\default\template\page\html\header.phtml
/*This is where you can change the logo, modify the top links etc*/


Footer of Site
\app\design\frontend\YourPath\default\template\page\html\footer.phtml
-comment out <?php echo $this->getCopyright() ?> replace with your own code etc


Grid/List view Code
\app\design\frontend\YourPath\default\template\catalog\product\list.phtml
-This is where you can chane image sizes and which details are shown on the home page




toolbar for pages
\app\design\frontend\YourPath\default\template\catalog\product\list\toolbar.phtml


page numbers in pagination  - you can change your divider ~line 94
\app\design\frontend\YourPath\default\template\page\html\pager.phtml


breadcrumbs 
\app\design\frontend\YourPath\default\template\page\html\breadcrumbs.phtml
/*change formatting of breadcrumbs*/


Login Page

\app\design\frontend\YourPath\default\template\customer\form\login.phtml

Register
\app\design\frontend\YourPath\default\template\customer\form\register.phtml

Shopping Cart
\app\design\frontend\YourPath\default\template\checkout\cart.phtml

Dashboard
\app\design\frontend\YourPath\default\template\customer\account\dashboard.phtml

Sub Categories Page
\app\design\frontend\YourPath\default\template\catalog\category\view.phtml

Tricks

Use JQuery on pages:

<script type="text/javascript" src="/pathTo/jquery.min.js"></script>
<script type="text/javascript">
   //<![CDATA[
jQuery.noConflict();
var $j = jQuery.noConflict(); //alias jquery with j$
$j(function(){
$j('button.button span span').html(""); /*can be used to hide span text and fix some bugs if using images*/
});
//]]>
   </script>

Links to Sitemap

/catalog/seo_sitemap/product/ -product sitemap
/catalog/seo_sitemap/category/ -category sitemap

Hide index.php in the store view:

In admin, System>Configuration>Web Tab. Under Search Engine Optimization, change User Webserver rewrites to Yes.

Check if a user is logged in:

$this->helper('customer')->isLoggedIn()

<?php
if( $this->helper('customer')->isLoggedIn() ){
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>logout</span></a></li>
<?php
}else{
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>login</span></a></li>
<?php } ?>

Display Product Skus: (for product page)

<p class="itemSku">Item #<?php echo $this->htmlEscape($_product->getSku()) ?></p>

Change the number of displayed products in list/grid view:

Admin -> System > Catalog > frontend
and: app/design/frontend/default/default/layout/catalog.xml

Embed Contact form in CMS page:

<!-- CONTACT FORM -->
{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}
<!-- END OF CONTACT FORM -->

Get the Sub-Category Page to display Images: (replace your

\app\design\frontend\YourPath\default\template\catalog\category\view.phtml with below code)

<?php
$_category = $this->getCurrentCategory();
$collection = Mage::getModel('catalog/category')->getCategories($_category->entity_id);

$rootcat = $_category->entity_id;
$cat = Mage::getModel('catalog/category')->load($rootcat);
$child = $cat->getChildren();
//echo $child;

if($child)
{
$helper = Mage::helper('catalog/category');
$_helper = $this->helper('catalog/output');
?>
<div class="category-custom-products">
<table>
<tr>
<td valign="top" width="405">
<h1 class="page-title"><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>
<?php
$_imgUrl = $_category->getImageUrl();
echo '<img id="ProductCategoryImage" src="'.$_imgUrl.'"/>';
?>

</td>
<td width="40">

</td>
<td valign="top">
<div class="products-grid categories-grid">

<?foreach ($collection as $cat):?>
<?php if($_category->getIsActive()):?>
<?php
$cur_category = Mage::getModel('catalog/category')->load($cat->getId());
$_imgUrl = $cur_category->getImageUrl();
?>
<div class="categoryItem">
<a class="categoryImageLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo '<img class="categoryImg" width="216" height="180" id="ProductCategoryImage" src="'.$_imgUrl.'"/>'; ?></a>
<a class="categoryProductLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo $cat->getName();?></a>
<a class="viewDetailsLink" href="<?php echo $helper->getCategoryUrl($cat);?>">view details</a>
</div>

<?php endif?>
<?php endforeach;?>
</div>
</td>
</tr>
</table>
</div>
<?php
}
else
{
?>
<?php echo $this->getProductListHtml() ?>
<?php
}
?>

Hope this helps someone out. I'll try to add to it if I learn something interesting.

Cross Browser Compatibility, A rant, Some tips, Some thoughts.

If you're reading this posting, and you're using IE6. Please just stop. Do yourself, and every web developer a favor. Download a new browser, whether it be the most up to date Internet Explorer, Firefox or Chrome, just do it.

Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.

This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.

If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.

Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.

Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
     p{
          color: #000000; /*Black Color Text All Browsers*/
          _color: #ff0000; /*Red Color Text in IE6*/
          *color: #00ff00; /*Green Color Text in IE7 and below */
           color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
     }
</style>


/*IE = 8:*/           property: value\9;
/*IE = 7: */       *property: value;
/*IE6:*/            _property: value;

Alternatively, you can use if conditionals such as:

<!--[if IE]> CssCode for Internet Explorer <![endif]-->
<!--[if lte IE 6]> Code for IE6 and below <![endif]-->
<!--[if lte IE 7]> Code for IE7 and below <![endif]-->
<!--[if lte IE 8]> Code for IE8 and below <![endif]-->

Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.

A more comprehensive guide can be found here, here or here.


The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:

Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.