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
-
HTML and XML sitemaps for one website.
Hi all, First, we have created a HTML sitemap for our wordpress website. Then we again generated XML sitemap and submitted same in search console. It's been more than a week and still new XML sitemap has not been indexed yet. I can still only see HTML sitemap for search results "company sitemap". Also search console do have only XML sitemap. Both sitemaps are accessible but only HTML has been indexed. Is there anything wrong having 2 sitemaps? Why XML sitemap not been indexed? Thanks
Web Design | | vtmoz0 -
Best Captcha Recommendations for Magento Site?
I am looking for the best captcha solution for our website which is magento based. Currently our web developer is recommending google captcha. Is this just a spam check list or will it do the job well? I would like any other recommendations that are clear for readers and are professional.
Web Design | | TeguarMarketing0 -
What do you use for test rendering your dev site?
I'm redesigning our company ecommerce site and need to test render an infinite scroller to ensure that it is as SEO friendly as possible. My problem is that I cannot view it in Webmaster Tools since I am blocking the site from crawlers using robots.txt. I know I could simply unblock Google temporarily but I really would rather not make my dev site available to search engine crawlers.
Web Design | | bearpaw0 -
Funnel tracking with one page check-out?
Hi Guys, I'm creating a new website with a one page checkout that follows the following steps:
Web Design | | Jerune
1. Check availability
2. Select product
2. Select additional product & Add features
3. Provide personal information
4. Order & Pay I'm researching if it is possible to track all these steps (and even steps within the steps) with Google Analytics in order to analyse checkout abandonment. The problem is only that my one-page checkout has only one URL (I want to keep it that way) and therefore can not be differentiated on URL in the Analytics funnel. To continue to the next step also the same button (in a floating cart) in used to advance. The buttons to select/choose something within one step are all different. Do you guys know how I can set this up and how detailed I can make this? For example, is it also possible to test at which field visitors leave when for example filling in their personal information? Would be great if you can help me out!0 -
Q&A DB Script For Client Questions
Our clients usually have a lot of questions about our industry. We implemented Facebook comments (see bottom of: http://www.jwsuretybonds.com/info/faq.htm) on many pages throughout the site to allow our clients to ask whatever they'd like and build additional content using copy on how our clients speak, not industry expert vocab... I have some problems with FB comments: Our answers only show to people logged into FB. For others it looks as if we don't reply. The data pulls from FB, so we don't own it and it is slower than our server. You need a Facebook, Yahoo, or Hotmail account...I want anyone to be able to ask a question. Can anyone recommend a script that accomplishes our Q&A functionality using our own database? Also, I'd like to allow anyone to post without a requirement of an account. If I had a WordPress site, I suppose this would be easier, as I'm sure there are various comment solutions, but I have a HTML\PHP based custom built site.
Web Design | | TheDude0 -
How important is w3c validation for mobile sites???
So mobile sites are all the rave, but how many are doing it correctly and with all the different options which is correct or the best? For example I have a guy telling me that the mobile site must validate here http://validator.w3.org/mobile/ or here http://ready.mobi/launch.jsp?locale=en_EN However I have run many so called mobile sites like nike (m.nike.com) and those built by dudamobiles and all dramatically fail the above tests! Responsive is another key element of web design and the guys at twitter came up with bootstrap, so I ran these sites through the above validators and all have failed. I take this site as an example from ilovebootstrap.com, please note this is not my site but was top of thelist on here. Mobi Ready 2 / 5 - result poor mobile experience Results from google pagespeed Mobile 62 / 100 Desktop 83 / 100 So while it looks good on mobile devices it does not score well If you look at the google site: http://www.howtogomo.com/en-gb/d/why-get-mo/ The case studies listed all fail the validation tests, so my question is is it worth getting our mobile sites validated and will this affect rankings?
Web Design | | iprosoftware0 -
Will upgrading my dedicated server improve my site speed
hi, at the moment i am concerned about my site speed for www.in2town.co.uk My hosting company is tmd hosting and my package is Intel Atom 330 1MB L2 Cache 1.6GH $159/mo $189/month500GBStorage4GBRAM10TBBandwidthi am looking at increasing this to**$219/mo** $289/month500GBStorage6GBRAM10TBBandwidthcan anyone let me know if this will make a difference to my site speed please
Web Design | | ClaireH-1848860 -
Examples of e-commerce sites using ajax faceted navigation?
Does anyone have examples of e-commerce sites successfully using ajax to power faceted navigation?
Web Design | | ao.com0