Past, now irrelevant back story: I was trying to make some changes to BlueBand and get 'up and running pretty quickly' but after looking at it further this is no longer an option due to tables that a previous developer introduced into the layout. I'll have to live with this and make what tweaks I can.
So, looking towards future greenfields projects...
Are there any recommendations for CSS frameworks that work nicely with SharePoint publishing sites? (Examples are BluePrint, YUI.) They should not interfere with standard out-of-the-box controls such as the Site Actions menu, rich text editor, and publishing toolbar.
Real world experiences welcomed, please!
What would you like to use a CSS framework for? As far as I can tell you could use one for making a cross-browser reset but everything else just depends on your layout. If you're planning to throw out the standard SharePoint layout it means that you need to start from scratch. The good news is that it's not much different than creating a layout for any other website. There are some things you need (http://msdn.microsoft.com/en-us/library/aa660698.aspx) while working with SharePoint but as for CSS it's all up to you.
Heather Solomon has a great blog/guide on wiring up SharePoint CSS classes - take a look:
http://www.heathersolomon.com/content/sp07cssreference.htm
Cheers,
Adam
You will run into a lot of trouble trying to hack the blue band theme into a table less layout.
You may get some mileage from the free Accesibility Kit for Sharepoint.
It comes with layout pages, CSS and even control adapters for those who care about the HTML of thier site.
Still, getting rid of the tables produced by SharePoint is not really compatible with "up and running pretty quickly"
You should start with the minimal masterpage. That will be the masterpage that's connected to the publishing layouts. You can then add in all the html/css you desire to your masterpage and layouts to make them look like anything you want.
If the users who are browsing those same publishing pages also need access to your list forms (new,edit,display) you will have to edit those files and attach them to your masterpage (either through SP Designer or a Feature to do it automatically). Or, customize the application masterpage to be nearly the same as your publishing masterpage and deploy them both as a feature with an HTTP Handler that changes the masterpage for the application.master at runtime.
Also an FYI, there are many issues once you start customizing list form pages for a site accessible to anon users, so do your research first on that one if needed.
We have used 960.gs with some success. Just include it in your master page, and wrap the main content area with a - or use container_12/container_24. Then in your individual page layouts, you can leverage all the columns/push/pull/alpha/omega goodies that make 960 so great. This works in 2007 and 2010, just takes a bit more work in 2007.
You can use any framework you desire when working with Sharepoint, however, the primary concern is how much control you have over web parts. OOB web parts use table based layout. If you have full control over how the web parts use the markup they product then you are one step closer to using a framework with little headache.
To alleviate some of the table based layout used in web parts you can look at accessibility toolkits to convert the web parts appropriately.
Related
Hi I am developing a website with multiple pages. I am a beginner, coding is still a challenge for me, but my main hardship is designing my website. Visual studio is very not intuitive when it comes to designing websites, and sometimes you feel (when you try to design) like you work while tied in a straightjacket. I am used to dragging stuff around when designing, but this doesn't work with websites. There are a lot of website templates, but is there any which work with asp.net? And how do you integrate them while working in visual studio? Any help?
You don't need any special templates to work with ASP.Net. Integrating a template works the exact same way as it would if you are designing a site from scratch.
Find out your major pieces that are in every page (or groups of pages) and create your master pages that will provide consistent layout for those pages.
Forget about dragging and dropping and pixel design locations of a regular desktop app, it's not going to work that way.
Start with a framework such as Bootstrap, or a template based on Bootstrap. It's extremely well documented, works cross-platform, and there are plenty of tutorials out there on using it.
Visual Studio works pretty much like any other web design tool does. You're just running into exactly how things have been done for well over a decade now. Tools get better, but the web is an entirely different experience that requires entirely different ways of doing things.
You can easily templates or frameworks into your site. You can add styling to form fields, buttons, etc. easily through the CSS of the template.
Take a look at Bootstrap to get an idea of how you can style elements and understand the layout tricks that can be accomplished with responsive design.
Anyone used the blueprint (http://www.blueprintcss.org/) with Office Sharepoint server publishing sites?
If yes, what do you think? Any catches or problems ? does it really save time and make it easy to make the site working fine cross browsers?
I used Blueprint CSS with SharePoint (MOSS) on a project last year.
I'm a UK-based contractor and this was for a 3 month project with 1 technical resource (me). The company involved (large UK company providing services to the banking industry) had an existing intranet installation and wanted to move to a MOSS publishing site based intranet.
The design was column based with a fixed width (960px) so I took a look at the CSS frameworks available at the time and Blueprint looked simple and flexible (design tool at http://kematzy.com/blueprint-generator/ to build a custom grid).
Blueprint itself worked well, and the problems I encountered using it would be pretty much the same as any MOSS project that involves large customisations to the master page / page layouts. I did end up writing my own reset CSS rather than use the default one as I didn't want to completely clobber the MOSS styles. Gotchas:
SharePoint uses quirks mode (the html doesn't define a doctype) so adding a doctype means plenty of fiddling with the shipped CSS styles to get it all working.
The control rendering is the normal asp.net mess of nested tables etc., which combined with the quirks mode meant that getting things to stay in the grid was always somewhat tricky.
I only had to support IE (6 & 7) as it was an internal intranet, and even the inconsistencies in their rendering caused a few problems. Short of using control adapters to try and generate sane html, I think this would only get worse supporting other browsers as well.
Having said all that, it worked well with the master pages and was great with page layouts (different columns/layouts and having a 'magazine style' front page). And we got the project done with time to spare so yes, I'd use it again and recommend it - as long as you're happy to be knee-deep in CSS quite quickly..
Being an accessibility evangelist I also went down the same path of using Blueprint in an effort to make things more standards-compliant. TO be honest I would not do it again.
Trying to beat MOSS 2007 into submission and make it accessible is a lost cause. Even great projects like the AKS (Accessibility Kit for SharePoint) do little more than add a summary paramater to the swarm of nested tables rendered by woefully out-dated .NET controls.
Short of rewriting all these controls there's just no point. SharePoint publishing sites that don't use too many of these might be slightly easier to manage. But IMO you'd be better of waiting for 2010 which does a much better job of this.
If meeting WCAG is important now then you're far better off going with another CMS that does this out-of-the-box, or at least let's you do it without too much pain.
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 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 learning ASP.NET using a great Sitepoint book, and I'm also learning more about CSS. I'm undecided on how useful Master Pages are. Could someone let me know whether the real world use mater pages - and if they don't what do they do?
Cheers
Mike
Yes, we absolutely use them.
Typically you will use master pages to handle your header, footer and navigation sections that are consistent through-out all the pages in your website.
This follows the DRY principle of not having to repeat yourself when creating new web forms.
MasterPages are the best feature that came with ASP.NET 2.0.
I use them whenever I can. They simplify your maintenance and management on a website. With a one change you can change whole site.
I always use master pages. It helps keep the code for each page less cluttered, and as previously stated, it lessens the need to repeat yourself.
Speaking of CSS, I use CSS to style the master pages, and set text formating "rules", while I usually end up styling graphics in each individual aspx/ascx-file. I find this less confusing, as you'll otherwise end up with one massive CSS-file - which is hard to keep structured - or a myriad of CSS-files - which often get hard to keep track of.
We use Masterpages for many of our applications and find them a benefit but I think your right to question how useful they are.
For our applications that have a large number of pages it's great to be able to extract a lot of the style information to one place. I know it's possible with include files etc but as Masterpages are the main method for Visual Studio it's obviously integrated very well and easy to use.
The biggest benefit for me is that I tend to use the same Masterpage across many applications thus giving them all the same look and feel. Again I know this can be achieved in other ways but it's Visual Studio integration makes it the easiest for us.
I think the best way for you to decide is to try them and try an alternative method as well. Pick your favorite and then let us all know!
Master pages are absolutley crucial to any ASP.Net application. They are the building blocks for your site.
And if you ever start looking at SharePoint they are the underpinning of all customisation and branding.
Why would you think otherwise? I am interested to know why you might not have thought them as useful.
I've had a solution delivered without master pages, and its a real pain trying to change the layout of the page, as each page has to be changed individually.