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.
Related
Frames/ Framesets has been deprecated.
Iframes are not recomended for various reasons.
Ajax is not always an option since one of the providers may not support it.
So how does one converge & display multiple html content from two different sources in a Asp.Net 4.0 or higher page as per modern HTML standard ?
Should i focus completely on ajax/partial page related development or continue using Iframe as a stop gap measure hoping they dont deprecate it too in the near future ?
well there was a time when even facebook was on iframe, now its all about partial responses. But iframes are not going anywhere soon ,we still get many of our client requirement specific to iframes and if it suits your need to achieve compatibility why are you confusing yourself with alternates.
besides that html5 has added some new spices to iframe so its clear that this thing is not going in bin.
so in the end , i would suggest:
1. Go for ajax/partial/jquery if you want your application to be both interactive & user friendly.
2. If compatibility is a big issue then go straight to iframes.
Regards
just wondering is there any free tool which can aid in making the GUI/interface layout of asp.net/html forms ? My forms mostly end up in being less user friendly and not good looking at all.
I have been using Bootstrap framework to get my design up to speed in no time. You can use this tool to get forms created in minutes. http://bootsnipp.com/forms?version=3
Why don't you try downloading the Firefox Web Developer Toolbar and use it to reverse-engineer some simple, good looking sites that you come across?
https://addons.mozilla.org/en-US/firefox/addon/61772/
You can use it to grab the entire CSS of any site, or hover over areas of a page and see the various divs and their associated CSS rules highlighted.
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.
I'm doing css for a website. I send the html and css to a guy, he puts it into ASP.net. The problem is that the transfer didn't end well for my code and it needs some fixing. The problem is that when I look at it in Chrome, or Firefox, or IE8, I get three completely different renderings. I spent a good amount of time trying to fix a drop-down menu that is supposed to appear while hovering over a link. The one he had in place from ASP.net worked in IE, kinda worked in Firefox, and was completely broken in Chrome (I haven't tested Safari or Opera.) Just getting it to look basically the same in firefox and chrome was a struggle. The html source is showing me two completely different pages as well.
Does anyone have experience with this? I know nothing of ASP.net, and it seems like the guy is modifying my layout with a wsyiwyg (I found tables used in random places, which I did not put there.) Faced with this, what is my best option? Is this fixable, or am I in over my head?
Many times WYSIWYG programs don't generate code that results in reliable, consistent renderings. However, there are a few things you can do to check your site's consistency.
You can use a program like Adobe BrowserLab (there's a free trial right now) to automatically render your page in multiple browsers side by side
You can use the w3 Validator to make sure that your code is standards compliant. If your code isn't standards compliant, then you will likely have issues across browsers.
Note that you can force asp.net to generate XHTML Transitional- or Strict-compliant code (if that's the standard you choose to implement) via the web.config file. Use the directive
<xhtmlConformance mode="Transitional"/>
if you want to enable this behavior.
Was your code rendering fine in those browsers before you sent it off to the .NET guy? If so, the programmer is doing something to muck up your work. ASP .NET won't change the way your code renders... it's simply the Windows equivalent of PHP (simply put).
I would suggest (if you haven't already) testing your code before hand-off to verify proper rendering. Take some screenshots, and if after sending your code to this developer things break, you can point out that it was working until he started messing with your markup. If that ends up being the case, at least you know it wasn't you. If it was, then we have more work to do. :)
Can you provide any samples?
The html source is showing me two completely different pages as well.
That sounds like your asp.net guy is doing something wrong there. You can use asp.net to do browser-dependant rendering, but it sounds more like his job is to just make the site render what you gave him, and it's usually better to get your html and css right to begin with.
The ASP.NET dropdownlist control has an arrow that you can click to drop the list down, that color of the arrow is tied to the users windows color scheme. This is not convenient for me and I'll need a workaround. However, I'm wondering if anyone knows (or has a guess) the strategy behind making that dropdown arrow tie to the system color?
Behind the scenes, the Winforms controls use the Win32 controls that have been in existence since Windows 3.0 (or was 3.0 still 16 bit? I don't recall). There is a lot of legacy under the covers, and back in the days it seemed to make sense to do it that way.
I actually think it still make sense today to enforce some level of consistency between the user interfaces of all the applications of a platform.
Really, the style of your dropdownList depends on your navigator. Some navigators offer more support for this than others. The same ocurrs with checkboxes, for example.
Browsers are responsible for turning form input tags into user-interface controls. Internet Explorer and other browsers do this by using the operating system's user-interface controls. "A web page wants a <select>? We've got that control already!"
The problem you're probably experiencing, however, is that Internet Explorer has notoriously poor support for styling those controls - and especially the <select> control. Other modern browsers like FireFox and Chrome provide better support.
At this time, the only options for IE are (a) to abandon the <select> element in favor of some sort of javascript-based component or (b) to wait for IE8 and hope it has better style support. Since it is very, very difficult to find a javascript <select> implementation which provides robust keyboard support, many people choose to just live with ugly <select> boxes in IE for now - sacrificing style for usability and accessibility.
It has nothing to do with ASP.NET; you could view the same site on a Mac and it would look different. This is how windows displays that type of element. If you don't like it, then you will have to create your own. It's been done already.
Browsers, to a varying degree, pick up the users colour settings from the os, like any other application, so in the absense of any author specified settings, they are usually the default.
Be aware that once you start tweaking the styling for selects and other form elements, you need to be sure of giving a quite complete set of style rules, otherwise it can all go to hell in a handcart very quickly, just how quickly depends on the browser.