I was seeing a website i.e. website if you give pincode and search, you will be provided with a listing. When i click on any listing the section shows up on map. But when i go on a mobile, i see that click works differently i.e. a section slides in. How is this done? does the same function work different in mobile and desktop?
Cool effect, no? So open up the site on your desktop. Open it in Chrome. Then open the Chrome Developer tools. I use right click --> Inspect. Then on the top bar of the dev tools on the left hand side choose the icon "Device Mode" Select a device like an iphone or something. Now you can simulate this (or any site) on a mobile device. Its not a prefect simulation, just size and shape and general touch screen events like swipe and touch.
The design of this site uses some sort of javascript library to manage the transition. I've used jQuery Mobile in the past and this is exactly what it does. I'm guessing Controls.js is the tool that's doing this here, but I'm not positive all the nuances of this site. There are quite a few JS tools loaded here.
What ever happened to less is more, sigh?
Related
I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.
I'm looking to embed an existing survey monkey survey into a webpage, following the instructions here:
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
which is working perfectly on desktop and tablet sizes, but for some reason not working on mobile (either on an android device or in chrome emulator)
The following steps appear to be working:
Loading embed script into the page
Embed script calls surveymonkey.com, and retrieves the SMCX script
SMCX.boot() is called
But, the survey (or its markup) does not appear in the page.
Has anyone else run into this issue? What other additional information can I provide?
The Website Collector used to work everywhere, but they changed their API and now document that mobile is not supported.
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
"Website Collectors display on desktop browsers only—not on mobile devices or tablets."
It's actually worse than not supporting mobile or tablets, their surveys don't even load on desktop browsers if your browser is currently 760 pixels or less wide.
The solution is to just iframe the web link in manually.
<iframe height="500" width="500" src="https://www.surveymonkey.com/r/XL3DDMS"></iframe>
In addition to the answer of using iframe, for iPhone, both in Safari and Chrome rendered a weird view (the spacing between each question is extremely large), and I finally tackled it by turn off the "One Question at a Time" option, hope this helps someone.
I can't figure out what is causing this issue on the BlackBerry Z10 where the mobile menu that I created for disinherited.com won't properly function as links.
The menu items won't click through to their href's or show their dropdown menus(javascript).
It works well on a number of other browsers and devices. This is just one that won't work.
Anybody have any suggestions as to what browser compatibility issues I might be missing?
The "About Us" link doesn't do anything for me (even on Desktop browsers).
I would guess that there might be some CSS (a layer maybe) that is interfering with the click/action event. I would suggest connecting remote web inspector to see what exactly is going on.
Did you know that BlackBerry 10 has some of the best remote web debugging capabilities?
Plug your device in via USB
Enable Settings -> Developer Mode
Open http://disinherited.com in the BlackBerry browser
from your desktop browser, open http://169.254.0.1:1337
You are connected to the live content, running on the BlackBerry, from your desktop browser. From there, you can inspect, debug, profile what your website is doing.
With respect to webpages and webapps using Facebook's Javascript and Server side integration...
Facebook documentation notes that the send dialog is not supported on mobile devices, but they don't indicate how they make the determination that the dialog will not be shown or how we can find out.
This makes it difficult to display some alternate functionality in the right cases. For example the iphone is out, but the ipad will display the iframe version. The Nexus 7 with Chrome won't do the popup, but it doesn't have "mobile" in the user agent.
Does anybody know the criteria? ie. Regex on the user agent, or some certain feature detection?
Right now I am using browser sniffing :-(
function isMobile(string) {
return /mobile|android/i.test(string || navigator.userAgent);
}
Which, for instance, doesn't account for the fact that iPad Safari will display this dialog as an iFrame (but not the popup).
Thanks.
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