Our company decide to not support IE7-8 which is super good new year news And I want to apply zurb-foundation5 css to our existing medium size e-commerce site so mobile user can have better UX/UI experience. However, I realize that many elements such as html or asp needs to be restructured and duplicated if I want to make the site display well on mobile. This would cause slow speed of site experience and perhaps even some other issues. However, If I made separate site for mobile, I would have to maintain two sites!!
My question is
What are the pros and cons of making a separate site for mobile vs. merging responsive css to current site and modify, rewrite, duplicate, move around html/elements?
Pros of a responsive site:
A single codebase for a website can serve both mobile and desktop users.
Easy to maintain and change code for all users.
Cons of a responsive site:
The mobile version of the website loaded on smartphones has the same size and complexity as the desktop version.
The loading time will be much higher than the mobile counterpart.
I'd recommend you to go with adaptive design which most of the businesses are adopting these days. In an adaptive design approach, a server can choose how to optimally render pages, as well as enhance or remove functionality on the fly, based on the capabilities detected. It allows you to focus on different kinds of consumers with different device configutrations.
Adaptive design has following advantages -
It allows you to capture user intent based on user specifications.
The code need not be written from scratch for the mobile site.
The performance and load time is faster than a responsive website.
You can refer to this article for further reading - http://venturebeat.com/2013/11/19/responsive-design-adaptive/
One of the most compelling reasons for making a responsive e-commerce website is that Google recommend it!
Bear in mind Google's market share and that most of your SEO effort will be for Google. The following configuration is detailed by Google, the highlight is their own:
Sites that use responsive web design, i.e. sites that serve all
devices on the same set of URLs, with each URL serving the same HTML
to all devices and using just CSS to change how the page is rendered
on the device. This is Google’s recommended configuration.
Related
I want to make a mobile friendly version of my website, but I have this dilemma.
What is better? Use CSS3 Media Queries to make main website responsive or detect if user is using a mobile and redirect to a new one (for example m.example.com).
This really is depending upon what kind of website you are having. Your decision will not only affect the way your site is presenting, but also how you would deliver business strategies (if it's a commercial thing).
Responsive design will work just great with simple websites that doesn't really need too many detailed experiences. Company profiles, or landing pages will fit best with RWD.
Once you're building much more complicated application, you might need to re-think how the user will interact with even the tiniest part of it. Note that using RWD often require greedier resources compared to a dedicated mobile site. If you're dealing with e-commerce, social media, or some other mature applications, a mobile version is a way to go.
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 have an existing website for schools and colleges management which is developed in ASP.NET,C# and SQL Server.
Now I am planning to support for the mobile applications (like basic models from Nokia/Samsung and for opera mobiles). I know the normal site we can access through some of the devices without any change, but needs to be optimized.
I am preparing another version which will be only few required fields and easy navigation for mobile. For that which method I need to use.
Normal ASPX files with optimized HTML code.
Or using WAP controls
Should I use HTML 5
Please help me to decide.
I recommend using the HTML5 templates(includes Modernizer) that come with ASP.NET MVC 3 and the jQuery Mobile framework. Let the jQuery Mobile framework do all the multi-device heavy lifting for you.
jQuery Mobile Supported Devices
you can use normal aspx pages without any issue. only thing you need to optimize the file size.
you can develop better solution using HTML5 but only problem is, it is not supporting all the devices.this is used html5
or just use any from List of mobile frameworks
You can use normal ASP.NET Web Forms in conjunction with HTML5. Take a look at HTML5Boilerplate which includes Modernizr.
Use a combination of feature detection and CSS Media Queries to serve up the appropriate files, layout and images for a particular mobile device.
Do not fall for "Responsive Web Design" techniques that cost too much in terms of performance and esthetics (basically re-skinning desktop browser version of site and calling it "mobile-ready"); disclosure: this links to blog post from me.
Use ASP.NET Mobile Controls: ASP.NET Mobile Controls
.. (i.e. How to add mobile pages to your asp.net site)
You will build a few UI controls, in a short amount of time, specifically for all mobile devices and it will be a much faster and much better user experience on mobile devices.
The UI renders minimal HTML and you control what gets rendered, meaning much less bandwidth required. Even though I have a 4G phone, so many times we are in a building that does not give a 4G signal and I much prefer sites that have mobile-specific output.
The UI is mobile-specific, users will not have to zoom around the page left/right up/down and zoom in to be able to click buttons or elements that were made for viewing in 1024x768 or higher.
Users with the latest 4G and dual core phones, and that happen to have 4G connection at the moment can always switch their phones into 'full HTML version' if they want more functionality than what you build using the ASP.NET mobile controls. However, if you go the other route and adopt JQuery-based or HTML5 code, you are excluding all previous generation phones from accessing your web site at all in many cases (besides it being slower and not as good a user experience as mobile-specific rendering). Even if you decide to focus only on the latest phones, you will also have to deal with html rendering issues, cross browser compatibility, besides the slow and UI complexity issues.
Good luck.
Using .NET Mobile Framework is always a good option as well as Web Forms which will appear on all mobile devices regardless of carrier/phone model, plus lots of phones support ajax, and other client side scripting that'll work. HTML5 is a growing standard though, and when more phones start supporting it, you'll reap tons of the new benefits.
Model View Controller is always good to follow. Allows for scalability and for components to be abstracted.
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.