I am about to help a client develop a mobile version of their EPiServer site. The mobile version should have different functionality than the regular but some content might be shared so that it won't have be maintained twice.
I'm thinking about using jQuery Mobile as the user interface system to reach as many users as possible with the same solution and possibly 51degrees.mobi for best detection of mobile devices.
Does anyone have any experience in how to do this with EPiServer? How to structure? I'm thinking of using a sub-node (/mobile) that gets hidden on the regular site but I'm not sure it's the best solution.
If you want content in one place without having your editors work with "Fetch data from" a sub-node won't work.
The best option is probably to have "one content serve all" and have a cookie that says "mobile" OR "full site". The default mode can be determined by detection. If mobile is selected then you serve different CSS/JS or even other page properties or functionality.
Another option is to make use of the globalization mechanism and add "Mobile" as a language. This could be an easy way for editors to create separate mobile content if needed and keep the original content for other pages. I recall you can add different top domains for different languages without violating the license agreement so you could have a .mobi-name for the mobile "language".
Take a look at the following blog post:
IPhone Optimalization Made Easy
It demonstrates how to build mobile-friendly websites using HTML, conditional CSS and jquery - all in EPiServer
Have a look at this: http://www.epinova.no/blog/Anders-Murel/dates/2012/5/flexible-episerver-mobile-content-strategy-with-epinovamobiletemplateprovider/
Related
I'm trying to create a mobile version of an already existing website. I've tried to read the previous questions on SO but they don't entirely give me all the answers I'm looking for.
The options I have to make my site more mobile friendly are:
1) Convert my current website to be more responsive using CSS Media Queries:
I don't think this approach is suitable in my case, as the UI is fairly complicated and there is more information that I can properly show on a mobile. I will need to make sure I don't show some information that is not as relavent on the mobile.
2) Use php detection and serve up different versions of the same page by using different templates:
This way I can show only what is most useful on the mobile version and load up additional css which specific to mobile. A lot of websites including StackOverflow/Imdb seem to be going this route.
If i go this route, Is it necessary to have a subdomain such as m.mywebsite.com and serve a mobile version on that? Or can i just serve the current page with the same domain and url structure to mobile, only different html/css to better suit mobile. I would prefer to not have the subdomain(StackOverlow seems to be doing this). Also will this be confusing to users and something to avoid as a best practice? Most importantly, how will this affect the SEO for the site? Since some content is missing on the mobile, but present on the desktop, with the same url structure - will it trigger a red flag in search engines and penalize?
Thank you!
Regarding option 2:
There's no need to do the m.domain.com subdomain thing anymore. It makes life much more confusing.
I use the mobiledetect php library (there's a wordpress plugin for it too) to determine the client.
Then use conditionals in your php to provide different content for each.
Regarding indexing, the crawlers will not be flagged by mobiledetect as mobile browsers, so they will index your desktop version of the site. You want this, as the desktop version will no doubt have more content and provide increased page rank. The crawlers will never know that mobile-only content exists so there won't be any penalty.
I have a site made by dnn6.i need to add the mobile version of the site.how can i solve this problem.or is it possible to convert mobile compatible site.
There are several ways to accomplish this. You need to evaluate each and determine the best route the most closely matches your goals and amount of administration that you are comfortable with. Another thing to keep in mind is the user experience you end up delivering to your visitors.
Probably the most flexible solution is to use responsive web design to adjust and change the content and layout according to the dimensions of the device that is currently viewing the site - regardless of the kind of device we're speaking about. American Athlete Magazine is a great showcase for this approach.
You can also have a mobile section on your main site, or another site altogether that displays content optimized for mobile viewing. In this scenario, you would create a mobile friendly design that offers the best user experience for mobile visitors, as well as maintain content in a way that is equally friendly. Then, redirect visitors to the mobile site or mobile section of your site using the built-in redirect tools. They are in all editions of DNN as of v06.01.05. An example of this method can be seen with Day of DotNetNuke and its mobile variant.
There are of course other ways to proceed, but these are the most common. In either scenario you can use content sharing to make maintaining content easier, but you really should balance ease of administration with the expected user experience of your visitors.
There is a lot more information about the mobile capabilities in the DotNetNuke Wiki.
There are different approaches like Will stated above.
You can create a child portal (yourdomain.com/mobi or mobi.yourdomain.com) and modify an already existing skin (check out codeplex for MIT license mobile skins: http://dotnetnuke.codeplex.com/site/search?query=mobile%20skin) You'll need to put in a redirect in so when a small display pulls up the site it takes the user to the mobile version. The problem with a child portal is that you will have to maintain two separate versions... so if you plan to make many changes, consider option 2.
You could also upload the mobile version of the skin to the root portal, but you'll need to make a skin adjustments as you'll want the mobile skin to pull up a dynamic menu. If you choose this path, you can use the same instances of modules on separate pages (so you only have to make changes once and it will replicate on the desktop skin and the mobile skin).
You can wait a little while... DNN 6.2 is going to be released with mobile redirect capabilities (currently only found in DNN Pro and Enterprise). I'm not sure if DNN is releasing a mobile skin with the new version.
If you need help, I'm happy to bill you for the right solution :) ack !!
I am building a website both mobile and pc version.But I am in a fix what should be used to do it.I have some question for which I am confused :
1. make a website with separate mobile version and pc version and render page depending on the device users use ?
2. Another is a single version website that would be all device compatible.this can adapt the layout according to the device resolution ?
3. if I do the thing I mentioned at point 1 , Can I built a site with wordpress and mobile version with jquery mobile ?
4. If I use a mobile compatible wordpress template I mentioned in point 2, can I use all other plugin form outside?
Please Help me.Thanks in advance.
So what should I do? building two different version ?? if yes, Can I
use the wordpress for both? do you know any plugin or way to make both
pc and mobile version in wordpress ?
This is what I did to achieve what you are aiming for:
Install WordPress as normal.
Add the Mobile Smart plugin - or possibly mobile smart pro.
Create a theme for regular desktop browsers and activate it in WordPress
Create a completely separate theme for mobile browsers. You may wish to use the sample code supplied with the plugin; I created my own from scratch.
Change the settings of Mobile Smart so that it knows which is your mobile theme
Add content and enjoy!
Please read the documentation with Mobile Smart. It is important to understand what it is doing.
Also, remember that your two themes are completely separate, in completely separate directories, so you can use completely different functions.php, headers, footers, scripts, etc. as necessary.
Quote from https://github.com/ChristianPeters/crispy-mobile that I agree with:
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
Do you really want to compute personalized product recommendations if they are just hidden afterwards?
Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
If the mobile internet was fast enough and limits weren't as low as they are, I would probably think the other way. But we have to wait few years for that. For now in my opinion it is better to build seperate mobile website. But it is also very useful to have responsive design - that can't hurt even with separate mobile design.
I'm going to avoid too much subjectivity here, as everyone will have a different opinion.
Yes, I have this approach working well on my company website (www.achaleon.com). I was involved in the beta testing for a WordPress plugin called Mobile Smart Pro. It implements elements from a bigger open source project to detect mobile devices and apply a completely different theme to the mobile site. It has the advantage that you can create two completely separate themes and optimise every aspect of them for the device and the context in which it is being used. You can even serve up different content if you wish in the two versions.
This approach requires careful planning and thorough testing. It is also more demanding for the designer. I have friends in the WP community who have built sites this way. My understanding is that this requires stronger programming skills (you need to plan far more carefully than with a standard 'static' css implementation). They used cssgrid.net as a start point
I am evaluating open-source CMS systems to see which one(s) would be the best option to deliver rich mobile web based applications for mobile handhelds.
So far I am leaning towards Drupal because it seems to be the most extensible, flexible, best performance (cache & compression, etc) and has a good user management system.
The CMS must be able to deliver HTML content that is ideally rendered for most smart handheld phones. I have to assume most if not all would do so as you would just control the front-end (headers, CSS, HTML and javascript) to ensure it renders correctly...correct?
So, it Drupal a good option? And, is there anything else I am missing when choosing a CMS to deliver mobile web pages?
I think it depends on what kind of "rich mobile web based application" you are talking about. As far as rendering the front end for mobile devices go (such as screen size based UI etc.), so long the CMS allows you to control the stylesheets and JS flexibly that's all that matters.
The choice of the CMS itself depends on your own level of comfort also. Do take a look at Joomla! too
I think Drupal is Ok for your application but it has no built in support for mobile. I have worked with drupal but not with mobile web apps with Drupal. But Check this. It seems we can control the things as you expect.
Update: Check this as well
One thing to watch out for with Drupal is that the theme engine tends to be quite verbose. If you take a look at pretty much any Drupal site in something like Firebug, you'll quickly notice that it's full of nested-nested-nested-nested divs.
This makes it great for theming, since there's almost always an element, with a unique ID, to apply your CSS styles to. The downside is that it presents heavy, complex pages that could potentially cause problems for mobile browsers.
I'm working on an ASP.NET website which targets desktop browsers. We want to enable an optional mobile view (e.g. http://m.sample.com) which will offer a few simple pages which will be mostly text. There will be not need for AJAX or even Javascript, and there's no user input - it's really just tables of text with a few links to navigate between the pages.
What's the best way to set this up so it will work on Blackberry, Windows Mobile, and iPhone?
Should I be looking at ASP.NET Mobile support, or just rolling my own pages?
UPDATE: This was for m.microsoftpdc.com. We went with the /Mobile subfolder approach, and used Scott Hanselman's iPhone tips for viewport and other stuff.
I have done this in the past and the way I did it is by separating the pages by creating a directory for Desktop and creating a directory for Mobile. This gives you better separation of the views, since in reality they are a lot different. In ASP.NET Forms I used the Model View Presenter pattern a lot since it went with the way ASP.NET Forms functioned the best. That way I could reuse some code between the two views. Then in your index.aspx page for the site, you just parse the user-agent string of the request to figure out the browser and redirect accordingly. So, for example a person with an iphone comes to your site, you parse the user-agent string and figure out it is an iphone. Then you redirect to m.sample.com which is pointing to Mobile/Index.aspx page. Otherwise you redirect to Desktop/Index.aspx.
I did the parsing of the user-agent string at the page level, but of course you could do this kind of logic in the HttpModule or HttpHandler level also.
Edit
I just rolled my own pages since we weren't targeting phones that have WML support. That would be the only reason in my opinion to use the ASP.NET Mobile support, is if you want to support WML enabled phones also.
You have only identified 3 handset 'platforms' as your target. One thing to consider is that there are a LOT more non-Blackberry / Windows Mobile / iPhone handsets out there and perhaps they will be the majority of your audience. (?)
From how you describe your application (JUST text), you should be able to hit pretty much any Internet-enabled cell phone out there, which is pretty much every phone sold in the last eight years.
Rolling your own will likely give you more control over how the content is displayed and navigated, which your users will appreciate, but you will lose much of the automatic formatting and advanced interaction capability that something like ASP.NET Mobile may give you. It is a trade-off that you might want to consider in light of where you anticipate your user community will go with this in the next 2 years.
Is it possible that they may ask for more of the desktop capability on the mobile side? If it is a likely 'yes' (even more so when I think of the 3 platforms you are targeting) then I'd recommend some automated formatting / enablement tool like ASP.NET mobile. If not, just roll your own and leave it simple and easy for your visitors to use.
I know from personal experience there really isn't much you need to do for the iPhone. I usually rather just browse your regular site with my iPhone.
Just my two cents though.
Different style sheets based on user agent will handle the "pretty". Are you using master pages? You could also set up different masters based on the device using device filters.
At Mix this year (2009) mdbf was announced. See this video or this blog post by Scott Hanselman for examples on using it to identify and redirect mobile browsers as needed.