CSS for mobile

[Walter Ebert]

Hi all,

This week I will be attending a mobile web workshop by Peter-Paul Koch
(ppk). Attendees are encouraged to work on a real project. So I had
the idea to use the joind.in site as a test case.

It looks like the CSS is based on the 960 grid. I haven't used that
framework yet, so I'm wondering if joind.in uses a straight-forward
implementation. Or is there any extensive customisation going on?

Any suggestions or ideas for a mobile friendly design would be
welcome.

I'll probably post my results next week and see if it is something
that could be used.

Cheers,
Walter

[Chris Cornutt]

Hey Walter,

Well, unfortunately the best person to answer that question hasn't been active on the project in some time. He was the one that came up with the look and feel as it stands now. I'm CCing him on this email, though, to see if he's around and can help answer your questions....Jan?

I look forward to your results - be sure to send out a note when you have them posted :)

-chris

--
Senior Editor
PHPDeveloper.org
ccor...@phpdeveloper.org

@enygma

[jsor]

Hi,

On Mar 22, 9:30 am, Walter Ebert <li...@walterebert.com> wrote:
> Hi all,
>
> This week I will be attending a mobile web workshop by Peter-Paul Koch
> (ppk). Attendees are encouraged to work on a real project. So I had
> the idea to use the joind.in site as a test case.
>
> It looks like the CSS is based on the 960 grid. I haven't used that
> framework yet, so I'm wondering if joind.in uses a straight-forward
> implementation. Or is there any extensive customisation going on?

There is nothing special. As you said, its based on 960 grid. The css
is available here:
https://github.com/joindin/joind.in/blob/master/src/inc/css/site.css

Feel free to ask if you have any questions.

> Any suggestions or ideas for a mobile friendly design would be
> welcome.
>
> I'll probably post my results next week and see if it is something
> that could be used.

-Jan

[Walter Ebert]

Hi,

My first results to create a mobile friendly version can be seen on:
http://joindin.walterebert.com/

My changes are available on github:
https://github.com/walterebert/joind.in/tree/mobileweb

The layout is the same, but I switched to HTML5 to support new form
input types and WAI-ARIA roles. Also I added the text from splash
image as regular text.

All other changes are in CSS:
- Added CSS media queries to support different screen sizes +
orientation.
- Show splash image on higher resolutions and splash text on mobile
devices.
- Hide top menu navigation and top login/register links on mobile
devices. These links are available in the footer navigation / sidebar
and take up too much space on mobile.

On iOS and webOS there are still some minor layout issues in the
footer that do not appear on Android. So I still have to do some more
testing.

No idea how iPhone4 behaves. The iPad should act like a desktop
device.

Please feel free comment.

Cheers,
Walter

[lornajane]

Walter,

I haven't got time to set this up and play with it currently, but I am
very excited to have the mobile site receive some attention and I hope
you'll keep us updated on your progress! I'd really like to merge
these updates into the main repo once they are ready.

Exciting stuff :)

Lorna

[Walter Ebert]

Hi,

After some more testing and optimisations I think I now have a usable
mobile version of the site.

A small problem are the Google ads in portrait mode. They are 468
pixels wide and thus wider than the common screen width (320 pixels).
So a part of the banner is not visible. I don't know if Google offers
any solutions for this problem, because I have no experience with
their ad service.

I have tested on devices running:
- Android 2.2
- iOS 4.2
- webOS 1.4

I also tested Opera Mobile and Mini and that seems to work.

Windows Phone 7 is a bit of a problem. I used the Windows Phone 7
emulator and CSS media queries are apparently not supported. The
mobile browser is based on IE7. And IE9 does not promise to have any
major improvements for mobile. So basically users get the regular
desktop layout. For the moment I will ignore it. Unless any one has
some useful tips.

I have not tested Symbian, but recent versions have a Webkit browser.
So that should be okay.

Changes are available on:
http://joindin.walterebert.com/
https://github.com/walterebert/joind.in/tree/mobileweb

It would be nice if some of you try it on your mobiles. If no one
finds any major issues I will prepare a pull request.

Cheers,
Walter

[Jake.S...@gmail.com]

Walter,

You may consider using this jQuery plugin to accomodate browsers that don't support media queries, http://protofunc.com/scripts/jquery/mediaqueries/

I haven't tested it myself, yet, but it may work for you.

- Jake