A dumb question from a guy who doesn't own a smart phone

I don’t have any way to look at how sites look on smartphones. I have no friends either.

I was wondering what happens when people look at a regular wordpress website on a smartphone. Does it look/act that bad? Why does there have to be a mobile version of the site? What things don’t work on the mobile device (other than flash)? Even if a few things look weird, is it passable? I mean how bad do things get if the website is made especially simple and has no complex or large graphics or large photos?

I found this link in another forum.

It’s a plugin you can use for your wordpress site that converts (I guess it detects a mobile user and automatically does this?) things on the page to be mobile friendly, like splitting the content up into multiple pages and scaling down things. Is this a good alternative to creating a special website for mobile devices?

One more thing, what is the code that you can use that allows your site to detect if someone going to your site is a mobile user/browser type? And then what code can be used to automatically direct them to a mobile site?

Thanks in advance for anyone’s help.

Aww. You have friends here! :slight_smile:

I was wondering what happens when people look at a regular wordpress website on a smartphone. Does it look/act that bad?

It depends totally on the layout and design of the site. These days, there is a buzz over “responsive design” that makes website layouts adapt to different screen sizes/conditions.

Why does there have to be a mobile version of the site?

There doesn’t. You can just style it differently for mobiles. But the idea is to make the site display better on a small device. Would you want to watch TV through a keyhole?

What things don’t work on the mobile device (other than flash)? Even if a few things look weird, is it passable? I mean how bad do things get if the website is made especially simple and has no complex or large graphics or large photos?

You’ll probably be fine, but on a small screen, it’s worth trimming things down to the essentials, so that users don’t have to scroll endlessly to find what they need.

what is the code that you can use that allows your site to detect if someone going to your site is a mobile user/browser type? And then what code can be used to automatically direct them to a mobile site?

You can do this with JavaSCript and other languages, but you can also use CSS @media queries for some devices, which automatically changes the styling of the site depending on the width of the viewport.

There are some testing tools that allow you to see what your site will lok like on small screens. My favorites are:

iPad/iPhone simulator (a big download and only available on Mac)
Mobilizer (test a range of divices on your desktop, such as iPhone, Android, Blackberry etc.)
Opera Mini: http://www.opera.com/mini/demo/ (online Opera testing tool)

Smart phones have much smaller screens. Its more difficult to navigate and read content.
The mobile experience is a lot better with simplified navigation, one column, etc… For mobile, an approach I’ve used in the past is to make an iPhone/Android site and a second site for every other mobile device that is just lightly styled HTML. There are numerous other mobile platforms most of them with very poor HTML rendering. This second site has very little to be interpreted.

You can do all that just with one site via CSS. See this:

ralph.m,

Personally, I prefer to do them as separate sites.

  • The audience for a mobile site may be different then from the main site. So pairing down the information to show only what they are most likely looking for make it easier to use.
  • The information users are looking for may be different. On mobile device, you are likely on the go and are more likely to be looking for a phone number, a menu, or other smaller bites of information. The content can be tailored for this.
  • The load times are also slower. Reducing image sizes and the number of files used in the design will improve performance.
  • Not all mobile devices will understand responsive css.

The truth of the matter is, since mobile sites used simplified layouts, it takes less time to make a cleaner distinct site then to bug test elaborate css layouts on a bazillion different platforms. If you are using a CMS, its a simple matter of switching templates.

To add clarification to my previous statement, it would really be two different sets of templates. The mobile set would usually draw less information. The css would be switched server side for the iPhone/Android style vs ‘other mobile’ style.

Another factor is whether you are working with a designer or designing the site yourself. If you are working with a designer, good luck explaining the requirements of a responsive design.

One note concerning the slideshow in your link: Even though many people have Internet capabilities on their phones, mobile visits typically consist of 1%-3% of visits to a Website. Mobile has been the next big thing for the last 15 years. The small screen size limits what you can do with them. My guess is that tablets will become increasingly popular. Though their screen resolutions are the same as smaller monitors.

