With VS 2003 we were used to desing the web forms quite similarly to win forms: the Textboxes, Labes, Buttons etc. were positioned with absolute coordinates (inline css) in divs with ms_positioning="GridLayout".
With VS 2010 this way of designing web forms seems to be gone (at least it can no more be used to get the design finished quickly) and the use of absolute coordinates and inline css is considered obsolete anyway.
I would like to get some hints how to design web forms like the one in sample screenshot the "correct" way.
I would like to preserve following important things:
One should be able to quickly / easily add, remove or move the form's controls while maintaining the overall look and feel of the form - our web forms tend to change / grow over time as customers' requirements change.
The form should not crumple together when the user reduces the width of the browser window - the form width should not descend under some minimal value.
I am considering using html tables, but for example for the Address-Block on the sample screenshot I would have to have a table with 9 columns (one for every vertical boundary) and use lots of colspans - not neccessarily the fastest way of designing the forms considering future changes. And I heard in 1999 or so that the html tables were obsolete.
I read I should use divs and css for pretty much everything but I am unclear in how to create a web form like the one on the sample screenshot without providing absolute positions and sizes some way or other.
Any hints will be greatly appreciated.
Thanks in advance
Best Regards
Erich Horak
I would divide up your three main sections into divs, then tackle each section individually. My main tool when approaching this is the Web Dev Toolbar. I use it to view markup and CSS of any form I locate online that I like the look of:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
(CSS -> View CSS and CSS -> View Style Information (hover mouse) are helpful drop down options)
Forms are created with CSS mainly through the use of label and input classes:
http://speckyboy.com/2011/05/24/css-form-templates-tools-services/
Your form looks difficult at first glance, but when you break it down it really isn't that hard to do. The link above has samples - simple like you mentioned - but simple or not, the CSS is the same.
Related
I really wonder how such websites like https://medium.com/ (on the home page) https://qz.com divide the page according to tags or the order is like : header, some news, some articles in same shaped boxes,video, then some more content and then footer... so in one page they are able to show many things.. is that done by dividing page with HTML div tags or is there something else used ? I am a newbie trying to learn Django. I appreciate any help
I think there is more than just div-tags, but in the end it is (only) html, css and javascript that creates the visual webside on the clients' side.
Frameworks like the "960 Grid System" or Bootstraps Grid System can help you to keep content in a common order. Create templates for your CMS to achive a common design (Ahhhh: Use a CMS). Maybe use Less, Saas, etc. instead of writing plain old css-files.
Short answer: Look at their code. Of course you can't see their server-side code, but you can look at the HTML and it clearly shows that medium uses divs, while qz uses sections.
Now as to what you can use, there really isn't anything else. Simply because there isn't any need for it. You might want to add an uniform height for each of those "sections", but you don't need to.
Now to the serverside part: they certainly didn't hardcode every single section, but created a template for it. Depending on what technology they use that will look different, but it will always have
A template (often called function, template or module depending on the technology used) that has everything ready as to the HTML and CSS. This designs the layout and design of those 'sections'. It also accepts content that it will then insert into that structure.
A 'main-page' that uses that template repeatedly, but gives it different information. For Medium this might be something like: MakeStreamItem("Audio", GetFirstFourAudioItems())
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.
I am using ASP.NET (MVC 4 internet application template). I have the master page and within it I embed another page. This embeded page should have the appearance shown here (Draft): http://snag.gy/OGIut.jpg
This page is three column. First column has a groupbox and into it some radio buttons (options). In the second column there are more groupboxes, as seen in figure above (see link above) and the same for third column. Each groupbox has a title, and before the title a checkbox (this is useful for enable or disable the entire groupbox so user cannot select any options within it). In third column at the end there is a plain button (not 3D), and at the bottom of the page there is a grey section where there is a plain button at the rightmost.
So as I am completely new in web and css programming I am thinking about how to organize all this elements in the view to have the appearance indicated in the picture.
Could anyone help and tell me how to do this? any example? I am very frustrated when working with html and css because I find difficult to place the elements in the correct place.
Maybe you should consider to use frameworks to help to place the element on a grid. The most famous one is of course Bootstrap but there is plenty of these http://usablica.github.io/front-end-frameworks/compare.html. It makes the web development really faster and easier.
Plus, these kind of frameworks comes with JS & CSS library which can be really helpfull to create modern webpage with sliders, smooth scroling, models windiws etc..
Can WinForms and XAML not benefit from the same logic as CSS?
It occurred to me this morning, as I was browsing some of my unanswered questions on Stackoverflow:
If you're not using FlowLayoutPanel or a TableLayoutPanel, to layout controls on your WinForm, you'll be accused of not doing it right.
This is in contrast with the (religious) debate in html world about CSS vs Tables.
It seems to me that the maintainability problems of a UI laid out with a table has been ported to WinForms. And with XAML, which can be thought of of a form of HTML, has embraced table based layouts. You'll have a hard time doing anything in XAML without using tables.
Can WinForms and XAML not benefit from the same logic as CSS? Can the maintenance problems of tables not be done away with? I realize accessibility isn't a problem on a WinForm or WPF form laid out using tables: the reader will not "see" the layout panel - so that's a problem in CSS that doesn't exist in WinForms.
But can't WinForms/XML benefit from non-table based layouts? I know I certainly don't want to have to move that "OK" button 3 dialog units to the left in a table-based approach.
I don't think you can compare HTML and XAML. The implementation of table based layout (Grids) in XAML is far superior to that of HTML tables. There are far easier to work with and don't come with the same baggage that HTML tables do (cross-browser querks).
Also I don't agree with your comment ...
You'll have a hard time doing anything
in XAML without using tables.
There are so many layout options in XAML, that you could produce an entire application without using a grid once. Though it may be easier to use Grids, it doesn't mean that you'd have a hard time using other layout elements. In fact, I use Stackpanels and Canvases as much as I do grids.
It just becomes a question of using the correct element for each scenario. Having come from web applications and been writing HTML and CSS for years, I find that XAML is a wonderful markup, that makes laying out your interface a breeze ... not to mention everything else that comes with XAML.
So to answer your question ... can XAML benefit from CSS logic? Yes and it does, MS has taken great things from CSS, but has also produced a superior markup.
You say:
It seems to me that the
maintainability problems of a UI laid
out with a table has been ported to
WinForms. And with XAML, which can be
thought of of a form of HTML
but you've missed the point of CSS. CSS isn't about avoiding use of table layouts, it's about separation of content from layout.
In HTML, the HTML provides the 'content' (the actual text, and it's structure into logical paragraphs) and the CSS provides the information about how this content should be laid out, (ideally so that you can just switch CSS files for different display methods and the same content will be displayed appropriately)
XAML/WPF provides the same ability (and to a lesser extent so does WinForms). The XAML (or WinForms GUI code) provides the layout and the visual stuff. The code behind (preferably following some nice separation pattern like MVVM for WPF or MVC in WinForms) provides the content. Written properly you should be able to swap out the XAML (or WinForms GUI code) and provide an alternative layout/GUI for different circumstances.
There is nothing wrong with table based layouts, the problem with table based layouts using plain HTML tables is that it mixes content and layout code all in one big jumble. HTML tables should only be used when the content you are providing is tabular in nature, and then they should still be laid out and formatted with CSS rules. HTML tables should not be used for laying out and formatting non tabular content.
So WPF/XAML is already structured like HTML+CSS, it's just you have compared the wrong parts. The XAML provides the layout and is the equivalent of the CSS, and the code behind (or view model / model in mvvm) is the equivalent of the HTML as it provides the content.
One of the key arguments against the use of tables for layout purposes in HTML is that of semantics and accessibility. A <table> tag is intended to contain tabular information, and for users with screen-readers and similar using them for layout purposes can cause real headaches. The layout containers in XAML, though, are meant to contain controls and position them on the user's screen, seperating them from neighbouring controls and grouping them appropriately.
Another issue is that of producing clean code. An HTML document, when marked up correctly, should just contain the document contents, with the styling kept in the seperate CSS file. A XAML file is more equivalent to the CSS, describing the layout of the UI, and isolating it from the actual program which is described by the source files of whatever language you are using.
Just because XAML & HTML are XML-ish doesn't mean they encapsulate the same sort of data. If CSS were an XML format, would you compare XAML to HTML or this (X)CSS?
The problem with the HTML/CSS scheme is that it was designed as a document language, not a user interface language. The whole separation of presentation from content really only benefits documents. It is madness having to develop user interfaces in HTML, which doesn't have grid layouts. Oh well, it keeps us employed.
The direction that HTML 5 is taking looks promising for reducing the pain. For now, though, I'll stick with RIAs like Flex and Silverlight.
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.