I'm running a very simple, brochure website on Wordpress and my client needs a mobile website.
I want to redirect mobile visitors from the desktop website to the mobile website. I do not have the technical knowlegde to re-design and re-develop my CMS, so I am planning on making a new subdirectory with mobile-optimized HTML pages and working from there.
Any thoughts on how to make a device-sensitive redirect?
Have you considered Media Queries ?
In that case you just editing the existing CSS file and don't need to bother with subfolders, mobile detection, redirects etc.
From a simple web search, I turned up this result: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ for a JavaScript implementation. It sets document.location to a different url if the width of the screen is less than 699.
I use this PHP statement to check for mobile browsers. I doubt I have all browsers in this function, but it is a start. You seem to have the know-how to make the basic theme, so this might be the route you're looking to take.
if (preg_match("/(mobile|webos|opera mini)/i", $_SERVER['HTTP_USER_AGENT'])) {
// Load mobile skin
} else {
// Load desktop skin
}
I am using mobileesp for php site and it works just right, it appears there is also now javascript available to do the same. Apparently the site has samples.
Hope this helps:
http://blog.mobileesp.com/?cat=8
Related
http://shapeandslim.com/
If we drag it through the chrome it show that it is responsive, also i have checked it in iphone5 safari, it works fine as well but when we try google mobile friendly test it just fails, only home page fails while rest of the pages successfully passed the mobile friendly test. Also the preview that it shows on google test page it seems like that the css is not being used. whats seems to be the problem here and how to solve it.
I had these same problems. I found that I had a robots.txt file that was prohibiting crawling of the folder that contained my bootstrap CSS files, so it wasn't rendering correctly for crawlers. I changed all of my fonts to ensure they are at least 16px. I also added the following to all of my images: class="img-responsive". I hope this helps!
From Google Webmaster FAQ
I have a great mobile site, but the Mobile-Friendly Test tells me that my pages aren't mobile-friendly. Why?
If a page is designed to work well on mobile devices, but it’s not passing the Mobile-Friendly Test, the most common reason is that Googlebot for smartphones is blocked from crawling resources, like CSS and JavaScript, that are critical for determining whether the page is legible and usable on a mobile device (i.e., whether it’s mobile-friendly). To remedy:
Check if the Mobile-Friendly Test shows blocked resources (often
accompanied with a partially rendered image).
Allow Googlebot to crawl the necessary files.
Double-check that your page passes the Mobile-Friendly Test.
Use Fetch as Google with Submit to Index and
submit your updated robots.txt to Google to expedite the
re-processing of the updated page (or just wait for Google to
naturally re-crawl and index).
Source https://googlewebmastercentral.blogspot.dk/2015/04/faqs-april-21st-mobile-friendly.html Question 6
The reasons according to Google as to why your site is not mobile friendly is because of the following:
Content wider than screen
Links too close together
Uses incompatible plugins
Another reason could be that:
This page may appear not mobile-friendly because the robots.txt file
may block Googlebot from loading some of the page's resources. Learn
how to unblock resources for Googlebot.
Google is Rendering your website as follows, I suggest checking the cache and CSS files accordingly. Make sure the view does now exceed the size of the screen
Check the link here for more insight on your page and how to fix it
Hopefully someone can help me out with this. I've been tasked with giving a mobile template an overhaul on a site that uses BigCommerce.
Does anyone know of an IDE or a windows based browser that would allow me to preview the changes that I make on the fly, preferably via Dreamweaver CC but this isn't a necessity.
Basically I want to completely revamp the homepage so that instead of having a mundane and dreary menu that take up the entire page, I'd like to change it so that I have responsive windows 8 like tiles that one could use to navigate the site.
Since BigCommerce is a paid service you are limited to what is available. You cannot simply download the site and run it on your localhost. I worked on one of those sites before, the best work around I found what to edit in google chrome's inspect element and console "F12" - this way you can make changes directly to the site to see how they render. But keep in mind, F12 is after chrome builds the page and will not match the actual code all the time.
I have made a wordpress theme of a site. I used Starker Theme for the wordpress theme development. Now I want to make my site Mobile Friendly. Is there any solution to make few changes or using some plugins for this purpose? I have tried wptouch, WordPress Mobile Pack and MobilePress but they are not working. I have checked my output on the http://mobiletest.me, but this is not displaying the accurate mobile Output (Output is same as on my PC Browser). Either there is problem in this testing site or plugin? All this make me confused.
Please let me know any other solution?
Thanks in advance.
You may not be checking your site properly. Make sure you have this line of code in your html head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without that line of code, your device will display the page the same as the browser.
I'm the developer of MobileTest.me, just want to clarify a few things.
As you have correctly noticed, mobiletest.me uses your PC browser's engine to render the website you want to test. This is by design as it was created as a tool to test responsive web design. The mobile devices are provided as an indicator of common smartphone resolutions.
If what you want is to send a different theme to desktop browsers and a different one to mobile devices then you probably need a wordpress plugin such as mobile detector. The problem with this approach is that if the plugin fails to determine the device browser correctly, it will probably send the PC version to a mobile device.
The other approach is responsive design which sends different CSS based on the resolution of a device and does not rely on browser detection. If you decide to go the responsive way you may find this post useful where you can check some examples of how mobiletest.me can be used to check responsive web designs (images are clickable).
I would like to ask how to force desktop behaviour in wordpress with mobile phones?
I have tried some plugins (http://wordpress.org/extend/plugins/wordpress-mobile-pack/, http://wordpress.org/extend/plugins/mobile-smart/, etc.) with no success.
I switched to desktop mode user agent on my phone with no success.
Wordpress site still shows in some mobile mode. Layout is different and some elements are even missing.
Any ideas? Thank you.
See, it all depends upon two things, first the theme you choose and then on mobile browser.
Let's discuss theme first, if its responsive theme, then it surely will change the layout of site and even might miss some div blocks.
And now a days most of the themes are responsive, they automatically adjust to mobile browser, even wordpress default theme twenty eleven and twelve are responsive.
Secondly, most of high end mobile browser are made to change the look of site, just to facilitate users and irritate developers (lol)
Well, i would suggest, please check it this theme responsive, if yes, make it static.
I just figured out how to do this. I found out accidentally that when you setup domain forwarding (and use masking) in GoDaddy, it will always show the desktop version of the site when you visit the domain on a phone. Now, you don't want to buy a different domain for every website you want to be "non-mobile". So, simply setup a sub-domain and forward it to your website (using masking). When you visit that subdomain on a phone, it will show the full desktop version. Hope this helps you as much as it helped me :)
Facebook has these social plugins:
http://developers.facebook.com/docs/plugins/
that can be plugged into a website very easily. They offer limited customization options, and I was wondering if it is possible to change the default CSS to allow custom fonts and colors, re-size images and re-arrange the placement of the buttons or comment.
The particular plugin that I'm looking at is the comments plug in.
Any help or reference that can help me out is greatly appreciated.
Using javascript, YES you can.
give the iframe a name and using prototype framework it can be done like this
frame1.$('mydiv').style.border='1px solid #000000'
and so on. It is possible with any framework.
Make sure you load this javascript after everything is loaded.
Try adding it just before the </body> ....
You're changing the style locally, not on the remote server. In other words, your browser retrieves the vanilla content from facebook and then the JS does it's work inside your browser w/o FB knowing about it... (might be counter-EULA?)