I am working on this responsive design for an ASP.Net website at work which needs to work with IE8 as well, Everything is working fine in every other browser except in IE8 the post back events make the page loading in Mobile view and then changing into desktop view pretty much visible to the user, which i assume is because Respond.js is taking time to kick into action.
Hence i am thinking to change the media queries in a way that the design works with desktop first. But i need to know is this the right way to go or maybe i should switch back to Bootstrap 2.3 or some other framework maybe. But i am almost in the stage of completing my design.
I can use separate style sheet, but the requirement is superfluously the responsiveness needs to work in IE8 as well.
Thanks in Advance.
Related
Developing in Web Forms I noticed that controls have different sizes and styles deppending on which borwser I launch the application. For instance, In IE the buttons and textboxes are thicker than those in Chrome.
Is there a way to make all of them look the same?
This is normal, many things on the web look different across browsers. If you are really committed to making them appear the same, use your own CSS rules to try and standardize the look, or implement 3rd party controls that attempt to account for this such as DevExpress or Telerik controls.
You should not try to make it all the same. You would confuse your users. chrome users do not expect to have thicker buttons. Most users have a favorite browser and they know its design. As long as you produce valid html and css, everything is fine.
I have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
i have developed my website in VS2010. is there any tool freely available which can help me to test my website with different version of different browser. i saw some time my site UI display ok in my browser but when it run in other machine with big screen then UI getting distorted. so i need some tool which show me how UI look with different screen size and resolution with different browser with different version all in one......please help me with info. thanks
Selenium provides a bunch of DLLs that you can use to write your own automated tests against several browsers (IE, Firefox, Chrome, etc). This, however, is not a complete solution since there are limitations as to the kinds of things that you can do - some browsers have better support than others.
You'd need to install all the different browsers that you want to test on the same machine where you are running your tests.
If you're developing web sites professionally I'd suggest getting a nice large screen (they're cheap nowadays) and installing all of the major web browsers (IE, FireFox, Chrome, Safari, etc.). Then, in each browser go to their extensions/plugin and look for a resize extension. This will provide you with a drop down menu to easily resize the browser to standard screen sizes or any other size you like.
I typically choose a "master" browser and do my work in that. Then, after I've completed a section/page/area I check it in the other browsers to confirm it works.
Avoiding CSS padding combined with width/height can help as some older browsers use a different box model. Margin can be safer but you should read up on box models if you're doing any CSS development.
Before i start must explain that I'm relatively a noob with less experience in web development. A certain site that I'm developing requires and swipeleft and swiperight functionalities for touch based devices namely iphone, ipad, android phones and tablets. To implement this i was suggested to use jQuery mobile and it sounded good as I'm a fan of jQuery.
However despite all google could give me, I'd request clarification on the following
Does the doctype compulsorily need to be html 5 as it uses
attributes like data-role
My site uses jQuery and jQueryUI heavily and will jQuery mobile
distort the actual design layout implemented.
I can't seperate view layer for mobile and regular traffic.
If jQuery mobile is good for mobile based usage without
affecting normal design and functionality what will be the best
ways
of testing the site for multiple touch based devices (simulators
maybe).
Some details in simple english from this great place would be wonderful...
Thanks in advance!
EDIT
To further dig into my problem will a jQuery plugin for swipe functionality like touchSwipe or wipeTouch help me here.
Also what would best methods to test the functionality from an iPad or an android phone provided I've implemented the plugin with my code. Say some plugin just like IE simulator for firefox that could recognize swipe gesture through mouse drags (Just greedy and desperate)
Thanks again...
If you really want to separate views for desktop/mobile, I've seen recommendations here for http://detectmobilebrowser.com/ but I haven't used it. That provides code for doing it server-side in various languages or in JavaScript.
One of the main purposes of jQuery Mobile is to provide mobile-specific UI; so the styles will definitely conflict in all sorts of ways with your current templates if you try to just throw both stylesheets in there. If you just want to add swipe support on top of your current site then there are probably lots of jQuery plugins that could help with that.
Re: HTML5, From the jQM docs,
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
JQuery mobile is OK for web apps, but after doing more then on application in JQuery Mobile I would recommend against it for now. There are a lot of phones that do not fully support JQuery Mobile and you will run into issues with many of the methods, and the page layout in general. Most Blackberries, and many HTC phones do not support JQuery Mobile, as well as many other phones.
Detecting if you are on a desktop/mobile is pretty easy. Just look for a user agent on page load, and redirect accordingly. If you want I can give you a few ways to redirect based on user agents.
JQuery Mobile may distort the design that you currently have, if you do not format your page correctly. JQuery Mobile will add a lot of extra css, and working around this may prove to be challenging, especially with other JQuery elements. Dialogs are one example of something that JQuery Mobile will do differently from JQuery
The best way would be to test through emulators. Google Chorme has a Ripple add on that I tend to use, though it is not the most reliable. Because there are so many different phones, sometimes it is just easier to try to test on as many live ones as you can (different versions, platforms, ect may behave drastically different from each other with JQuery Mobile)
What are your techniques to using mobile with asp.net, I know how to detect mobile but I'm stumped trying to find a good way to show my pages on a mobile device.
I'm thinking of just doing a Multi-View and showing the mobile view when they are mobile, however that would not work with our masterpage unless I do same, I'd rather just have the page redirect to a mobile version.
But I'd like this to happen automatically, don't want to add the code to every page, I've used an HttpModule but it causes every object in the website to use it, only want this on aspx pages so I just used a user control that it put on the top of the master page.
I also added a folder called mobile in the tree that contains folders for each mobile device, so if they go to ~/Account/Login.aspx it redirects to ~/Account/Mobile/IPhone/Login.aspx but i had to exclude the masterpage in the mobile device or it'll be in an endless loop :)
I like the way MVC does it where they have a custom ViewEngine that just redirects, but I can't go MVC due to some ASP.NET controls that my company requires.
Ideas?
It very much depends on the particular site and what has prompted you to consider having a mobile version of the site. How much content do you have that is unsuitable for mobile browsers (e.g. Flash, AJAX) ? How complex are these custom controls that you mentioned?
Personally I think it is best to try to design your main site to be compatible for people browsing on more recent smartphones (e.g. iphone, Android) since they are becoming very popular and increasingly capable. These phones have browsers that are normally based on WebKit so testing in Chrome or Safari would give at least some idea of how well your page would work.
If necessary then you could use slightly different stylesheets for desktop and mobile. You make the page more accessible by hiding unimportant content and simplifying navigation.
ASP .NET actually has a complex device filtering system built in, so you can change parts of the page, even the master page to use, depending on the current browser. See here: http://ryanfarley.com/blog/archive/2008/08/14/more-on-device-filtering-with-asp.net-server-control-properties.aspx. You just need to make sure that your browser definitions are up to date.
Avoid complex ASP .NET controls like GridViews since you have less control over the HTML and CSS. Controls like the ListView are much more flexible.
Some functionality like AJAX might be a bit buggy on certain devices, especially if you are using AJAX UpdatePanels. You could use an emulator to test these scenarios. Alternatively you could disable these features on mobile devices. That's assuming your even using them.
To accommodate low end devices you could have a separate mobile site that runs in parallel. To create mobile pages, you inherit from System.Web.UI.MobileControls.MobilePage instead of the normal Page class. W3Schools has some useful information: http://www.w3schools.com/dotnetmobile/control_mobilepage.asp. Note that mobile web forms is now deprecated though so it is not considered the way forward.
If you are going to run two or more sites in parallel and you have complex logic needed by both then you could create a class library to hold the shared functionality. It would cut out some code duplication.
To avoid an infinite loop when redirecting to the mobile version, just check the current URL to see if it contains the base URL for the mobile site. It might be easiest just to do the redirect on the main page but have a link somewhere on every page that goes to the mobile version when clicked.
Overall it is a very complex subject so perhaps consider getting a suitable book.