Mobile Design Help

drding

New Member
I was wondering if anyone knew of a few good tutorials for learning how to create mobile versions of websites? Or any advice on that subject.
I know I can technically Google it, but there's just so much info out there to pick through, and I value the opinions here.

I know a few key concepts of it so far; like keeping it to a minimal design (but hopefully not drab), no huge images, keeping scripting to a minimum?, interactive but not confusing or convoluted, etc. And also that I should look at other mobile designs for the type of site I'm building to see what's being utilized (or not utilized even) for both design/functionality and content.

I'm not sure how to identify mobile devices versus computers either. I'm pretty sure it has to do with user agents but I a.) am not sure that's right and b.) am not sure how to go about that in the most sufficient way if it is right.

Any advice or if someone can point me in the right direction would be much appreciated. Thanks!
 

Roddy

New Member
Responsive Design

jQuery Mobile has just been updated and has a huge number of features..

http://jquerymobile.com

The demo file has all the info you need to get started.

One mod that I make is to set a maximum width and center the page in the browser so that it can be viewed on desktops as well.

If you want a design which changes for PCs, tablets and smart phones, have a look at ...

http://www.initializr.com

.. which will help you get the idea of media queries and how they work.

There are various ways to detect browsers and devices but simple is usually best. If you have a conventional website and a mobile version, put this in head of the index.html file for the conventional one...

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

This code will send any visitors using a device with a screen width of 800px or less to the mobile version. You can change this number to suit yourself.

If you want to get complicated, try this...

http://detectmobilebrowsers.mobi
 

jaydenharris98

New Member
Here is some good points for better mobile web design.

-Website or App?
-Designing for a Smaller Screen Size
-Consider Poor Connectivity
-Choose a Separate URL for Your Mobile Site
-Detect And Redirect Users
-Consider a Mobile Friendly 1 Column Page Structure
-Simplify and Optimize Your Content
-Reduce Your Navigation and User Input
 

Edge

Member
Good excuse to buy an ipad ;) for testing - that's what I told missus...
(It was brilliant for watching Olympics!)
 

drding

New Member
Roddy - Thanks for the JM link, I've just started dabbling with jquery and I'm really digging what it can do. I never knew it was that easy to redirect based on screen size, that's awesome!
Yeah it would also be great to have something that could change based on the device used to view it, I'll check out that initializr link.

jaydenharris98 - You raise some really good points I hadn't thought about. For example poor connectivity. Which I think really puts emphasis on having a clean design that loads fast. Definitely less is more in this case.

sdesign1 - Hehe that would be a good reason to spring for an ipad. All for the sake of testing right? :D


Excellent advice so far, thanks everyone!
 

sandbox

New Member
What I have now is just a mockup design aimed for tablet device. I still work on the redesign when it comes to smaller devices. It is meant to be used as an app not a... mobile website.

Sencha Touch framework only works with browsers that support the css webkit e.g. chrome, safari... mobile browsers
 
Last edited:

Phreaddee

Super Moderator
Staff member
I still work on the redesign when it comes to smaller devices. It is meant to be used as an app not a... mobile website.
id build from mobile first, so incorporate the smaller devices in your build.
and make it a mobile website.
when its complete push it on to an app.

I don't know that just seems logical to me.
and I would make it to work on all browsers (save for the usual suspects that'll get their own bastardised version of the website)

and I wouldn't "touch" Sencha Touch with a 10 foot pole.
 

sandbox

New Member
id build from mobile first, so incorporate the smaller devices in your build.
and make it a mobile website.
when its complete push it on to an app.

I don't know that just seems logical to me.
and I would make it to work on all browsers (save for the usual suspects that'll get their own bastardised version of the website)

and I wouldn't "touch" Sencha Touch with a 10 foot pole.

I agree what you are saying. This project is a bit different, it is a diesel engine back up generator app. There is no website about this product. The manufacturer sent us the data and we converted it into user selectable options. And they wanted to see the tablet version first...
 

Roddy

New Member
I wondering why you posted the link to this site in answer to a question about mobile website design? An experimental site like this might be better posted in the Reviews section with a better explanation of what it is.

Perhaps you could explain your thinking?
 

webstudent123

New Member

Roddy

New Member
Changing the user agent in Safari isn't going to tell you much.

Use the iOS Simulator app that comes with the Apple Developer tools. Its just been updated for iOS 6.
 
Top