Hi guys! I've been tasked by my company to figure out how to make one of our properties' websites (www.waterford-living.com) mobile friendly before the April 21st "mobilegeddon," and am in need of assistance! I've tried to do as much research as I can, but can't seem to find (or understand it enough to implement it) a script or template to use.
I tried using the iPhone alt plugin with the following script pasted into my Master template's header:
But was met with an infinite loop. I kept looking around and found MobileESP, but I'm not too sure how to add the code in, and would love a little bit of help!
You can perhaps consider implementing 51degrees https://51degrees.codeplex.com/ or wurl http://wurfl.sourceforge.net/ to be able to use an approach where you can use RESS to serve different HTML to different devices and then adapt the site to different devices based on device detection. This method may not necessarily be reliable since different browsers use other user agents for reasons only the vendors know about. So even though you're using a phone detection framework might get information that it's a desktop...
But it might be the fastest way to fix things on short term depending on how advanced your site is - Otherwise it might be worth considering retrofitting your site to be responsive without making use of WURFL or 51degrees by just defining mobile breakpoint and then re-style the site for small screens. That should do the trick...but it will of course take some work.
Hi Jan, thanks for the reply! I tried loading the 51degrees package (51degrees.mobiUmbracoPackage2.1.21.4), but was met with a "Server Error in '/' Application. Maximum request length exceeded."
(Stack trace: [HttpException (0x80004005): Maximum request length exceeded.]
System.Web.HttpRequest.GetEntireRawContent() +9693899
System.Web.HttpRequest.GetMultipartContent() +63
System.Web.HttpRequest.FillInFormCollection() +165
System.Web.HttpRequest.EnsureForm() +75
System.Web.HttpRequest.getForm() +12
System.Web.HttpRequest.get_HasForm() +9695295
System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +95
System.Web.UI.Page.DeterminePostBackMode() +69
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +130)
Not too sure why it gave me that - unless it isn't meant to be loaded as a local package or it's because it's over 4mb?
Please forgive my lack of experience - I'm trying to learn!
I'm only able to work with the online editor (http://www.waterford-living.com/umbraco/umbraco.aspx) - so is this even doable?
Our site is www.waterford-living.com and I don't think it's too advanced. It just seems really old school, and whoever made it, made it ages ago.
How would I go about defining a mobile breakpoint?
Hmm, I'm not sure that package is compatible with Umbraco 7.x - If you're familiar with nuget and visual studio you might be able to install the 51degrees framework using nuget - Not the package.
If you don't have access to the source files on the disk but only through Umbraco then using 51degrees or wurfl is out of the question. How come you can't access the source code of the website apart from within the Umbraco editor?
It's going to be even harder making it mobile friendly that way - It's not just a matter of pressing a "Make this site mobil" button even though managers etc. wish it was :)
You can learn more about retrofitting your websites styling so it becomes responsive here.
Even though you can access the stylesheets from the Umbraco backoffice in the "Settings" section you should be aware that if you have a developer doing the website for you then the next time he does a deploy the changes you're making will overwrite it - Writing this because it's not quite clear to me whether you're the original developer or not :)
Bummer, okay that makes sense. I'll work on trying to retrofit it - I didn't create the original site since I just recently started working here; the original developer put together their website ages ago, and all they have been doing since was adding in the content (blog posts, news, etc.) so no worries about it being overwritten.
Mobile-Friendly Version?
Hi guys! I've been tasked by my company to figure out how to make one of our properties' websites (www.waterford-living.com) mobile friendly before the April 21st "mobilegeddon," and am in need of assistance! I've tried to do as much research as I can, but can't seem to find (or understand it enough to implement it) a script or template to use.
I tried using the iPhone alt plugin with the following script pasted into my Master template's header:
<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/Android/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/Opera Mobi/i))||
(navigator.userAgent.match(/Opera Mini/i))||
(navigator.userAgent.match(/BlackBerry/i))||
(navigator.userAgent.match(/Nokia/i))||
(navigator.userAgent.match(/SymbianOS/i))||
(navigator.userAgent.match(/Windows CE/i))||
(navigator.userAgent.match(/BenQ/i)))
{
document.location.href='/potential-aps/iphone.aspx';
}
</script>
But was met with an infinite loop. I kept looking around and found MobileESP, but I'm not too sure how to add the code in, and would love a little bit of help!
My editing screen looks like this:
Cheers,
JC
Hi JC
You can perhaps consider implementing 51degrees https://51degrees.codeplex.com/ or wurl http://wurfl.sourceforge.net/ to be able to use an approach where you can use RESS to serve different HTML to different devices and then adapt the site to different devices based on device detection. This method may not necessarily be reliable since different browsers use other user agents for reasons only the vendors know about. So even though you're using a phone detection framework might get information that it's a desktop...
But it might be the fastest way to fix things on short term depending on how advanced your site is - Otherwise it might be worth considering retrofitting your site to be responsive without making use of WURFL or 51degrees by just defining mobile breakpoint and then re-style the site for small screens. That should do the trick...but it will of course take some work.
Is it possible to see your site online?
/Jan
Hi Jan, thanks for the reply! I tried loading the 51degrees package (51degrees.mobiUmbracoPackage2.1.21.4), but was met with a "Server Error in '/' Application. Maximum request length exceeded." (Stack trace: [HttpException (0x80004005): Maximum request length exceeded.] System.Web.HttpRequest.GetEntireRawContent() +9693899 System.Web.HttpRequest.GetMultipartContent() +63 System.Web.HttpRequest.FillInFormCollection() +165 System.Web.HttpRequest.EnsureForm() +75 System.Web.HttpRequest.getForm() +12 System.Web.HttpRequest.get_HasForm() +9695295 System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +95 System.Web.UI.Page.DeterminePostBackMode() +69 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +130)
Not too sure why it gave me that - unless it isn't meant to be loaded as a local package or it's because it's over 4mb? Please forgive my lack of experience - I'm trying to learn!
I'm only able to work with the online editor (http://www.waterford-living.com/umbraco/umbraco.aspx) - so is this even doable?
Our site is www.waterford-living.com and I don't think it's too advanced. It just seems really old school, and whoever made it, made it ages ago.
How would I go about defining a mobile breakpoint?
Cheers, JC
HI John
Hmm, I'm not sure that package is compatible with Umbraco 7.x - If you're familiar with nuget and visual studio you might be able to install the 51degrees framework using nuget - Not the package.
If you don't have access to the source files on the disk but only through Umbraco then using 51degrees or wurfl is out of the question. How come you can't access the source code of the website apart from within the Umbraco editor?
It's going to be even harder making it mobile friendly that way - It's not just a matter of pressing a "Make this site mobil" button even though managers etc. wish it was :)
You can learn more about retrofitting your websites styling so it becomes responsive here.
http://webstandardssherpa.com/reviews/responsive-retrofitting/
http://www.smashingmagazine.com/2013/03/18/retrofit-a-website-to-be-responsive-with-rwd-retrofit/
Even though you can access the stylesheets from the Umbraco backoffice in the "Settings" section you should be aware that if you have a developer doing the website for you then the next time he does a deploy the changes you're making will overwrite it - Writing this because it's not quite clear to me whether you're the original developer or not :)
Hope this helps.
/Jan
Bummer, okay that makes sense. I'll work on trying to retrofit it - I didn't create the original site since I just recently started working here; the original developer put together their website ages ago, and all they have been doing since was adding in the content (blog posts, news, etc.) so no worries about it being overwritten.
That does help!
Thanks Jan
-JC
Hi John
Sounds good - If you have doubts about anything then don't hesitate to let us know about it in this forum :)
Have fun!
/Jan
is working on a reply...