iGetSimple iPhone version (Beta version available)

[eddyfever]

iGetSimple a free GetSimple theme created for the Apple iPhone.

Preview: http://www.testiphone.com/ and fill in http://home.ieddy.nl/iphone

Or take a look on a different version of it, with waht you can do for example: http://home.ieddy.nl/getsimple

includes: content slider / and slide menu

Keep you posted

28 okt: yesterday i had some problems with the preview this one is now fixed!
28 okt: First messy version available for download
30 okt: Beta version up for download
- problems with the contact page (Oops page not found)

READ THIS TOPIC FOR FUTURE ADJUSTMENTS

Suggestions are welcome!

[eddyfever]

Update:

- Preview link updated and works now fully on GetSimple,
- Still need to fix some bugs and clean up the code.
- Available for download later today or tomorrow

Go with your iphone to: http://home.ieddy.nl/getsimple/

[Zegnåt]

Interesting, it seems to get a horizontal scroll on the preview page… does it get this on the iPhone too?

How much does the markup of the page match the markup of previous styles? It would be great when this could be added as a kind of generic solution for all GetSimple pages on iPhones.

[eddyfever]

Zegnåt wrote:Interesting, it seems to get a horizontal scroll on the preview page… does it get this on the iPhone too?

How much does the markup of the page match the markup of previous styles? It would be great when this could be added as a kind of generic solution for all GetSimple pages on iPhones.

Yes the scroll works also on the iphone, because safari supports jquery very well.

It should be possible to use it for other getsimple sites too.
Then i just have to make a more default version wich is based on the default theme wich you get with GetSimple. I'll work on a version like this.


Then GetSimple also need a lil edit, that you can choose in the URL wich theme you want.

Then with a simpel code on your index page you can forward it to your iPhone version.

Code:

<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.href='YOURURLHERE';
}
-->
</script>

[Zegnåt]

eddyfever wrote:Then i just have to make a more default version wich is based on the default theme wich you get with GetSimple. I'll work on a version like this.

Then GetSimple also need a lil edit, that you can choose in the URL wich theme you want.

Why put it in a different Theme?

If you can make it more generic all that would be needed would be to load a different link- and script-element at the top of the template to make sure we load the right files. For this the following PHP could be used:

Code:

if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {
    // code to grab the files needed for the iPhone
} else {
    // code to grab the files needed for other browsers
}

[eddyfever]

Oh ok like that, yeh that sounds like a good idea.

With the version i made now i made to much adjuments to the layout for "bandinfo". But with what i know now, i can make a version wich can be used for any default layout.


- First messy bandinfo version available in the startpost

[ccagle8]

eddy - very interesting. I think you would have a gem on your hands if you created a sort of theme-plugin that developers could just include in their current themes to make them iphone compatible.

[eddyfever]

As far as i can see it now, it works fine with the default template,

preview from the real iGetSimple theme look with your iPhone on

http://home.ieddy.nl/iphone

or with the iPhone simulator: http://www.testiphone.com/

So whats new:

- Complete compatible with GetSimple,
- Better Jquery menu slider
- Add to homescreen icon
- Images auto resize to iphone width

What to do:
- Clean up the code (specially the css)
- fix a few bugs
- testing etc etc

[Zegnåt]

I can’t help but notice you seem to have hard coded the width of the page. Isn’t it much better to make it use a flexible 100% and use the viewport meta element to make sure it fits the screen?

This way both the horizontal and vertical way of holding the iPhone would be supported automatically and the iPhone does not have to think about zoom settings. Although I read a lot about these techniques recently I have never actually put them to use as I do not own an iPhone for testing:.

[eddyfever]

When you watch the site now in the horizontal version, it works fine. Just the images are not so nice anymore.
Nice to do punt anyway.

[Zegnåt]

OK, did some testing on my own (as far as this goes without an actual iPhone). I have attached the image I’m basing my comments on to this post.

The first iPhone shows the page as it is rendered by a WebKit browser on the size of an iPhone. This also illustrates what I meant in my previous reply by horizontal scroll. Normally you wouldn’t expect a scrollbar on the bottom their.

At the second iPhone I turned on zooming, here it adapts the width of the page to match the width of the iPhone screen. As this forces the whole page to zoom and not just collapse the images in the header get fuzzy.

I think to fix this the page should be styled to take up 100% of the width of the device.

The third iPhone shows what apparently is the horizontal view? Is this a mistake of the program I am using or does it really only render a website this small on the iPhone? Because I can’t imagine that to be a good idea.

The same holds true for your other iPhone theme:


Now that I have this testing program I’ll take a go at this myself.

For those wondering, all snapshots have been taken with Marketcircle’s iPhoney.

[eddyfever]

ill have a look tomorrow what needs to be done for the best result, here are some screens directly from my iPhone.

[Zegnåt]

Thanks for showing me what happens in the actual iPhone.

I think you might not want the iPhone to zoom the page in horizontal view. As you are designing specifically for the iPhone there is no need to resize anything, it just makes things fuzzier.

I think something to experiment with would be:

Code:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

As the design should fit the iPhone perfectly this is telling the iPhone only to have a viewport exactly the size of the iPhone itself. As a little extra it also sets the scale to 1. You will probably want to test this but my guess would be this fixes the zoom in horizontal view.

As a side effect you would probably want to add this to the CSS for the body:

Code:

-webkit-text-size-adjust:none;

This will tell the browser not to adjust the text size when you switch from vertical to horizontal. You design for the iPhone so there is no need to change the font-size. This will also gaurantee the viewer gets more content when going horizontal instead of just getting some zoom-effect.

[eddyfever]

He Zegnåt thnx for all the info and research, i will try those examples.

Code:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Code:

-webkit-text-size-adjust:none;

Both codes works perfect, no more zooming in, and i edited the CSS to 100% width.

[eddyfever]

Beta version for download in the start post and Zegnåt can you help with instert it in the PHP files from GetSimple

[Zegnåt]

eddyfever wrote:Zegnåt can you help with instert it in the PHP files from GetSimple

I probably can Should I just download and see what I should do or is there an easier way to get in touch? MSN/Skype/Email is all fine by me so just let me know.

[Zegnåt]

Let the first round of testing get started, screenshot attached.

Sorry for the bump, but it felt like this screenshot needed some extra attention.

[eddyfever]

oh nice sreenshot! Looks like you did a great job.

[JWH_Matthew]

@eddyfever, I have created a new plugin to automatically change the default theme to the IPhone theme
when you visit the site from an IPhone!

I am going to go ahead and link to this theme from my plugin. If you wish me not to link to it, just let me
know and I will remove the link. (It should be some good advertisement for you!)

Thanks,
Matthew

[sal]

Pretty sure he wouldn't mind at all, put it in your forum signature too.

[xd1936]

This theme is so great. Any chance for a 3.0 update?

Edit: Theme works fine with 3.0. User error!

[agittens]

This is a fix in order to detect Blackberry Browser

eddyfever wrote:iGetSimple a free GetSimple theme created for the Apple iPhone.

Preview: http://www.testiphone.com/ and fill in http://home.ieddy.nl/iphone

[Unapzeus]

Hi, where the download link?

[fugo]

I think this is dead - don't see any download link

[JWH_Matthew]

I think I have a version of this from way back when but it is not supported any more. I will look and see if I can find it.

We really need to get some poeple working on some mobile themes..