I have a fairly large dynamic website, whose user interface is written using XHTML, CSS and jQuery. The site does not display/work well on mobile devices. What is the best option: to develop a fluid site that displays well on both mobile and desktop, or to separately develop a mobile version of the site? Thank you for any suggestion.
Although a parallel site, with a desktop page and a mobile page is easier to build, it is harder to maintain (2 sets of content) and Google will see this as duplicate content - one of the sites won't rank in search engines.
A fluid solution, which displays the content well whatever the screen size (and if you use CSS & JavaScript wisely, it can look great on all sorts of screen sizes), is a much better solution, and you only have one URL for each page for your visitors to book mark.
Related
Based from what I've read, there are 2 common types of Website Design: responsive and separate desktop & mobile sites. Then, there's the hybrid that combines the two.
It's easy to distinguish a responsive website by resizing the browser. A website that uses "separate desktop/mobile approach" can be distinguished easily if the user is redirected to another site, similar to Facebook that redirects the user to "m.facebook.com".
Now what confuses me is identifying a hybrid website. How can one tell that the website is Hybrid?
Interesting question.
I think there is an easy way to find it out.
First compare websites on mobile and on browser, but make browser window same size as phone (around 350px width). If websites look same - most likely it's responsive. If you see some difference - it could be separate or hybrid.
Next find and open css file of the website (or all of them) and see if you could find any #media rules here. If you see some - it means that website do have responsive technique also and you meet the hybrid. If you don't see any sign of #media - you're visiting the separate made website.
Maybe I could answer better with having the link or more details
I've developed mobile version for my website. Every page in mobile version has the same title in original version. Search engines doesn't rank the pages with similar titles and different content for keyword. How can I solve this problem? I want to add " - Mobile Version" phrase in my mobile pages titles. Could it be useful? Help me please...
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=34648
Here is a link to some webmasters information on mobile site maps. Google can differentiate between mobile sites, and regular ones. Keeping page titles the same shouldn't ding you. Read more in their webmasters tools section. Almost everything is always documented pretty clearly.
I am setting up a mobile site that will be on a subdomain like m.somesite.com. The problem is a lot of the code, plugins, etc... are also required on the mobile site. It almost seems like I am cutting and pasting the site over, and all it has is a new skin...
The problem is since it is a subdomain I can't access code from the main site. What is a good strategy for developing a mobile site that uses a lot of resources from the main site? This just seems so wrong.
Try using [CSS media queries][1] You can have different css styles for different sizes for mobile and desktop sites
Is there a way to use responsive design principles with Google Sites. Has anyone tried that. Could you direct me to a sample site. I looked at this google help topic but then that is supposedly about exclusively mobile sites.
My main focus is a normal website which is optimized for web rather than primarily a mobile site.
Alternatively would Blogger be a better option in this case as that allows to change CSS.
I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.
The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.
Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.
To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.
There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.
As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.
Mobile yes, responsive no.
I was messing with Google Sites today and you can make a site mobile friendly (I had to come here to get started!). I just used the "Blank Template" to mess around with.
You do need to activate (like others that have mentioned):
Options (gear icon) > Manage site > (scroll down to Mobile) Check.. Automatically adjust for mobile phones. Yeah, let's bury that option way down at the bottom!
Considering the whole mobile "push" Google implemented in the spring of 2015 this should be ON by default for any newly created Google Site.
Just selecting that option makes an OK (basic) mobile site. Not a responsive site. So on my iPhone it does scale photos correctly to fit the device and switches the main horizontal menu to the "hamburger" icon/menu. But collapsing the desktop browser window does not produce responsive results.
https://sites.google.com/site/rwstws51/
As a test, I uploaded a way too large photo (2.5mb) to see what would happen. Running the site through Google PageSpeed Insights it did not display any "optimize photos" warning, so seems to serves up an optimized photo for phones and desktops.
I guess the basic theme is actually called "Ski." I tried out the "Legal Pad" theme and it was totally borked on mobile. I think due to the header and content area background images.
To me Google Sites is ideal if you are already heavy into Google's other products... drive, docs, Google+, webmastertools, analytics, etc... As it has links to add those types of items when editing. Or need a quick site for collaborating as you can easily set the site access like YouTube,Drive items.
Also, you are very limited as to what html you can added. Trying to add a script tag gets stripped out when attempting to save. So again depending on the use there are definitely other options out there.
The answer applying to old "Classic" google sites is NO.
If you create your own custom HTML forms with apps script, you can add the #media viewports etc to the css for those pages/forms,so that helps...
but the google site frame around overrides custom css attempting
responsive design at the page level.
now a days its possible to make a responsive Google Site. since Google has enhanced this feature "Automatically adjust site to mobile phones" option in the Manage Site option button.
to find the option- go to> Manage Site> General> , in the general settings page's lower portion you can see a radio button named "Automatically adjust site to mobile phones". Just tick the radio button & u have enhanced the feature.
Refer an example site made with responsive Google site www.jyotiprokashmusic.com
I would like to add value to my website that I have developed at the moment so that user can check on their mobile phone.
My questions:
Should I make different template for mobile version and full version one?
Like creating mobile.example.com for mobile version?
Does Opera Mini not support JavaScript? I have a mobile phone that has Opera Mini, it seems that JavaScript was not running. Do all Opera Mini not have JavaScript on it?
Does Opera Mini support full W3C standard HTML and CSS? Or do they have a different one?
Is there any emulator to view or test website in different mobile phones? For example: Iphone browser, Blackberry browser, WAP and Opera Mini.
Thank you!!!
Some websites offer an automatic conversion of your existing website. This converted, mobile friendly website can either be hosted at a new domain, or a "mask" can be applied over your existing site. Check out www.webtosmartphone.com, which easily converts basic websites automatically; a quick line of code and your website will be automatically resized and viewable in the most popular smart phones. If it is not converted automatically, you can request for a custom conversion.
It's up to you whether you want to make two different websites for mobile and non-mobile devices. However, if you do so, make sure to have a link from the mobile site to the full site to enable users to switch to it.
Opera Mini does support Javascript which certain restrictions (eg. on asynchronous operations). Be aware that Opera Mini uses a proxy based approach and the JS is executed on Opera's servers which imposes certain restrictions. Plugins like Adobe Flash are not supported.
Basically, Opera Mini supports the same standards as Opera Desktop since they share the same rendering engine (Opera Presto). However, due to device restrictions, some features like CSS rounded corners are not available in Mini. See Opera Mini 5 standards support for more information, but know that meanwhile Opera Mini uses Opera Presto 2.4, the rendering engine used in Opera Desktop 10.53.
For testing websites in Opera Mini, try MicroEmulator which is Open Source and comes with a resizable skin that allows you to emulate different screen sizes.
Hope that helps :)
You should most definitely adapt your output for mobile devices when the content is accessed via a mobile device. Whether you will do it by separating the mobile presentation on a subdomain or a special folder or not is totally irrelevant.
/ 3. Mobile is way more than just Opera Mini. Various mobile device browsers support various degrees of rich content (JavaScript, CSS etc.) You should look into detecting what features are supported by the visitors browser/device and serve the appropriately rich/"poor" content. You should take a look at WURFL and Device Atlas which are two main databases of mobile device useragents which allow you to serve only the content that the useragent can consume.
There are many emulators out there, some better and some worse, that emulate various mobile device browsers. Off the top of my head, the two I've used are Yo Space SmartPhone Emulator (website broken atm) and Mobi TLD's emulator. There are also vendor specific (Nokia, SE) developer tools you should be able to find that emulate the vendor's devices.
Cascading Style Sheets (CSS) are the way to accomplish this. It does mean that you will need to review your site's use of HTML tables, and convert into a CSS based design.
The CSS Zen Garden is an excellent resource for showing what is possible.
A resource to convert your current
site into a mobile device friendly
format is Skweezer.com. Simply enter
your website's URL, and it will
display your website in a
mobile-friendly version by removing
large images, CSS styles and page
elements that will not display
properly. You can use this as a
template, or starting point, for
making a mobile CSS profile for the
site. To provide an alternative CSS
stylesheet for users with mobile
devices, insert the following code in
the head of an HTML document:
<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />
Ref.