I am a c# developer.
Recently I had to design a web UI in asp .net 2.0 .I had strange problems with aligning controls in Visual studio UI.
I have used Div, table tags to align asp .net controls(labels, textbox, grid etc).
But the problem was what I saw in design surface of visual studio was entirely different (most of the time) when I view the page in browser.
The gap between controls and alignments was never perfect .I have seen other developers also doing trial and error methods without a proper guidelines.
C# coding I am pretty good and I have lots of Microsoft articles and help materials to guide me.
But I haven’t found proper articles and guidelines for UI design of asp .net pages.(may be its out there and i havent found yet?)
Can anyone through more light on this subject. Any good books ,suggestions etc?
Thanks in advance
SNC
If you want granular control over your HTML/XHTML output then I would recommend switching to ASP.NET MVC. The problems you've described are those typically encountered when using ASP.NET WebForms. As Anton mentions, you do need to gain a good understanding of XHTML and CSS as well.
While I definitly +1 everyone suggesting that you get a better grasp of CSS and positioning in general and ditch the drag and drop method of building your controls, I figure you need something sooner rather than later.
For that, I give you Yahoo!'s CSS Grids (JQuery, MooTools and other libraries also have grid layout tools) which will help you to get your UI done quickly. In the mean time read up on CSS.
(X)HTML is compositional - not unlike XAML (which is actually modeled on HTML/CSS). When building WinForms you can drag and drop your controls onto the window willy-nilly, but not so with the web. One thing the drag and drop designer misses is that (X)HTML components have a hierarchy to them. The designer tries to overcome this by using position: absolute; which is a precarious crutch.
Your controls need to be composed with their positional relationships more or less intact already and that means you'll have to edit the code by hand to put things in the proper order.
It's not the UI design per se. What you need is solid understanding of how CSS and generally styles work on the web (in short: they do poorly). So what you need is a good CSS book. Plus, you'll have to dump WYSIWYG ASP.NET page editor.
I'm curious if you feel your HTML skills are on par. Could you create this same page in HTML without visual studio and get the results you expect (using notepad)?
Regardless, start spending more time in the HTML markup and less time using the designer surface in Visual Studio. The more you understand the output that ASP.NET creates the better a web developer you will become.
A trick I use quite often is knowing that you don't need to recompile to change aspx code. Make your changes to the aspx file, save, and then refresh your browser. Also, use firefox and get the webdeveloper plugin. I use the outline block level elements quite often to understand where some of my html flow problems are occurring.
Read up on Web Design. I'm a bit behind but I've always loved zengarden and zeldman.. I'm sure there's better out there now.
Related
I am designing the user interface of a web application but I am inexperienced with UI Design, I just drag and drop labels and textboxes, but they look not symetric and properly arranged on the page. In a windows application, user interface design is easier since the visual stuido helps you with location of controls, but I don't know how to do that in a web application. Is the only solution entering the html and using lots of space characters for the page to look well organised ? This just makes me feel like an amateur.
Web apps are styled using CSS (Cascading Style Sheets). CSS is used for every aspect of UI in web apps. This is not limited to just ASP.NET, but to web development in general.
ASP.NET, and Visual Studio (or other IDEs) may allow you a familiar drag-and-drop interface for creating the UI, but under the hood, ASP.NET and these tools simply generate css for styling.
For example, in Visual Studio 2010, you can select "Change positioning to absolute for controls added using Tooldbox, paste, or drag and drop." in the HTML Designer Options
You can use these tool to drag and drop elements if you like, but I strongly recommend against even starting down that road for several reasons:
Unless you understand css, you will struggle with otherwise simple positioning and styling issues. The drag/drop tools and properties exposed are often not sufficient.
Web design is vastly different thatn WinForms design. You need to deal with many more screen resolutions, and browser resizes, which need to be fluid. Absolute positioning is horrible for this.
Once you learn the wrong way, it's very hard to change your ways. It's better to learn the "right way" up front.
There's a relatively simple CSS tutorial here.
I'm sorry there isn't a quick and easy answer,but if you're going to do web development at all, you need to learn to use css properly, and there's quite a bit to learn. Hopefully this tutorial will be a gentle introduction.
If you don't like that one, try this Bing search.
On most projects I've been one, designers has produced HTML code, then developers turned it into ASP.NET, including master-pages etc that should really be a part of design.
After it has become ASP.NET, designers could not work on the code with their tools.
I know that a lot of the design of ASP.NET is made with the purpose of separating code and design, and in principle designers should be able to work on design aspects with the Visual Web Developer, but I've never seen a designer using VWD.
How is cooperation done in practice, and what is about the best one can expect from a designer?
From someone who does both:
Most of the design should be done with CSS, so this isn't a problem.
The layout of the page, therefore, comes down to elements with IDs and classes (simplistically speaking).
I try to keep these IDs and classes as is, and place ContentPlaceHolders inside them as needed, when possible, and create controls or skins with the right classes.
Optimally, designers and programmers should work together, and know each others limitations and requirements (this cannot always be done, sometimes these are done by different companies). I think most of the responsibility here lies on the developers - they need the right controls to get the expected output.
Frankly, a web designer should care about HTML and CSS, not about what server-side technology is used to deliver them. The best I would expect from a web designer is to write flexible CSS, that can take a view changes to the HTML structure without breaking (that is - extra divs or tables, as ASP.NET tends to do).
A good ASP.NET developer will intelligently use the set of controls available. For example, in most cases, the ListView will do everything the GridView can, and produce clean, SEO-friendly markup.
In the ASP.NET environment, I would encourage the use of Expression by designers. Business owners can avail of the new deal from Microsoft and obtain VS, Expression, etc., for $100 for three years.
I think both developers and designers have to embrace each others world for anything to work.
We are still stuck with the old fashioned way of the designer producing PSD documents and hopefully rendering them into HTML.
Then we take them over and convert them to .Net, then the designer requests a change and we go in circles for a while before coming to an acceptable solution.
It would be nice if the designer could integrate into the HTML of .Net easier but I don't see that happening for a while, not while Microsoft advocates using scripting in your development..
I've found that using ASP.NET MVC will make the designer's job much easier. Especially if you stay away from using things like HTML.RenderImage, and instead place an IMG tag on the page with <%= ViewData["MyImage"] %> as the src. This will allow the designer to see the html they like and understand, while giving you the flexibility to set the source(which is all the developer should be doing). The goal being to stay away from ASP.NET controls, which would confuse a designer, while still keeping their flexibility to develop quickly.
I still find myself hand coding Visual Studio projects more than using the variety of UI-driven menus and dialogs. For example:
web projects: hand code html/css in Source View vs dealing with the Design View / Properties Window
flushing out class files: code by hand using stuff like the prop-TAB-TAB Create Property keyboard shortcut and good ole Ctrl+[X|C|V] instead of the Class Diagram feature
Do I need to give the dialogs and menus another shot, or is this the current state of IDEs? Intellisense is the best thing since sliced bread IMO.
Steve
I'd be quite content to have Microsoft remove the design view from Visual Studio. I find myself cursing it every time I accidentally hit the button and wait ages for the broken rendering engine to kick in. This is from the perspective of a web developer mind you - I'm sure it's essential for developing windows apps.
Generally I think most of the RAD tools are not particularly useful, and in the long run end up being problematic as they're not very flexible. When developing web forms asp.net applications the listview and repeater are generally the only controls that I use. Hand coding html/css would be the preference for most designers anyway. Tools like Dreamweaver are nice initially when you're learning, but you do get to a stage where you realise you're using them as a glorified text editor.
Intellisense as you mention is utterly bad arse, and the one thing that I would miss if I switched to something like e or Textmate.
I am not a .NET programmer, and I understand Visual Studio does provide a lot of nifty code generation tools. However, I think it's rather important that a developer knows the code in his application. If you feel comfortable hand-coding it because you feel more in control that way, I don't think that should bother you at all.
Also, as someone who writes a lot of HTML/CSS by hand, I know that Visual Studio's Design View does not churn out 'quality' front end code a lot of the time.
I personally hand code html/css as well as my class definitions 99% of the time. Exceptions would be things that would be hard to hand-code otherwise (does anyone hand-code WCF proxies?)
It's all about YOU. What makes YOU more productive. What makes more scenes for YOU.
It's good to know and learn alternative ways to achieve your goal. You can give it try but if it slows you down return to the way YOU used to code.
I certainly find the the UI designer only works for the simplest of pages, and even for them only for a few design iterations. I find this for two reasons
1) When laying out a page, there are often several legitimate choices, and I don't like the choices VS makes. For instance, it will set the width of tables using pixel sizes, while for most fluid pages percentages make more sense. Nothing wrong with what it does, but for whatever reason I find myself fighting it more often than not.
2) It hard-codes a lot of style information, and even creates synthetic styles in an in-page style sheet. I'd rather have a concise and comprehensive CSS for the site as a whole, minimizing overrides on each page (or in each element!). Again, I fight it more often than not.
Well the designer for WPF/Silverlight is pretty cumbersome to use. So I pretty much hand code xaml and C#. At the moment I do not do much asp but with MVC, I would assume I would hand code that.
With visual studio having intellisense for a lot different syntaxes now, it is easier then ever to hand code, well, code. :) I mean intellisense works for C#, CSS, javascript, asp, and XML (if set up right). It is pretty easy to code now days. The youngsters have it so easy now days. They do not know how hard it was to code back in the day.
I'd say it absolutely, 100% depends on what you're writing.
If it's a basic CRUD interface for a simple database, then I'd say yes, 80% is way too much.
If it's a Web Application with plenty of JQuery UI and no persistent data source, then 80% is probably less than I'd expect.
As Vadium said, it also depends on what makes you more productive. Personally, I fly along with Intellisense, but I'm not too good on using UI tools to build an app.
I always feel dumber using Visual Studio, but I have to finish my project sometime this century to get paid.
Our organization has dedicated designers who design the page and cut it up in Dreamweaver. That's worked well in the past with ASP and PHP sites. Now we're trying to make it work with .NET, but are struggling because of the structure of a project in ASP.NET. How does everybody collaborate with developers? The specific points I am looking for are:
-Transferring Dreamweaver content to Visual Studio
-Changing HTML inputs to server controls
-Giving designer access to finished Visual Studio product so they can tweak layout
Thanks!
Obviously, there will be a slight learning curve for your designers. But with that said, I have worked quite often with designers (none of whom used Dreamweaver, btw, so that may be part of the problem) on asp.net sites. Usually, they will create the HTML exactly how they want it on the server like a static HTML page, then I will go in and replace form fields manually with asp.net controls.
On an aside, I have found that I have the best chance of matching the design using controls that spit out the least HTML, such as Repeaters instead of DataGrids.
Once the site is up on the server and programmed, they can go back in an tweak things if need be.
Also, just like we have to adapt to them a bit (making our server controls spit out html how they like it) they also have to adapt to us a bit and not rely as heavily on id attributes in their stylesheets as some items id attributes will be controlled by hte .net runtime since they are controls.
MOre often than not, a designer new to asp.net will feel very threatened by this new way of doing things, specially with user controls instad of include files, but its really not that different than classic asp/php development is.
The key to the solution of all your problems in this matter is quite simple, and yet so hard to fulfill: it's usually called semantic markup. If you can make sure that the designers to start with make their html semantic, and that the .Net programmers keep rendering the same markup but with their server controls where needed, the tweaking won't be a problem - the markup is the same.
So what is semantic html, then? you may ask. Well, it's not always as simple as one would like it to be. A good start is to make every page pass XHTML validation.
In my experience, designer-created HTML almost always needs to be at least refactored, if not rewritten. So, open a browser with the original HTML on the left, and try to match it as closely as possible in VS on the right screen.
Giving designers access to ASP markup is not a good idea, imho. Too much can go wrong if you only understand half of the tags you are manipulating.
How about using one of Microsoft Expressions line of products? I've heard they are to .NET what dreamweaver is to PHP/ASP.
I know Microsoft has made efforts in the direction of semantic and cross-browser compliant XHTML and CSS, but it still seems like a PitA to pull off elegant markup. I've downloaded and tweaked the CSS Friendly Adapters and all that. But I still find myself frustrated with bloated and unattractive code.
Is elegant, semantic CSS with ASP.Net still a pipe dream? Or is it finally possible, I just need more practice?
The easiest way to generate elegant HTML and CSS is to use MVC framework, where you have much more control over HTML generation than with Web Forms.
See this question for more discussion, including use of MVC. This site uses ASP.NET and the markup is pretty clean. Check out the HTML/CSS on MicrosoftPDC.com (a site I'm working on) - it uses ASP.NET webforms, but we're designing with clean markup as a priority.
As long as you use the Visual Studio designer, it's probably a pipe dream. I write all of my ASP.NET code (all markup, and CSS) by hand, simply to avoid the designer. Later versions of Visual Studio have gotten much better at not mangling your .aspx/.ascx files, but they're still far from perfect.
A better question is: is it really worth it? I write web applications and rarely does the elegance of the resulting HTML/CSS/JavaScript add anything to the end goal. If your end goal is to have people do a "view source" on your stuff and admire it, then maybe this is important and worth all of the effort, but I doubt it.
If you need the semantics, use XML for your data. I do believe in the idea of the semantic web, but my applications don't need to have anything to do with it.
As DannySmurf said, hand building is the way to go.
That said, you might look at Expression Web. At least it is pretty accurate in how it renders the pages.
#JasonBunting - Yes, it's absolutely worth it. Semantic and cross-browser markup means that search engines have an easier (and thus higher rankings) time with your content, that browsers have an easier (and thus less error-prone) time parsing your content for display, and that future developers have an easier time maintaining your code.
Yes - it's a pipe dream. Since working with a professional web designer on a joint project who HATED the output of ASP.net server side controls I stopped using them. I essentially had to write ASP.net apps like you would write a modern PHP app. If you have a heavy business layer then your page or UI code can be minimal.
I've never looked back since. The extra time spent writing everything custom has saved me a great deal of time trying to make Visual Studio / ASP.net play nice with CSS/XHTML.
i can't believe nobody has mentioned css adapters. many of the common controls used in asp.net (gridview and treeview for example) can be processed through an adapter to change the resulting html that is outputted to the browser.
if going the mvc route isn't a viable option, it is possible to write your own adapters for any of the built in asp.net controls.
http://www.asp.net/CssAdapters/