As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
We are about to embark on the development of several complex business/intranet applications (lots of data, many functions, admin panels, doesn't need to be simplified for public use). With the advent of people doing real work on their phone browsers and tablets.. responsive design and 508/ARIA accessibility also creep into the mix of requirements.
We like a lot of what we find in the out-of-the-box Twitter Bootstrap (TB) (x-browser, jQuery, HTML/CSS template, lots of helper functions so we don't need HTML experts to make good looking pages, others). But, its layouts seem to drive us toward minimalistic (few controls/ less data on one screen), narrow (960-width) designs.
Does it make sense for us to even use TB if we're going to bloat and stretch the designs? Or are their better CSS/HTML/JS templates/kits out there for .Net "business applications"? Or any others that are still in favor that we should consider?
You have to choose the framework that you fell must comfortable with.
I like both Bootstrap, jQuery UI and YUI Library and use them a lot. I recently changed work and my first project was to change the entire internal admin application, and for this I have chosen Bootstrap.
Bootstrap with Knockout in ASP.NET MVC to be more detailed...
just as a tease on using Bootstrap... this is view of one of the segments:
and the main navigation menu:
to help others, the Main Menu is available on JsBin
it's a normal 3 columns .span2 with a wrapper called .super-menu and that style has only the width as:
.super-menu { width: 480px; }
witch means: 3 x .span2 + 3 x margin-left = (3 x 140) + (3 x 20) = 480px
Ironically, I think Bootstrap is even more useful for intranet/business apps than public-facing ones.
Some reasons I love using Bootstrap for internal apps:
Consistent interface (can be a con of public sites seeking a "unique" look)
Handles all the cross-browser, cross platform (mobile) issues you would have to deal with yourself
Proven to be efficient and flexible
Exponentially growing ecosystem ensures stability, support resources
Can easily be customised to your business' look and feel and then shared across developers or teams for re-usability
Built-in fluid application layout (addresses your narrow/minimalistic design concern)
Spend less time on interface concerns and more time on making sure your SQL queries over 3 years of sales history don't take 30 minutes to run
Components built on jQuery. Who doesn't love jQuery??
It's awesome :)
Edit:
If you're worried about more fancy plugins and features, the Github repo has almost 30,000 watchers and over 5,000 forks. Anything you can think of is probably being done or already completed - like a datepicker.
I've worked with jQuery mobile and enjoy it. Here's a project: http://2012barleadershandbook.philadelphiabar.org/
It seems like more of stripped down template that is easy to extend.
http://jquerymobile.com/
If you're adding video, remember to use something like fitvids: http://fitvidsjs.com/
Net Magazine's been name dropped quite a few in the last couple of days.
Ethan Marcotte name-dropped foundation and Fluid Baseline Grid in an interview there. Several more (too many to list individually, imo) were listed in this round-up of tools for responsive web design.
I would have to say no, the twitter bootstrap is still much too young to take on more complex applications. Though it is growing everyday, it is still missing a lot of UI elements that allows for easier content/data placement and organization - such as a proper datepicker, a content slider with better control over the content (pulling content from ajax, videos, auto resize, etc...), a more proper accordion that allows for better control over the content through javascript (auto height/width, on hover toggling) and it is still lacking on other things such as dialogs, animations/effects and widgets.
I would stick to the more mature frameworks we still have today such as jQuery UI or the YUI library and wait for the bootstrap to mature into what those frameworks are today.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a web site than must be visible on any screen and any device, and I saw this site the other day.
Inspecting the page with the developer tools of google chrome and "emulating" the width and height of devices I saw that the page fits to any resolution and orientation.
Image on landscape and as an iPhone
Image on portrait as a Samsung device
I want to know how to get this without struggle too much with css.
Thanks in advance.
PS: Also I viewed the site from my phone a Samsung galaxy S3 Mini and it fits perfectly to the screen.
I am going to make this answer as helpful and to the point as I can:
You will need to spend a few hours reading all you can grab on responsive web design and development, only after that should you begin to explore the right tools to make your CSS life easier.
A lot of what you in responsive development do also depends on your application. To make things simple you should begin using HTML, JavaScript and CSS. Any libraries you use must be related directly with any of these languages.
A big rule of thumb is: always try to do responsive development with CSS, but if you cannot for a good reason, then and only then should you rely on JavaScript. If you did not learn why this is important after reading the first paragraph of my answer, then you should spend more time going over responsive web design and development (it's worth it!).
As you will find out, there are many techniques and CSS libraries for making responsive web design. A guideline I can give you is: You can learn to make your own responsive development, which in practice leads to leaner code and it will also helps you understand how more robust libraries do it (such as Bootstrap, among others).
Learn and understand media queries.
Learn about advanced CSS contepts such as mixins and how you can combine them with #1 to make your coding life easier.
Learn all you can about grids and fluid grids, then look at (today's) modern concepts such as flexbox which will help you with your individual and global layout. Make sure you can do it yourself! (it's not a big challenge, take it one small step at a time, do some tutorials).
Begin to dive into some neat CSS frameworks, such as Foundation, Bootstrap, Ionic Framework, among many others. It is imperative you take time to understand how they can help you, what they can do for you, extract only what you need (example: I only need to use the grid system), are they community driven? (it is important not to rely on obsolete tools).
Do not forget your good friend JavaScript (and the plethora of frameworks you can use with it). Be sure to compliment any behavior you cannot achieve with CSS to achieve your responsive behavior, not the other way around.
Last but definitely not least is cross browser compatibility: once you go deep enough in CSS you tend to forget to always use cross browser compatible techniques. This takes plenty of - do it yourself - research, but it is not terribly difficult, simply stick with what works for you and for your implementation.
So... only after you have done some reading, played with code and begin to find roadblocks, should you come back here and start asking as many questions as you like. That way we, the community, can assist you properly.
Good luck!
P.S.: Here is a little fun article to get you started: Holy Grail Layout
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am developing a web application which is not an information conducting website like a blog, or news page or any other page where content matters. I am working on an application which is a tool and therefore will have multiple interface elements: data grids, buttons, input fields etc.
One of the designers told me that its a good practice to use 'css grid framework' to make my design based on some grid, however I have doubts because if I understand grids correctly, I then will be confounded to say 40px per column and if I have 2 x 15px buttons then I will have a hard time putting it all together within 'cells' of 40px...
In my mind grid is wasting lot of space and is good for big blocks of information but not for many little elements... am I correct?
Please let me know if its always a good practice to use grid or are there instances when actually good old pixel by pixel is simply better. If I am wrong please refer me to some good website which will explain how to use grids properly.
The whole point of the 960 grid is that it give you a large number of evenly divisible factors to allow for multiple columns. They're just guidelines to make it easy.
What you choose to put in these column is up to you. Your buttons don't need to conform to the grid.
I can say that from my experience, grid systems make things much easier to design and then develop. From a design perspective, it's easier to know where and how things need to line up and then when you pass the designs off to a developer, he or she can just plug the design into the grid and everything lays out as expected.
A great grid framework for applications and websites is Twitter's Bootstrap. Looking at the scaffolding page, you can see that it offers both a fixed grid layout and also a responsive layout. I prefer the responsive layout, but I build websites not web apps. It's also great because it has built in styles for buttons that inherently fit into the grid, a JS library loaded with useful and easy to access functions and a great support network.
Other grid systems you might want to look at are:
960.gs, Blueprint and 1140 CSS Grid. You can also Google for a grid generator to create your own custom layout.
Pick the one that works for you and the designer you'll work with and your lives will be much easier.
To answer your question, "always a good practice to use grid?" That's a rather open-ended question (and one of the reasons it's not a good fit for SO), but here is my two cents:
A) If quick and dirty UI is not only fine but expected and needed (say, for some internal function that doesn't get run very often), then go old-skool and dump something together that works.
B) If you are developing an app that "the public" or a fair amount of non-technical users will be leveraging, then you really should at least attempt to create a consistent layout for each view, which is where grid systems like 960 or Twitter Bootstrap shine. From personal experience, Bootstrap makes it really easy for me to get my navigation controls, datagrids, input forms, etc. to line up and position themselves correctly in the page.
The UX Stack Exchange site could give you a better idea of when/why to use grids, and may actually be a better fit for this question anyway...
Take a look at http://grids.heroku.com/ its a simple tool that generates fixed or flexible grids. If you want to read up on how grids work, a simple and popular grid system is http://960.gs
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
At work I see one colleague designing a site in Photoshop/Fireworks, I see another taking this data, slicing it up and using Dreamweaver to rebuild the same from scratch.
It seems like too much mucking around!
I know that Photoshop can output a tables based HTML, and Fireworks will create divs with absolute positioning; neither appear to be very helpful.
Admittedly, I haven't tried much of (DW/FW) (CS4/CS3) since becoming a programmer, so I don't know if new versions are addressing this work flow issue, but are we still double handling things?
Can we attach some sort of layout metadata (this is a rollover button, this will be a SWF, this will be text, this logo will hide "xyz" <h1> text etc) to slices to aid in layout generation? are there some secret tools which assist in this conversion process? Or are we still restricted to doing things by hand?
The frustration continues when said hand built page needs to be reworked again to fit Smarty Templates/Wordpress/generic CMS.
I acknowledge that designers need to be free of systems to be able to do whatever, but most conventional sites have:
a header with navigation
a sidebar with more links
the main content part
maybe another sidebar
a footer
Given the similarity of a lot of components, shouldn't there be a more systematic approach to going from sliced designs to functional HTML?
Or am I over-simplifying things?
-edit-
Mmmmm.... I suppose I will accept an answer, but they weren't really what I was looking for.
It just seems like designing the DOM is a bit of holy grail ("It's only a model!"), and maybe with all the "groovy" things you can do with HTML and Javascript, it would be mighty hard work, but with a set of constraints (that 960 stuff looks interesting), some well designed reset style sheets and a bit of... fairy dust? we should be able to improve the work flow.
Photoshop's tables by themselves are pretty much useless, I agree, but surely we can take this data, and then select a group of cells and say "right, this is a text div, overflow:auto" or "these cells are an image block, style it with the same height/width as the selected area". Admittedly here at work there are other elephants in the room that need to make their formal introductions to management, but some parts of the design>page workflow seem... uneducated at best.
To me, doing it by hand is an advantage. You only have to get it right once, and if you're going specifically for visual appeal, you've likely got a lot of work ahead of you making it cross-browser friendly...
Would love to hear other answers. This is just my take on it as I make more data-driven than visually appealing sites.
Skip Photoshop entirely and just get your designers mocking up straight in the view HTML. Not only will you remove the complicated, awkward-feeling process you're feeling, but you'll get better, more resilient designs, because 100% of it will be based on what's possible in HTML/CSS, not what's possible in Photoshop.
More reading:
Why We Skip Photoshop
(37signals)
Walls Come Tumbling Down (Andy
Clarke) (via Jason Berry's
answer)
Web Designers Should Do Their Own
HTML/CSS (37signals) (via Paul
Souders' answer)
A number of people nowadays are designing straight into the browser using (X)HTML/CSS because of that exact problem - all of the mucking around with Photoshop and then going to code after getting the client to sign-off on a static design.
A good read is Andy Clarke's Walls Come Tumbling Down presentation.
Omega touched on it, but I think the biggest problem is cross-browser compatibility. If all those browser quirks didn't exist (coughInternetExplorercough), what you suggested would be much simpler. However, it often takes a lot of hand-coding to make it look pixel-perfect in every browser.
Another thing is fine-grained control. Sure, you can just pop your PSD template into Dreamweaver or whatnot and have a working website, but it's going to use hacks and ugly things like tables to make it work. And even then, it probably won't work entirely like you want it to. You have to remember things like accessibility and SEO, too, and Dreamweaver just can't give you that.
My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design.
Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.
Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)
The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.
Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.
If you need traction in this method you can use a standard css grid like 960 (http://960.gs/). It handles a lot of the arithmetic and floaty business that makes layout such a chore.
In addition to Rahul's link above I also recommend: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
It's a nice pie-in-the-sky sorta dream, but I think as long as websites are written in (X)HTML/CSS, at the end of the day, you'll always have to do some, most or all of the work manually.
There's just a fundamental rift between static pixels in some 'shopping software and dynamic, changing, expanding, content-focused, text-based sites. The best tool to bridge that gap is still... the human professional.
Tools like iWeb (completely WYSIWYG) or DW/Fireworks (somewhere in the middle) only get you so far or have serious limitations. You get only pre-fabbed templates in case of iWeb, often sub-optimal code in case of DW/Fireworks. You'll have to decide which limitations you can live with and when it's best to do it manually.
There are several tools such as Sitegrinder that do just that.
Adobe themselves has a project in Labs called Catalyst that does what you describe and more for Flash:
It takes the slices from Photoshop, allows you to change their properties and export it to a working Flash file. (Right click box, add text property, it becomes a text field...)
If you watch their video (which you should - its amazing), you will see that they are deluded into thinking that websites will soon be built this way.
Before Zimbra was bought by Yahoo, it looked like they were heading towards such a tool that outputted cross-platform HTML similar to what catalyst does for flash. No more. But with the shake-ups at Yahoo, such software may still rise from the Zimbra ashes.
In my opinion, a site should be mocked up in Photoshop if necessary, with parts being cut out for use in the actual site, but to design the site completely in Photoshop, then want to make it work on the web is just going about it backwards. Really the two should be done in parallel.
In short, graphic designers design the look of a website, but you need a programmer to program it.
What you probably should go for is train the designers to work within a well established grid system for their site designs. If they can understand the layout as a grid/block system a lot of interesting design can be accomplished within those constraints. But it isn't going to be straight conversion from PSD to HTML because they are two completely different ways of representing visual data.
There are lots of frameworks that make the css work easier. One is Blueprint CSS
http://www.blueprintcss.org/
There are lots of templates out there for representing the grid system within photoshop.
http://konigi.com/tools/photoshop-template-blueprint-css-comps
Think of the grid as a visual constraints layer, then the design can be mapped between a photoshop comp and specific HTML/CSS implementation. Visual elements have to be bounded within clean grid boxes. SOme elements or units within the grid can be mapped to background images. Others solid colors or white space with div containers holding content.
With a well understood and grid framework you can get pretty close to pixel perfect layouts.
Also, good designers will understand how to use white space effectively in a design mockup. If there is lots weird intersecting lines and crossover elements in the visual design then that presents a real challenge for implementation. Just because you can visually imagine it doesn't mean it is easy to implement in a browser without making certain kinds of trade offs for the way HTML and CSS work. Think of the grid system as the constraints and an effective way to judge layout requirements.
Personally, I design it in html/css first using borders and background colors. I then take the PSD and insert the images as background images or html images. It's pretty fast, the code is yours so you know what each css rule mean which speed up the dev process (as opposed to to PS's awkward sliced image names and css selectors names)
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
As one of those people that never got around to properly learning design (or having no talent for it), the design seems to be the step always holding me back. It's not a problem for rich-clients, as the standard GUI toolkits provide some acceptable ways to design a good-looking interface, but the web is another story.
Question: Does anyone know of a high-quality framework for designing the interface of web applications? I'm thinking of standard snippets of html for an adequate set of controls (the standard html controls plus maybe navigations, lists, forms) and style sheets to give it an acceptable, modern look. If such a thing existed, it could even support themes in the way wordpress, drupal etc. allow it.
I know of the yahoo yui, but that's mostly javascript, though their grid css is a step in the right direction.
Try the samples on ExtJs.
I find them immensely useful in working out the UI. (trees, panels, modals, etc etc)
I realise this is an old thread but it still comes high up in Google searches so it's worth mentioning that Twitter have recently put out Twitter Bootstrap, a "toolkit for kickstarting CSS for websites, apps, and more" which looks fantastic! » https://github.com/twitter/bootstrap
I'm not sure that what you're looking for exists in the way you're looking for it. However, I've had some luck with places like Open Source Web Design and Open Designs, which have some really slick templates that can be adapted to a web application so they at least don't look like crap.
There are also some commercial offerings, such as Gooey Templates.
Once you're getting closer to launch, you can contact a pro to fix the details for you, or simply build on what you've got.
Edited to add: You might also want to consider learning Blueprint CSS. I've found it helps guide my layouts and helps them look "right", without constraining me to the layout constructed for another purpose.
I'll suggest Google Web Toolkit if you're a Java developer. Examples
I'll also second the suggestion for Ext JS. It's got a vast array of really slick looking UI elements, incredibly well documented code, and a strong community.
You'd probably also find the myriad of Wordpress templates reasonably useful to build on, as Wordpress is at least reasonable at separating content from layout. The also tend to have a modern bloggy feel. Of course teaming up with a talented designer is the ideal way to go in my experience! :)
This will be more than a framework OP originally wanted but I'll suggest having a look at Morfik.
You'll be able to build pretty slick user interfaces with the conventional drag&drop way and with theming support (The homepage itself is built in Morfik). There're numerous other advantages Morfik provides, though let me not drift to off-topic for the subject. You may download the trial and see...
ps. Disclaimer: I'd worked for them.
you can check out this young site, http://guitemplates.com/. The templates are quite clear and modern, and at 20 bucks each they won't break your budget.
We had the same problem so we made our own. CSS UI (http://css-ui.com/), open-source UI framework. The concept is to use pre-defined CSS classes to style any element.
Check out http://jacanasoftware.com. Their templates feature multi level tabs, clean css, it validates, and the CSS won't mess with your controls. I highly recommend them.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Can anyone out there recommend a good online resource for CSS 'design patterns'?
I know design patterns in a software context usually refer to OO based design patterns, but I mean design patterns in the broader sense of the term: i.e. common, clean solutions to common problems / tasks.
An example of such a resource would be this list of table designs, this gives you all you really need to know about how to make tables look nice using a set of CSS techniques.
Other examples of common problems which could have nice set solutions would be things like rounded corners on divs, highly usable form layouts etc.
Some websites that address web design patterns are listed below. They do not specifically provide the HTML and/or CSS in order to achieve the desired results, but they do provide examples of live sites that you can view source on (or, even better, use Firebug).
UI-patterns
This is probably the best of the bunch. It breaks things down into categories that cover the breadth of web page design tasks. You'll find categories such as tag-clouds, live preview and user registration among many others. This is a really comprehensive resource that is well organized. It explains each pattern and provides plenty of examples.
Pattern Tap
Similar to UI-Patterns although currently not as comprehensive. It takes a more social approach to collating design patterns by allowing users to create their own categories ("user sets") and populate them with their own selection of sites.
Yahoo Design Pattern Library
Unlike the other two, this one doesn't provide many examples of real sites. It is well organized and quite comprehensive.
Elements of Design
This is a blog showcasing various elements of web design. It doesn't discuss the patterns, but is good as a quick source of inspiration, or as a means to start your own analysis.
I refer to A List Apart articles all the time for those sorts of
things.
They do a lot of trial-and-error research to come up with really creative ways to handle those common CSS problems in the cleanest most portable way possible.
The Floatutorial is a great starting point for learning the important CSS attribute "float" and how to use it to layout content using some common patterns including two-column and three-column liquid layouts.
Floatutorial takes you through the
basics of floating elements such as
images, drop caps, next and back
buttons, image galleries, inline lists
and multi-column layouts.
The already mentioned A List Apart is really good. Another site I've used since I started web development is SitePoint.com. Here is their CSS Reference. If you want a good CSS book their's is one of my favorites.
The nearest thing to a "design pattern" in CSS are common layouts. The best tool for taking advantage of common layouts, column widths, etc. is 960 grid system, at 960.gs
Watch this screencast for a brief intro. It saves a ton of time, and helps you apply all the common layout patterns with minimal code:
http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
All you have to do is to apply the proper classes and do a little arithmetic to make sure all the column widths add up.
The one book that I recommend the most for CSS is CSS Mastery by Andy Budd (cssmastery.com). It is somewhat small, but it has helped me more than any other CSS book.