Making Sites Work on Mobile - Alternative to Responsive Design

[accelerator]

Hi Chaps

Obviously I'm aware of responsive design, but how difficult is the alternative of building a dedicated mobile site?

How does a dedicated mobile site work? Do you just use some simple code to detect a mobile visitor and then serve the dedicated mobile site?

Thanks

 

[PoshTiger]

I created one a while ago that looked at the user-agent and redirected to say m.domainname.com if it found a phone based ID.

I think it was a free plugin as it was a wordpress site I was working on at the time.

 

[fresh79]

Hi Chaps

Obviously I'm aware of responsive design, but how difficult is the alternative of building a dedicated mobile site?

How does a dedicated mobile site work? Do you just use some simple code to detect a mobile visitor and then serve the dedicated mobile site?

Thanks

Its not really the done thing anymore what with bootstrap now on v3, but yes you would detect the browser/user agent with some code and then serve up an alt theme/content.
this method is not accurate there are lots of ways of spoofing a user agent, and lots of ways of getting it wrong. the best way is using bootstrap imo

 

[PoshTiger]

Happy to have my advice stricken from the record - it was quite a few years ago..

 

[Adam H]

Pretty comprehensive way of doing it here :

http://stackoverflow.com/questions/...est-way-to-detect-a-handheld-device-in-jquery

Although really i would say if you want a dedicated mobile platform then create an App, Google started pushing out warning emails for sites redirecting users to a different URL , i believe one of the bigger wordpress plugins which thousands were using also got flagged for not having proper mobile sites.

http://searchenginewatch.com/articl...bmasters-of-Faulty-Redirects-for-Mobile-Users

Go responsive, get an App or combine a bit of Jquery/JS with media queries so you have more flexibility, detecting user agents and redirecting users to a mobile platform is old hat.

 

[Retired_Member38]

Happy to have my advice stricken from the record - it was quite a few years ago..

The advice is not very good today (most polite way I can put that, its actually awful advice )

If you end up with people on m.domain.com then you split link equity across two domains (partially solved with canonical but why create the issue in the first place?).

You also have the problem of sometimes the 'wrong' version getting shown to visitors in Google. Or someone shares the mobile version link on Twitter and someone on a desktop clicks it.

Its far better/cleaner to have everyone on the same url for a page, but seeing it differently via css...,

 

[accelerator]

Thanks for the replies so far guys.

 

[mat]

Once you have got your head around responsive, its such a clean way of doing it as Monkey says. Get it done properly and you can really get the most out of your site on all screen sizes!

 

[tifosi]

A modern html5/css3 framework such as bootstrap3 or zurb foundation are the ways to go at the moment.

With a combination of positive enhancement and graceful degradation its possible to create a mobile (320-640px), tablet (768-1024px) and laptop/pc(1024px+) site that looks very different depending on the form factor.

 

[denchomsky]

The advice is not very good today (most polite way I can put that, its actually awful advice )

If you end up with people on m.domain.com then you split link equity across two domains (partially solved with canonical but why create the issue in the first place?).

You also have the problem of sometimes the 'wrong' version getting shown to visitors in Google. Or someone shares the mobile version link on Twitter and someone on a desktop clicks it.

Its far better/cleaner to have everyone on the same url for a page, but seeing it differently via css...,

Not to mention having to make any changes on two separate sites!

You don't have to use a framework, you can use media queries, but I would use bootstrap.

 

[PoshTiger]

The advice is not very good today (most polite way I can put that, its actually awful advice )

If you end up with people on m.domain.com then you split link equity across two domains (partially solved with canonical but why create the issue in the first place?).

You also have the problem of sometimes the 'wrong' version getting shown to visitors in Google. Or someone shares the mobile version link on Twitter and someone on a desktop clicks it.

Its far better/cleaner to have everyone on the same url for a page, but seeing it differently via css...,

If you read the OP, he states he wants a dedicated mobile site - my post was an outdated way of achieving it.

I didn't say it was a good idea @_@

 

[murph]

Interesting thread, I need to do something similar. How do sites show the "would you like to see this in the app" top bar you see on some sites via a mobile?

 

[Adam H]

Interesting read for some of you , although a bit old about a year ago many things still apply or have been highlighted further since then :

https://econsultancy.com/blog/62902...-lose-mobile-search-rankings#i.69e2xxfzmfnrwz

 

[accelerator]

There have been some comments on another forum that detecting the correct mobile client is difficult. This plus the fact that you then have a dual maintenance issue, is making me think responsive is the way to go.

Rgds

 

[DaveP]

Yes go responsive for your website, absolutely.

 

[AssetDomains]

I've been doing a bit of reading on bootstrap for the next version of my site definitely the way to go if you arnt great at design either don't reinvent the wheel either at these prices find something you like the look of and mod it to meet your needs.

https://wrapbootstrap.com/

http://themeforest.net/search?category=site-templates&direction=desc&order_by=best-match&term=responsive&utf8=%E2%9C%93

 

[fresh79]

I've been doing a bit of reading on bootstrap for the next version of my site definitely the way to go if you arnt great at design either don't reinvent the wheel either at these prices find something you like the look of and mod it to meet your needs.

https://wrapbootstrap.com/

http://themeforest.net/search?category=site-templates&direction=desc&order_by=best-match&term=responsive&utf8=%E2%9C%93

in most cases you dont even need to redesign or use another theme, just load the framework and add the cascading rules to your current rules,

example if you have a div called #home - add the following classes to it, col-xs-12 col-md-6 ect ect
just by adding these to your current html css you can make it responsive.

Bootstrap looks arcane and tricky at first, but once your in, once you got your head around the screen sizes, the fallbacks, the overlaps its easy

 

[mspecialists]

start experimenting with CSS - media queries are simple done:
@media only screen and (min-width: 1000px){ ...HERE NORMAL CSS FOR SCREENS >= 1000px... }

In HTML do <meta name="viewport" content="width=device-width, initial-scale=1">

its so easy - You can scale your browser window to check the differences. Also with combination of madia query and CSS display:none you can hide some elements for to small screens while showing others - so f.e. You can use a completly other menu layout type because using a completly different HTML menu for a different screen.

 

[accelerator]

OK, thanks for the advice.

Rgds

 

[diablo]

Really useful thread - thanks to all the contributors.