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)
Related
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
I'm struggling to understand what width size to design my mobile theme in. A previous design company drafted me an app design and it was all produced using a 640px wide template, this is the ideal size I want to create my new theme in because it works well with the outline icons I want to use which are 48px and this is the right size for the Navigation Bar.
However the coder who will be putting the mobile theme together has suggested I produce the theme at a width of 1080px which is almost double the width size I am currently using and I will not be able to size up the icons to fit this size.
I'd really appreciate some advice on this, I've read that it's also an option to create multiple sizes which automatically convert depending on which device is used.
It depends what kind of application are you talking about. If it is a website, then 320-480 is the ideal for portrait, around 640 for landscape.
If it is a native application, then you might want to use 1080p, because modern mobile phones support full HD apps. Therefore it will look much nicer & crisper.
Also you want to think about if its going to be responsive ( adapting to screen width ) or not.
I have a mobile game developed by U3D and NGUI and targeted to platforms such as android and IOS, but there are so many mobile resolutions and aspect ratios change from 1.3 to event 2. My UI are designed under resolution 1136x640, and UIRoot Scaling style is FixedSize, Manual Height is 640.
I am not going to use anchors in NGUI widgets because distance is defined in pixels but not in percentages, when resolutions are changed, relative position of widgets are also changed, this is not what I want.
I refer this but still have no idea to handle this tricky problem perfectly, I need some suggestions on how to use NGUI in right way to handle different mobile resolutions.
The newest (3.x.x) NGUI allows you to use their new anchoring system. As you said, it is specified in pixels, however you can specify different targets and distances to different edges, and it will behave similarly to percentages.
Are you familiar with NGUI team videos explaining their new releases?
https://www.youtube.com/watch?v=6k5iIzKTEBQ
Some of the information there could be helpful, and playing with Custom settings of anchors either.
Another useful things is to create scaling script attached to root, which scales all elements down, basing on the detected dpi. If your UI is prepared for phones, you probably won't need all the buttons to take the same percent of the screen on tablets.
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/
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.