I am starting a new project which requires content managment and have decided to use dotnetnuke which I have never used before and a concern of mine is the use of media queries for mobile devices.
Can I use media queries in a dotnetnuke skin and does anyone have any examples / tutorials of this in use? I have looked everywhere and cant find any information of dotnetnuke utilizing media queries.
Thanks
There's a free skin available on the DotNetNuke Store that demonstrates some mobile skinning concepts. But, ultimately, you should be able to include media queries in your skin's stylesheet without doing anything special. Is there something specific that you're running up against?
You'll probably want to include a viewport <meta> tag, which you can do like this:
<%# Register TagPrefix="dnn" TagName="Meta" Src="~/Admin/Skins/Meta.ascx" %>
<dnn:Meta runat="server" Name="viewport" Content="initial-scale=1.0,width=device-width" />
Related
Is there any specific html tag or meta tag that tells a web page is designed for mobile devices? I have created a mobile sitemap linking the mobile web pages, but I am afraid of search engines don't identify these webpages as mobile versions.
I Recommend using Media Queries in your CSS and focusing on developing your mobile website first if you're going to use this technique.
Basic Example
#media only screen and (min-width: 480px){
//insert styles SPEFIC to resolutions greater than 480px wide
}
Regarding the comment:
//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
#media only screen and (min-width: 480px){
display: inline; //or block or whatever you want
}
there may very well be a different or better way to implement this, but the point is...
If you are trying to control the look/feel of your website, do your best to keep it in the stylesheets
pro tip: You will want to use em / % based widths to ensure your site responds to your users browsers properly
Check out a working example with HTML5 Boiler plate here.
And Media query browser support list here
Additionally, if you are concerned about tracking your user base, Google Analytics can do that for you. You can break down your traffic however you'd like.
No, there is not. You can use JavaScript to detect mobile browsers, and direct users to special mobile versions of your webpages, but there is nothing that says for a specific page this is for a mobile browser.
If you are concerned that you will be presenting duplicate content to Google, block the spidering of your mobile site via a robots.txt file, then ensure that mobile users are always redirected to the correct mobile site.
If you're concerned about styles and things then see How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?
Else, if you don't want search engines linking to m.domain.com instead of domain.com (or whatever) then I'd think about doing some PHP header detection to redirect to the main site.
To ensure they're not crawled at all so will never show in search results, add
<meta name="robots" content="noindex" />
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
My company has a enrollment website that is currently in DotNetNuke. I've been directed to "strip out nuke from the site" but from everything I've read it is the opposite that the site is in dnn not the other way around.
Has anyone had to migrate a site from dnn and if so can you point me towards some resources or give some insite to get me started?
The site is dnn 5.04
If you want to strip things down to absolute bare bones (HTML, images, JavaScript), you could use a tool that basically copies down an entire website to your local machine, such as HTTrack.
Download the app, give it your DNN website's URL, and it'll spider the entire website, download each page individually, along with any of its images and scripts. You'll be (theoretically) left with a full website containing all your content pages, which you can edit in a plain text editor.
All the user management, role management, content management, admin only areas, protected content, etc. will not carry over with this method, but that will be the case regardless if you're moving from DNN to a normal static HTML website.
An "enrollment website" sounds more like an application than a static HTML site and if that's the case then just grabbing the rendered HTML isn't going to be the best option as you wouldn't get any of the functionality. My approach would be to first find out why they want it pulled out of DotNetNuke. Perhaps it was poorly implemented and they are blaming DNN when the problem was actually how it was built. DNN may be a good solution and it might be best to convince them to leave it as DNN but improve the implementation.
If you do need to pull an application out of DNN and the enrollment piece was built as a custom module, it should be fairly easy to convert the ascx files of the custom module to normal .net User Controls.
If the Enrollment application was built using a Forms Module of some form, then you will likely need to rebuild it from scratch.
I have designed my site with a 900 x 600 fixed background image. On the computer it looks fine. How will it look on a PDA device? Will I have to design it separately for PDA?
How should check whether my site can be browsed effectively from mobile phone?
What should I do?
Try using Opera's "small screen" view (View > Small Screen). This does a pretty decent job of simulating a mobile screen. Try it on Opera's own site. Note that they use a "handheld" type stylesheet that kicks-in when you're viewing on a handheld or switch to small screen mode.
You can download Google's Android SDK for free to test on.
To test on iPhone, see the iPhone Tester. There's a button on the bottom-right to rotate the iPhone into its widescreen state.
The OpenWave Phone Simluator is supposed to be good.
You can try the mobi online emulator.
The Windows Mobile 5.0 SDK for Smartphone contains "Windows Mobile 5.0 based Smartphone Device Emulator images & skin files"
Finally, some general guidance: Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices
Instead of browser detection, you can supply alternative stylesheets for handheld devices. With
<link rel="stylesheet" href="small.css" type="text/css" media="handheld">
The advantage is that you only need one version of your site, the difference lies in the stylesheets. You need one additional css, while with browser detection you would need different versions of every page in your site. The downside is that not all browsers support the media attribute for stylesheets. But the most modern browsers do, and the support for it is growing.
If you are interested, I recommend having a look at an A List Apart article.
BTW, if you are not using css yet, switch to it immediately, no matter which solution for your problem you choose. CSS rocks!
You can also get device emulators for the Blackberry range of machines.
Well, you could always throw some detection javascript in there to check the type of browser, then redirect to a different site that is formatted for mobile devices. This seems to be the norm for most sites.
Examples:
Digg.com
Twitter.com
Google.com