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
Related
I'm busy building a web page where I'm using HtmlEasy and Silken with Google Closure Templates.
With ASP.NET MVC4 there is a technique of serving a mobile version of a web page by changing the file name to .mobile.. So it is not just the same version served up using a different stylesheet - the contents/data too can be different. This is really great since not everything may be relevant for a person using a mobile device.
Does HtmlEasy and Silken provide the same or similar feature? I can't seem to find anything that'll help.
Ok, when you need to detect any mobile device then its better to make use of a database.
For my own project I'm using 51Degrees Lite. Pass the user-agent to the lib and it'll tell you if the device is mobile or not. Then serve your soy template(s) accordingly.
I am currently looking for a tool/workflow to support me in creating a mobile version of our website. Due to the main subject of our website, this should be a dedicated mobile version instead of a responsive version of our main site.
I came across yeoman and it looks really promising with a lot of features that I would be using like CSS and JS minifying, Spriting etc., a lot of tools that support me for the deployment of the webpage.
However as far as I can see the main focus for yeoman is on "normal" web apps, not for mobile. Am I right? Has someone used yeoman already for a mobile website and what was the experience and/or points to look out for? Are there any other alternatives to consider?
Try mobile-boilerpate generator for yeoman.
It scaffolds out H5BP Mobile Boilerplate
You are right Yeoman is for any web app you want to build; not just mobile specific.
For a mobile version of a website; they can be made similar to desktop sites although you still have to keep responsiveness in mind as not all devices are the same size.
In terms of a framework to consider, Lungo is a brilliant UI framework that can be used to make a native looking website.
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 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.
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook: