I've recently decided to create a web app to host some algorithms - I normally just create them without care for UI. However this time I need to dive deep into UI. I'm familiar with bootstrap, css, asp.net and have made a good start.
I'm finding it very difficult to deal with asp.net controls in the design view and having too much trouble trying to achieve simple tasks such as moving controls to different areas of the webpage. When I have two textboxes the design view forces one on top of the other leaving me so confused. Then when I try to move my bootstrap button it randomly creates paragraphs and refuses to move the button!
I'm looking for some genuine sincere advise on how I would deal with the design view on asp.net when moving controls and what the best techniques are. Also advice on how to make a modern UI, best techniques (perhaps bootstrap mentions) etc...
I am creating a fairly simple data display app in asp.net (visual studio 2015) - (most of the algorithm complexity is going to be behind the scenes and nothing to do with UI). Comprehensive and detailed advice would be really appreciated. Specifically modern good looking UI in relation to data grids, textboxes for user input (as parameters), dropdowns - you know the typical data app.
I'm sure this will be greatly helpful to many others as well!
Yeah, as I web designer who has had to work with asp.net in the past I completely feel your pain. It's not easy to get a modern look mostly because asp.net isn't a modern tool and kind of has a visual vocabulary all its own.
That said, I found I could get decent results by sticking as close to CSS based solutions as I possibly could. You can see some of those results in the following links:
http://www.design-experiments.com/
http://www.troyjnorris.com/shoppingcart/
I found that a minimalist approach tends to come with the best results.
A good process to follow:
- Build what you want to build.
- Add container divs to make selecting elements easier around your controls. This will greatly improve your ability to position elements the way you want.
- Use your browser inspector to figure out the auto generated element names as they appear on the screen. Getting good selectors is half the battle in CSS.
- Rip out the styling you don't like. Standard reset style sheets won't do here. You'll have to build your own to zero everything out on the elements you want to style so you're not fighting the out of the box look of the controls. Again you have to rely heavly on your inspector in a web browser to see what styles everything is inheriting.
- Use google fonts to define visual style of the page.
- Stick to mostly black or white backgrounds.
- Bootstrap is helpful for a responsive grid, but won't do much good attempting to style most of the elements on a page as they're not meant for that.
- As you might have noticed in the examples above the visual interest comes from elements that are unrelated to the asp.net structure and limitations. So have something like that, even a background image or some paralax so it feels like something is going on on the page.
Hope that helps.
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.
I understand that this question may be subjective, this is why I need an answer from an ASP.NET dev who has actually tried using Dreamweaver in conjunction with VS2010 ASP.NET MVC development.
While working on a web site development project, I spend 60% of the time fine-tuning the markup and css, 30% of time writing JS code and only 10% goes to C# logic coding. I am looking for the way to reduce the markup-mingling time to finish the projects more quickly. Is Adobe Dreamweaver able to help me, an ASP.NET MVC developer, to implement markups provided by designers more quickly?
It's a big Yes and No and I'll try to explain because it's kind of up to how you use it.
The Design view
If you approach the whole implementation visually, from Design View, like Adobe thinks you're supposed to do it, it's a big conspiracy. You'll find yourself spending more time traveling miles across the screen with your mouse. Keyboard coding -> always faster, but not for newbies.
Live View / Split View
If you plan on using the built-in "Live view" or "Split view", it's slower than going with Alt+Tab / Ctrl+R. And there's no trick to solve cross-browser inconsistencies
What really speeds thinks up
The regular code completion, syntax highlighter, automatic tag closing (like when typing </), the xHTML templates, not using hacks on top of other hacks, not using conditional styles, ignoring everyone else in the room.
What can you do to speed up front-end dev in general
Besides outsourcing, it helps to know HTML & CSS good, and your experience and technique. If you put a div, then switch to CSS then back to some more divs, then back to some other CSS this takes longer than writing header + footer html code, then moving onto styling the divs, the menus, etc.
On top of everything, slicing images still takes time. And if you want to be able to rapidly change things in your layout in the future, or make sub-layouts based on a template, it's naturally going to take more time. And add to that, the cross-browser compatibility testing. If you have a boss and he tells you "let's support IE6" you might want to consider a career in a different company.
P.S.: Is this another hunting topic? :)
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.
I'm a long time winforms developer and one of the things I really liked was the layout manager controls they had like flowlayoutpanel or gridlayout. unfortunately these don't seem to exist in asp.net or do they?
I'm in the process of modifying my existing asp.net website to use css instead of tables, but when I go into the visual studio design mode it looks terrible.
It's really difficult to wrap my head around all these floats, div:clears and css tricks and then test and retest in every browser. Surely there must be a better way. Ideally a layout manager control which would display properly in design mode, act as a container, be lightweight, and use smart enough to emit tables or css depending on the browser abilities.
does such a control exist as part of asp.net, open source, or commercial add-on?
Using tables instead of DIVs and css can certainly help with laying things out (a lot of people will think this is bad practice, but its works)
Also, have a look at the asp.net Repeater and ListView components. The ListView is very good in that you have a lot of control over the layout and the rendered html, I would look at that.
First thing - don't rely on the VS Designer. It's not a browser. Because each browser implements css in potentially different ways, your only option is to test in the browsers that you think your target market will use.
At first, css positioning can seem a bit confusing, but if you stick with it, you will be able to wrap your head around it. There is no such control as you describe that I know of. CSS is part of a web developers required learning, just as SQL is if you need to use a database etc.
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.