E

I hear what you are saying, but personally, since mobile layouts started getting popular a few years ago, I’ve been finding that I prefer them on desktop too. I often have my browser width minimized to take advantage of the sleek, stripped-down mobile veiw. Why? Because most of the stuff on desktop views is fluff and cruft. I hate all those dicky sidebars, ads, pointless slideshows and the like. I’ve been thinking of late: why not build the site like a mobile site for everyone? I’m glad to see I’m not the only one who thinks this way:

He puts the argument for one site only much better than I can.

Again, as the slideshow above argues, who are we to decide what the user wants? Why not make info easy for everyone to access.

  • The load times are also slower. Reducing image sizes and the number of files used in the design will improve performance.

There are nice JS solutions for this, such as:

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

  • Not all mobile devices will understand responsive css.

The point of the first slideshow I linked to was that you serve up basic styles that all devices understand, and then enhance those styles with media queries that smarter devices can understand.

If you’re going for the simple/mobile styles first approach, it’s well worth checking out these two excellent frameworks:

I use the HTML5 Mobile Boilerplate quite often for sites that have specific mobile focus but may also be accessed via desktop as it provides an excellent base to work from.

Of course it may mean that mobile sites still download additional assets, if this is something that you’d like to avoid then it would be good to offer a different set of markup & styles to mobile devices (e.g. via a mobile theme in WP, though if you want to do some of this yourself then you can use the WURFL Project)

The Google Images mobile site is especially nice. Flipping through the pictures one by one is often more gratifying than looking at a screen full of thumbnails.

E

I’ll check it out. So my point still stands: if you prefer this mobile layout/functionality, would it not be better to have this on the desktop too? That’s what I’m wondering, as the more mobile layouts I see, the more I’d prefer to have them on the desktop too.

There are many reasons for having completely different layouts in mobile and desktop view. Redundant navigation systems often have usability benefits that aren’t possible on a mobile layout. Limiting all web sites to one column seems a bit unnecessary.

Responsive design is a great thing but will create design limitations and is dependent on working with designers that understand how they work. I’m personally in favor of pragmatism, using what is the fastest, least bug prone today not in 15 years.

Do you just play with resizing the window or do you also use a User-Agent switcher (or some other plugin) to try and force a site in to mobile layout?

Agreed, the pragmatic programmer wins at the end of the day. There is only so much future proofing you can do.

In many ways if you already have an existing desktop site than the mobile version can be approached in a progressive manor. One which you can support the latest and greatest technologies and pass everyone else to the normal site. I mean if the site doesn’t actually function at that point it is on the phone maker, not the developer. An optimized mobile experience is a privilege not necessity in my opinion. It depends on your priorities. None the less, market research has proven that people who own contemporary devices are most likely to be using their mobile phones online and more importantly answer call to actions such as; purchasing products. Mobile devices are already so much less powerfully than desktop why clutter them up with backwards compatible code for someone using an archaic device… just throw them to the normal site, big whoop. I’m not sold on the responsive approach in the least especially for anything more than a simple static site. I think it is much better to embrace the modern device technologies and not take the well… we have to support the f**kin idiots on the IE6 mobile equivalent – screw that – to the desktop site you go!!! Though I am talking in terms of medium or large scale applications. Luckily I have been able to sell people on that idea, but others may not be so lucky.

I do resize the browser a lot, in case there are media queries involved, but also use a few other things. For example, Opera has mobile mode, allowing you to see what Opera mini displays. And there is the iPhone/iPad simulator (if you are on a Mac) and also Mobilizer is a handy tool for testing devices like Android, Blackberry (and iPhone) etc. I don’t think any of these testers are quite like the real thing, but they give one some kind of idea of the playing field.

I quite like Mobilizer for doing quick layout testing.

Doing it on the real thing is still the best way to go though :slight_smile: