While investigating the Google SEO issue with respect to not having a mobile web site. I've learned recently that lack of proper mobile site would reduce the search ratings, and a different content for a mobile and a desktop sites might hurt your SEO as well.
Currently we have a MVC site that wasn't designed to be responsive. I don’t want to create something that will require more maintenance. (IE new mobile site or creating new views for mobile versions..).
I've learned that converting the site to be responsive is technically possible but not recommended for the following two reasons:
The current site might not work well on small screens.(CSS issues, modifying the CSS might be a pain and risky).
We have too much stuff on the current site.
While googling, I found that this would be the best way to go.
Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option will require new CSS and new _Layout page for mobile devices.
and then modify the _ViewStart to be
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
I would like to proceed with above approach, but If any one has any experience in this area, I would like to know the best practices, recommended approaches, and technical possibilities to achieve this.
There are typically three methods for handling Responsive Design :
Using A Responsive Design Framework
Using CSS Media Queries
Using Percentages
The ease of using each of these will ultimately be based on how complex your existing Project is and how much you are willing to do and change to make it responsive.
Consider a Responsive Design Framework (basically revising and updating all of the markup of your existing project)
This will allow your site or application to run on basically any device (and look nice doing so) regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.
It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap.
These could fairly easily be integrated into a Web Forms, MVC or Web Pages and would basically be all that you would need to use :
Great MSDN Article on Responsive Design
Tutorial on Integrating Twitter Boostrap into ASP.NET Web Forms
Beautify your ASP.NET Application with Twitter Bootstrap
The primary issue with using a framework here is that you already have your site designed and up and running. These frameworks work incredibly well when you use them from the beginning of the development of a project, however they will require a great deal more work when attempting to migrate an existing project to use them.
These frameworks have very specific classes and styles that actually do a ton of different things regarding responsive design and you'll have to use these new classes to replace basically all of your existing ones. It won't be the easiest migration, but it is certainly isn't impossible by any means and would be my recommendation.
Using CSS Media Queries (a neccessity if you want to handle creating this responsiveness without a framework, but more work on your part)
You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.
These will take a quite a bit more work than using a framework as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually resize some of your elements manually. You'll have to basically create a mini-stylesheet or media query for each of the resolutions that you want to target and manually enter the values that you want to use for that specific resolution.
I've done this more "hands-on" form of Responsive Design previously, but it is much easier to let something tried and proven like one of the frameworks handle it for you. Check out the very simple example below that will demonstrate how CSS Media Queries work :
<style type='text/css'>
/* Only affects 1600px width */
#media only screen and (max-width: 1600px){ body { background: green; }}
/* Only affects 1200px width */
#media only screen and (max-width: 1200px){ body { background: blue; }}
/* Only affects 900px width */
#media only screen and (max-width: 900px){ body { background: yellow; }}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ body { background: purple; }}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ body { background: orange; }}
</style>
and as you resize your browser / window, the styles will be applied accordingly.
Example (Editable Example)
Using Percentages (another option to provide a "responsive" feel, but it will require CSS Media Queries as well to be truly "responsive")
You could also consider migrating everything to use percentage-based sizing instead of explicit pixel sizes, but this is will be even more work than implementing the above media queries.
This will basically require you to scale everything on your site using percentages and defining minimum and maximum heights and widths for items. You'll likely have to use this in combination with media queries to get a truly effective solution.
ASP.NET MVC applications by default is responsive using Bootstrap.
http://weblogs.asp.net/jongalloway/two-free-video-courses-intro-to-asp-net-mvc-and-responsive-ui-with-bootstrap
Related
I have inherited a non-responsive website that was created using reactjs. It is a fairly large website, that uses fixed layout. I have been tasked with evaluating/measuring the risks/effort of making the current website responsive. As i see it, these are the different things that I need to evaluate/accomplish that will help me with my goal
Go from fixed layout to relative layout. This might include using a grid layout or something similar
Decide on the app's flow, look and feel on mobile vs desktop. By this I mean, how should the links look when viewed in a mobile phone (maybe a hamburger menu) vs links that are laid out flat in a desktop browser.
What does it take to make individual components that make up the website responsive using media queries.
My question is should I prioritize one over another for whatever reason? And am I missing anything else that I should be focussing on
Thanks
K
I found this library for responsive CSS on github and then I started to ask myself... is Elm responsive? Theoretically, Elm does anything that HTML, CSS and JavaScript can do... I do not see any ways to read inputs such as operating system or screen size. And there may be other factors I am neglecting.
Perhaps one can write a port?
I have seen at least one case, F# where outside effects or requirements are handled by comonads but that is rather sophisticated solution. Here is a blog on co-effects which talks about Context-aware programming. It sounds sophisticated, but it's exactly what we want in responsive web pages.
Image from Wikipedia.
Most of responsive design is going to come from CSS via #media queries, so the main job of Elm is just to output HTML that isn't hard to style (e.g. avoiding tables for layout or inappropriate inline styles).
If you're wanting to dynamically do something based on the screen size, you can use the Window package, which can either issue a Task to retrieve the current size or subscribe to resizes events.
In general, I would expect that the output of an Elm program won't conflict with implementing a responsive design.
Here you find a step by step instruction how to create a responsive page with Elm: Responsive Design with Elm Style Elements. It avoids juggling with CSS but adjusts the HTML output.
How can I make my application web responsive design that is already design for desktop PC using Trinidad Component in ADF 11g?
Is it possible for with Trinidad component design application that support web responsive design?
Responsive design requires some form of tidy HTML but most importantly a style sheet.
Style sheets are no problem in Trinidad. See the skinning documentation on how to customize your style sheet.
The HTML is a different story. If you are using Trinidad's core renderkit you will end up with a lot of tables. Not the best choice for responsive design. You could create your own renderkit... Never tried it, but I assume it's a lot of work.
If your application isn't too complex, you might might be able to pull it off just using skinning.
I'm looking into the foundation framework and downloaded the files. I noticed that there are defined Breakpoints for "small" "medium" "large" etc.
Is there a way to add additional Breakpoints? Specifically, I would like to define a few more for sizes the "small" includes such as a size for mobile phones and tablets vertical and horizontal.
Is there a better way than to just add more Media Queries as defined here:
http://foundation.zurb.com/docs/media-queries.html ?
I'm not using saas, just using the straight CSS and adding a custom.css file with my class overrides and custom CSS.
Foundation has those sizes set as (more or less) phones, tablets, desktops. The idea is the site design is flexible within those boundaries so it works for any size.
Inevitably you will need to tweak the odd design element to look perfect for some sizes. Add your own media queries to target those things.
You can add any code you want, overriding foundation ones, I personally think the approach from Zurb is very good:
Small: For smartphones
Medium: For tablets
Large: For desktop
Remember that Foundation latest version are "mobile first", so if a behavior is defined for small, is assumed to be for the other two levels, if is not overwritten.
As I said, you can add your code... just be careful to override properly... you don't need to edit SASS or get hands dirty on foundation's guts, just add your plain CSS code (and call it after foundation's)
So I realize one of the big problems currently in responsive web design is that you download large images when they might not be needed, like on a phone-causing a serious performance hit-which you also get to an extent with conditional loading with JS; so my question is couldn't I just load most of my images as background images within media queries and overcome this problem until something better comes around? Example:
/* base styles */
#media all and (min-width: 53.75em) {
header .inner{
background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}
Obviously this is completely non semantic, but could solve the performance issues right?
Yes, using media queries and background images works like a charm, so if it's a good fit for your project then by all means use it.
Using background images isn't always possible though.
If this is the case, one option is Adaptive Images, which will serve different sized images based on the visitor's viewport. It's easy enough to retro-fit to an existing site and check if it will work for you.
Another possiblity if you use Foundation is that they've just released something similar which looks really interesting: Interchange
Good luck!
You could look into using Adaptive Images if you really care about semantics: http://adaptive-images.com/
Also here is a good article about solutions for images and responsive design. http://css-tricks.com/which-responsive-images-solution-should-you-use/