Mobile Friendly layouts?

[Sain Cai]

I will be redesigning a website, but also wish to make one mobile friendly as graphics on the regular PC version may be too intensive for mobile viewing. My question is do I need to create a site specifically for mobile browsing, or should I hold back on the heavier graphics and make it so the graphics I will have can be easily replaced by perhaps a css switch? Note that I will be using wordpress to create the website.

One other question is is there a script function to detect a mobile user? For example, when I go to some websites, I get redirected to say m.yahoo.com, I presume the m is mobile. Does this mean I have to create a totally different site for the mobile user?

I dont get online via laptop anymore, hence why I havent been on in ages, but can check more often now that I upgraded phone

 

[coleenella]

Good news posted in this forum, I like it for getting best layout for mobiles.

 

[Sain Cai]

And this pertains to my question how? Looking thru your posts, i am unsure any contribute to the community, rather bump post count for your sig.

 

[saudilawyers]

this is my concern too. we also would like to have the website compatible with all browsers and mobile devices. Are there any ideas how to do this?

 

[chelsea77]

you can use http code.google.com/p/php-mobile-detect/ script to detect mobile device. you can use wordpress build in feature image functionality to serve optimaze image. here is how you can use it

    add_image_size( 'computer', 425, 239, true);			// ratio 16:9 sdestop
add_image_size( 'ipad', 269, 179, true);			// ratio 3:2
add_image_size( 'mobile', 191, 127, true);

 require_once ('Mobile_Detect.php');	

$detect = new Mobile_Detect;
    $size = ($detect->isMobile() ? ($detect->isTablet() ? 'ipad' : 'mobile') : 'computer');

//then  use word press postthumpbnail function
<div> the_post_thumbnail($size);</div>

hope this help

 

[TehGuy]

There's a few options. Here's what comes to mind:

1. Responsive Design - This essentially means the layout changes depending on other factors, such as screen or window size. You can do this with CSS media queries (which aren't supported in older browers, aka IE or Javascript. A great example is this is Smashing Magazine. If you start your window out full-sized, then slowly make the window tiny, you'll see how the site changes to accomodate the window. This is my favorite approach as it just requires some planning on the design side of things and eliminates tons of hassle in the future compared to the other options.

2. Dedicated Mobile Site - This means you make an entirely new site dedicated to mobile only. It's a simple approach, but there are some big downsides: you have to make an entirely new site for what is probably a small amount of your total traffic, and you have to maintain two entire sites (your desktop and your mobile site) when you make changes. You generally go with a server-side solution (PHP, for example) to redirect mobile users to the mobile site.

3. Mobile First Approach - This means you make your site optimized for mobile use FIRST, then you do what you can for desktop users. This is a perfectly valid approach if mobile is a huge part of your traffic, but that's not the case for most.


Smashing Magazine happens to have a bunch of articles about what you're looking for, so here's a few:

The category the relevant articles will be in: http://mobile.smashingmagazine.com/tag/responsive-design

This article is specifically about your options for mobile wordpress sites: http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/

 

[sander k]

WP has mobile themes and plugins for this.
Its easy to install/use. I am working on a site like that myself... In Dutch tho.

 

[ExodiusUK]

Hello Sain Cai,

If im correct you should be able to specify what css to load depending on what visits your website.

Like so:

  <link rel="stylesheet" media="only screen and (max-width: 768px)" href="tablet.css" type="text/css" />
  <link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px)" href="phone.css" type="text/css" />
  <link rel="stylesheet" href="style.css" type="text/css" />

Or you could just make your website purely html/css and almost anything should be able to view and load the pages fast.

 

[Sitebee]

Making your website responsive is fairly easy for text, it`s awkward though for images, such as banners/ sliders/ media. If you have a big website it maybe worth just creating a few mobile friendly pages so that you cover the major specifics. Also your blog and forums responsive with plugins.

 

[kiddoman]

Here is my advices to you if you really want to make a website only for mobile device:
Use a Fluid Layout
Fluid columns
Do It With Sass
Use a Framework
Toss In A Single Column Media Query
Pay much attention on use experience

Hope that can help you.

 

[angela25]

I would never choose to make my website less graphic, because else i need a different mobile page... i would always choose for the best concept Never let your mobile website affect your normal website