How to serve a Mobile & Full Site using one URL?
-
Hello,
Does anyone know of any resources or tutorials that outline how to serve a smartphone-formatted website using the same URL as the full site?
I know that one solution is using media-queries to serve a seperate CSS stylesheet, but you still have the full HTML source code. In other words, I might want to serve a smartphone & desktop user different content, but under one URL.
WP Touch (Wordpress Plugin) is a perfect example of what I mean, but how is it technically achieved? It serves two different sets of HTML for smartphone & full, but using one URL
-
No, I am also in the process of enquiring, I program in ASP.Net MVC, and the new MVC4 comes with a few starter templates (with Visual Studio 2010), this is where i got the info i suggested.
I can send you a starter template if you like, you can have a look though if you like. Actualy you will need VS2010 to run it, you can down load a trial but then you may as well download MVC4 as well.
-
Hi Alan,
Thanks very much, I agree - it likely would be easier to use media queries, but I am looking for that ultimate fix and insight on how others do it
-
Then of cause you would need to use a server side solution, this is quite simple in therory, all you need to do is get the severvariable HTTP_USER_AGENT to detect the browser, but then there would be a lot of different serveragenst to detect and more in the future. It would also be a pain having to generate html via server script for every page. I tried doing that for Netscape 2 and IE2 but gave up, it was too much work. Back in those days the way of doing things in browsers was completely different untill IE won out.
I think the eay i was saying is much easier, and there is no missing html, its all used on both versions just positioned different.
-
Hi Alan,
As mentioned. I'm not looking for a CSS solution, but rather a HTML one where different HTML is served if the user-agent is a smartphone.
CSS Media Queries can work in some situations, but not for all. For example, taking the following page - http://www.flybmi.com/bmi/en-gb/index.aspx - and using a mixture of CSS and display none; to output http://www.flybmi.com/mobile would result in a mobile site full of hidden/wasted code.
-
I have a few examples. i used the tag in the head section of the html.
Along with Media css see below. you slip this css into your normal css sheet, and give an alternitive css inside for phones,
if you look at one of my sites http://perthseocompany.com.au/ i have done like this you will notice that when the screen size goes below 850px it then takes on the alternative css. One of the main things you will want to do is make sections of your website line up verticly under the alternitive. You can do this by using float left and float right in normal site and float none in alternative css.
I do not have my site perfect because i have not yet had the time. but you get the general idea by playing with browser width.
Note the max-width: 850px in css, this is the width at witch the css changes@media only screen and (max-width: 850px)
{header .float-left, header .float-right
{
float: none;
}
} -
Hi Tommy,
This doesn't provide any technical answers unfortunately, and refers to mobile devices as opposed to smartphones. Googlebot-mobile is designed for WAP/iMode etc. style websites, Google on smartphones, tablets etc. displays the same results as the desktop version.
-
Hi Pete!
Take a look in Googles SEO guide on page 26, http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf
Good luck!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
URL & Link Hierarchy - juice flow direction from backlinks?
Our site is very regional, so we focus all of our seo efforts on each of these region landing pages. For Example: domain.com/toys/us/ca/san-francisco We added an informational page (ex. reviews) and gave it a url like this: domain.com/toys/us/ca/san-francisco/reviews Question: Will external backlinks to domain.com/toys/.../reviews provide any link juice value to it's hierarchical parent page: domain.com/toys/us/ca/san-francisco?
Web Design | | 42Floors0 -
301 Redirect all pictures when moving to a new site?
We have 30,000 pictures on our site. Moz will return 404's on some occasionally, but Google seems to ignore those. Should I 301 redirect all those images when we move to a new site lay-out? Appreciate your views!
Web Design | | Discountvc0 -
Using a 301 vs. 302?
I'm running into a very confusing situation - and while I think I've worked through the answer, I'm hoping someone can help provide their insight. I have a client who is in the process of rolling out a responsive site. Because we need to host both Responsive and legacy versions of product pages on the domain we are using the following URL pattern. New Responsive Product Page exampleurl.com/product (existing URL structure) Older Product Pages (redirected to) exampleurl.com/legacy/product The rollout will be approximately 2 months to complete. The question becomes - should a 302 redirect be applied from the existing URl to the /legacy/ URLs until the new designs are launched? Given that the timing will be so short this seems reasonable. Or should a 301 be applied until the new responsive designs are rolled out?
Web Design | | JonClark150 -
Website URL Structures - Which does Google prefer or does it matter?
Which URL structure does google prefer..............OR DOES IT REALLY MATTER? Option A www.example.com/services/service#1 - this is the default that wordpress uses Option B www.example.com/service#1
Web Design | | webestate0 -
Japanese & Mandarin Fonts
A client is looking to translate PDFs on their website into Japanese & Mandarin fonts. I found this resource: http://www.vistawide.com/languages/foreign_language_fonts2.htm I'm not sure about the quality. This is a call for any international font designers/experts for input. Any suggestions or resources?
Web Design | | DanaLookadoo0 -
How SEO friendly (or unfriendly) this site structure is
We have a client who wants a site structure like this http://thethomasoliverband.com/home - try to scroll down on the content and see how the url of the site changes. Would there be any problems on trying to SEO this type of structure?
Web Design | | paulct0 -
PSD to WP Coding & Plugin Implementation?
Any recommendations? I am looking for a company that can do it to a very high standard. Need a review plugin implemented as well, which works with the theme. Clean coding, correctly named divs and clean comments. Thanks guys
Web Design | | getbigyadig0 -
What is the optimal URL Structure for Internal Pages
Is it more SEO friendly to have an internal page URL structure that reads like www.smithlawfirm.com/personal-injury/car-accidents or www.smithlawfirm.com/personal-injury-car-accidents? The former structure has the benefit of showing Google all the sub-categories under personal injury; the later the benefit of a flatter structure. Thanks
Web Design | | rarbel0