How to customize the iPhone version of your Morph powered Joomla site
Today, everybody and their dog browse the internet using a mobile device. Mobile browsing is increasing and you can (should?) show your website visitors a different, mobile browsing friendly version of your site.
Based on popular demand, each themelet on
the Morph framework has its own unique iPhone layout.
If you’ve enabled
iPhone compatibility in Morph’s Configurator, then that’s the layout your website visitors automatically see when browsing your site on an iPhone. As easy as a flip of a switch.
This blog post is focused on
how to configure the iPhone version of your Morph powered Joomla website:
The basics
You turn iPhone compatibility ON/OFF from within
Configurator:
Go to the tab
Customize >
iPhone Compatibility, where you can also set which
header and
webclip images to be used.
The webclip icon is used when someone saves your site to their iPhone home screen. It is also displayed at the top of the layout, next to your sites name.
Your
iPhone graphics (header/webclip) are located in the “/morph_assets/iphone” folder of your Joomla site root and is accessible from within Configurator’s tab
Your Assets >
iPhone.
Available module positions
The iPhone optimized version of Morph has its own module positions. This allows you to
display different content to users browsing your site on their iPhone.
The diagram below shows the available positions, which are
iphonenav,
iphone1,
iphone2,
iphone3 and
iphone4.
The
iphonenav position is used to display the iPhone specific menu, which means that you can display only the links that are relevant to someone browsing your site on a mobile device.
The
iphone1 and
iphone4 positions are positioned outside the main content block and they work similarly to the outer shelves in Morph. (
Learn more about Morph’s layout system)
You will also notice that the default Joomla contact form has been optimized for the iPhone, making it easy for the person browsing your site to get in touch.
If you want to customize it further than a few point’n clicks in Configurator, you can easily do so by adjusting the iphone.css located in the themelets css folder. Learn more about Morph’s developer options.
Learn more about the Morph framework for Joomla
Tags: configurator, framework, Joomla, Morph, themelets, usability
We are in love with everything web and embrace technology as a means to drive social change.
Nice tips, wish I will have an iPhone soon.
.-= Young´s last blog ..4 Ways to Sync Google Buzz to Twitter =-.