I am trying to develop an interactive web app for mobiles, and I want to give the best experience possible for the largest number of mobiles.
To do so I decided to go with meteor because it takes care of all the heavy lifting around the logic behind the scene, but such a choice come at a price, and on mobiles every kb transferred can get expensive depending on processor, network speed, etc.
So now I am trying to select a very tiny front-end framework to help giving the best experience with smallest loading time possible.
We have now various solution trying to tackle this problematic such as pure.css, min.css, base, materialize, material design lite, but I am having difficulties selecting the best solution:
I do not always need the full set of funcionalities, so I should be able to build a subset easily
I want the best looking possible interface at a minimum cost (weight)
The package should handle well older browsers (mobile world is vast and furious)
Small interactions should be handled well to give a nice look and feel
The package should weight ideally at most 14kb to maintain a great experience without loading time on most phones and networks (More or less !!!)
So far I feel that material design lite is the best containder but what do you think ? Is it easy to customize (add social icons, remove unused icons, limit effects to very specific ones) ? Any other frameworks ? Better go without any framework and build interface from the ground ? Not worth the effort ?
A lite framework sounds like the way to go.
Alternatively, you can use a task runner to eliminate unnecessary css in your files. The most popular grunt/gulp task seems to be these:
https://github.com/addyosmani/grunt-uncss
https://github.com/addyosmani/gulp-uncss-task
I have used these and they can greatly lower the size of your css files.
Related
I am trying to make my SharePoint site responsive
so that it can be viewed easily in ipad, iphone, tablets, etc.
What is the best way to do it with Bootstrap or media query.
Any suggestion will be great help.
I was in the situation to choose which one i would use to implement a responsive design in SP2013 and so I collected pro's and con's foreach technology.
Device Channels
Yes I'm talking about Device Channels even when they are not mentioned in the question, because they can deliver the best performance and optimizability for the enduser and the client - in my opinion :)
Pro
individual designed HTML/CSS and JS foreach device
-- no need for hiding or removing incompatible elements
-- faster because you just load things you really need
-- faster because you will likely have less CSS/JS and HTML
-- faster because you can use optimized code foreach device
-- better you can better point out which channel has errors and changes dont affect the other channels
Con
individual designed HTML/CSS and JS foreach device
-- you have to append changes to each masterpage
-- more work to accomplish the same result (in general)
-- redundancy
bound to User Agent Strings
growing diversity of devices
-- may equals growing diversity of masterpages >> work
Bootstrap
Pro
mighty, easy to use framework
-- a lot of documentation
-- fast results
-- if you like it - all the Bootstrap styles
there are already projects using it so you may dont have to build it from scratch
-- http://responsivesharepoint.codeplex.com/
Con
Bootstrap is a huge framework and has 8000+ lines of code in the unminified CSS and JS files
-- 2 requests extra for ~ 130kb & 30kb
-- a lot of styles and script for your browser to handle
Bootstrap is not build for use in SharePoint
-- it's overwriting SharePoint styles which makes some features (ComposedLooks for ex.) less valuable
-- there are a lot of custom CSS needed to make it work seamless with SharePoint
SharePoint has it's own weird way to do things and that interferes with BootStrap
-- tons of CSS
-- tons of JS
-- tons of HTML Attributes
Media Queries
Pro
only necessary CSS
no JS if you dont wan't to
you can create your own layout
with response.js even in IE6 working
you can easily separate which features should be available in certain screen sizes
Con
several sets of CSS depending on the number of Breakpoints
every feature needs to be developed by yourself
it's not easy to write generic code that can process every SP2013 Page
-- it depends on the complexity of the content shown. I write about 150 lines of CSS that created a mobile view for publishing pages that contained the navigation and content, but no features like editing, etc.
-- if the client's want every feature on his smartphone, there is a hell lot of work and testing needed. (Plus who the hell wants to do that on their phone?)
Conclusion
I'm not sure yet (and it would be awesome to get a lot of feedback to my results), but i tend to use Media Queries. Why ? Well SharePoint has it's own way to handle desktop users and i wouldn't customize that build in functionality if not explicit ordered. On the other hand SharePoint doesn't provide a real UI for smartphones. I don't want to use BootStrap because it contains a lot of styling which will produce problems in branded environments. And I won't use Device Channels because of the downsides.
What do you think ? Are there important aspects I'm missing ? Are there other solutions which are better suited for realizing this ?
I wanted to get opinions on Responsive Design approach, both for designers and developers. My experience has been thus far using a gridless approach, where media queries change DOM elements at the needed breakpoints. This has allowed me to be very nimble for accommodating design specifications. Sometimes I get a "grid" design that just doesn't break down to the right number of columns and that would screw up using a standard grid system like bootstrap (though I realize you can easily customize bootstrap to a certain degree). For example, I once received a design having layouts for 10, 8, 5, and 2 columns.
My concerns are that I'm perhaps:
Making the whole implementation harder than it is.
Ending up with complicated, fragile (and sometimes spaghetti) CSS.
Making future development more difficult.
I'd appreciate any opinions regarding pros and cons on using a Responsive grid or going custom gridless. Do we need to keep the designers on their toes and QA the design as per platform? Is there more flexibility to grids that there seems to be?
I'd prefer to start using either Foundation of Bootstrap, but any recommendations are welcome. Thanks!
Last year we started to use Twitter Bootstrap http://twitter.github.io/bootstrap/ and it became an excelent way to guide the responsive design on our web application.
Take a look and check the benefits that you can get. For us, the most benefits were:
- Cross-browser & Responsive (of course);
- Guide with great documentation to developers (that probably was the greater);
- Ease and simplicity;
If you're all about developing your code more from scratch than utlizing some pre-build foundation then I first suggest a look at XY CSS. XY CSS allows you the versatility of defining however many grid columns you want. You could design with 36 grids in mind for example, which would potentially allow you to contain 36 individual columns across the width of your screen.
Another option would be to use a pre-build but relatively easy framework to modify, which I would suggest Columnal. I like Columnal as the CSS inside is well written and it is not overly complex while also not being too simplistic to be limited in functionality. It's also very easy to modify.
I would suggest against Bootstrap because firstly, I am not a bootstrap fanboy, and secondly, I find it rather "bloated". By bloated I mean it provides you with a lot of crap that you don't necessarily need, or stuff that you want, but you would rather use a different system that is faster, or more well documented, or any numerous other reasons. My primary beef with bootstrap is that it was originally made for Twitter, and then they said hey let's give it to everyone else and they modified the shit out of it and now it's this unkind beast of thing where you almost have to use what they give you because if you don't the system punishes you at every turn for trying to change anything. I prefer to stick to systems that were originally intended for use by the likes of people like you and I. For that same reason, I would suggest foundation or bootstrap.
This is my personal opinion and should not be construed as anything but my opinion.
There are many grids and framework to choose from. A Google search for CSS frameworks will return a dozen articles that themselves list a number of frameworks to choose from.
When it comes to choosing one, it's easy to be lost without having an intimate knowledge of all of them.
What are the main factors that go into choosing a CSS framework, and how will those choices map to certain frameworks?
More generally, how does one choose a CSS framework?
Note 1: I'm using "grid" and "framework" almost interchangeably here, but there is probably one I should use over the other. Corrections on this are welcome.
Note 2: I am well aware that some choices will depend on taste and accordingly, this question can turn into a "best of" contest/subjective topic. I'm trying to keep it as answerable as possible, as I'm pretty sure many have this problem/question of choosing a framework and an answer to that would benefit the community. As such, improvements to this question are welcome rather than just closing it.
When choosing a framework, consider the following questions :
Language : Some frameworks are written in SASS. Others are written in LESS. Yet others are written in pure CSS. Pick a framework written in a language you're most comfortable working with.
Features : Some frameworks offer just a grid. Others add typography. Yet others add a whole bunch of custom UI elements. Pick a framework that corresponds best with the features you want. You don't want a framework with either too few features or one that's bloated and contains many features you never intend to use.
Modularity : You don't want to overwrite 50% of the framework's output with your own custom code. If you do pick a framework that has many more features than the features you need, make sure it's modular enough to easily get rid of much of the code bloat.
Responsiveness : Pick a responsive grid if you want your page to be responsive.
Cross-browser support : If your project needs to support older browsers, make sure you pick a framework that supports all browsers you need to support.
I built my own framework Cascade Framework because none of the frameworks out there answered those questions the way I wanted them to. Feel free to check it out.
The first thing to start with are the requirements and goals of your web project.
1. Do you target only a mobile audience?
If you want a Web-App, you'll need more than a CSS framework, a mobile framework that combines look and feel for specific target devices' UI with functional elements by means of Javascript. The next decision will be if the framework better supports smaller smartphone screens, tablet screens or both.
If you don't need the more functional Web-App approach the way to go are frameworks that are responsive. You will have to concentrate on how you want to arrange and order certain page elements on different screen resolutions and what page elements can be turned off on the smaller resolutions. (This sometimes leads to political debates with the stakeholders debating around what is (more) important and what not).
2. Do you target both mobile and desktop audience?
You want a framework that supports reponsive or fluid layouts for greatest support of your audiences clients. If the graphic design you have to produce is more static the responsive route suits better as it allows easier planning in the different stages within the breakpoints. Most designers currently follow flexible approaches, lightweight, elegant, presentational, not-so-portal-like that also allow fluid implementations (where certain or all page elements are allowed to stretch or grow according to the client/browser viewports).
3. Do you target only traditional audience?
Then simply choose the framework you're confident it allowes the easiest implementation. Did the designer use a grid? Then maybe the CSS framework fits it. Some CSS frameworks come with a nice variety of design templates for Gimp, Photoshop, Illustrator and others, so maybe the design can be based on the template upfront which allows for the best realization.
Two other considerations:
A. There is no graphic design
If you start without explicit design templates I would choose a framework that allows for easy integration of Typography, offers lots examples, use cases, pre-defined page elements or components (buttons, navigation, thumbs...).
B. Time constraints
No time? Some frameworks come with their own or third party customization scripts or wizards. Choose the elements or components you need, turn on or off certain JS libraries, reset stylesheets, things like that and download the final package. That's it.
Some frameworks are pretty mature and well tested so the absence of a vibrant community may not tell you that much. Depending on your skills a lot of support may not be necessary (and even be a bad sign: The grid/framework should be simple and stay out of your way. The questions that may come up should so be the usual CSS questions that are quite common and can be answered even without details of the underlying framework).
Two examples to illustrate two approaches (more grid <-> more responsive):
http://960.gs/
Definitely take a look. Follow the "view the slides" link to read nice background information. A true grid system. It also links to derivatives that support fluid and elastic looks.
http://twitter.github.com/bootstrap/
Modern, nice hype. Lots of components. Customizable. Responsive.
Web-Apps:
http://jquerymobile.com/ and http://www.sencha.com/products/touch
Most grids are 95% the same: they define the width of columns + include a clearfix.
You can even make your own grid if you like. So therefore, if we understand that most grids are essentially the same, which one is the best to use?
1) Customize Twitter Bootstrap by only downloading the grid. It's a great choice because most people are familiar with the "span1, span2, span3" convention. Also, it's available as fixed width and fluid (ie. responsive).
2) 960.gs is probably the most commonly used fixed width grid.
Unsemantic is the responsive sucessor to 960. Both were developed by Nathan Smith.
One question you can ask right off the bat is:
Do I want the framework to be responsive?
The answer to the question will cross many options off your list.
Another main question I ask is what kind of community support is behind the project. From my experience it is a pain to get invested into a particular project and than have it die and get no support. It is nice to have something that has key backers and a large following.
Considering the UI designers from Twitter made Bootstrap I wouldn't just call it hype surrounding that framework. It's excellent code and the most complete framework. 960.gs is a grid system which boostrap has called scaffolding. Bootstrap is also smartphone friendly. So where someone would have to hack together jquerymobile, jquery, 960.gs, plus all the plugins they need. Bootsrap already comes bundled with plenty to get you started with and works on all browsers and phones/tables.
I have used Flex for about a year before deciding that I would rather develop Actionscript projects.
At the time, it seemed that the framework was too heavy for the kind of work I was dealing with, mainly small web applications , personal sites, portfolios this sort of thing. I also thought that Flex was like a odd hybrid , something targeting seasoned developers but at the same time , adding some function wizards that seemed to target beginners. It seemed overly complexed in some areas and way too basic in others.
On the other hand, the IDE was great , definitely no comparison with Flash CS IDE , so for me it made sense to stick to AS3 projects and use Flex , now FlashBuilder to write my code.
( I need to point out that I'm not a Flash designer, so working with Flash CS was never an option. )
It's been a while since I had a look at the Flex framework and I'm wondering about other Flex/Flash developers position on this issue.
Would you only consider Flex for enterprise level projects? What are the advantages of using one over the other? If you were a Flash developer and moved to Flex, what were your motivations? If you're creating both Flex & Actionscript projects , what are your choice criteria?
Edit:
Although I have received a great answer, I would have been interested to hear from Flex's users, what's your main practical motivation ( as opposed to philosophical :) ) for using Flex over pure Actionscript projects?
Preamble: my experience is primarily with AS3 projects built using a combination of the Flash IDE (FIDE) and Flash Builder 4 (FB4).
I generally prefer pure AS3 (PAS3) projects over Flex projects for the following reasons:
Size - Flex projects have a much larger minimum size than PAS3 projects. Not suitable for lightweight applications.
Performance - Flash is not known for its performance, and the layout computations required by a complex Flex application will hammer the end-user's machine. To them, things just end-up feeling slow, non-responsive, or "gunky". Unfortunately, this means that the applications where Flex might be most attractive (i.e. a very complex, adaptable, UI) are the exact places where it stumbles. In the end, you end up writing all this bizarre performance-enhancing optimization code that takes away most of the time you gained from using the built-in layout system.
Metaphor and Appearance - Flex aims to allow developers to provide end-users with a mature, flexible UI that has the same widgets and widget behaviors that they are used to from native applications. However, due to the performance problems echoed above, the UI never feels quite as nice or responsive as a native app. In addition, it's missing all of the OS-specific peculiarities that end-users are used to and will expect. I don't really understand the motivation to try to emulate native app development or behavior - you're never going to win that fight. Best to make something that stands by itself, which is what most native web applications are doing.
Flexibility - Dovetailing into the previous argument, Flash's main advantage is its ability to do things that traditional UI widget libraries can't do (at least not very easily). You can make some really, really novel UIs in Flash that just aren't practical to do in native apps without mucking about in OpenGL. Using Flex makes creating novel UI hard again (but it does make creating standard UI much easier, even if it is, in my opinion, sub-standard UI).
I'm curious if anyone has some good examples of Flex being used in any popular, public websites. Grooveshark is the only one that I know about (which is quite nice, but suffers from many of the problems I've outlined, especially on OS X where Flash performance is still poor).
However - it's a tradeoff. Always remember that your time is valuable. Your users might accept a slightly clunky, slightly confusing interface if it lets them do really cool things and that would mean that you could release it now as opposed to later. This brings is to the major downsides of PAS3 development:
Effort vs. Reward - You have to program all of your own UI. All of it. This can lead to some really, really bloated code where you have to define tons of event listeners for every button you want to create. I don't know how many times I've written various kinds of layout code specific to what I was working on. You can try to write your own abstract classes for these (which I have done), but at some point you're just going to end up re-implementing the Flex framework. Hardly worth your time.
Development - You can either use just Flash Builder 4, in which case you have to construct every graphical asset by hand in code (which takes forever), or you use the FIDE, in which case you can make lovely artwork but you're stuck with a stone-age code IDE and it takes forrrrrreeeeeeevvvvver to compile anything. Currently I use a hybrid setup where art generated in the FIDE is automatically imported into my FB4 project, but even that is not a perfect solution. They really need to be integrated better.
Another set of things to keep in mind: things that Flash sucks at.
Flash sucks at text. Do not try to re-implement a web browser inside Flash. Flash is actually quite good at displayed relatively small amounts of text that is unselectable (and, through the use of embedded fonts, is always pixel-perfect), but don't try to create large, expansive text documents inside your Flash project. First, performance will be terrible, and second, users will expect the text to behave the same way all other large text fields do in their native applications (most specifically, their web browser). Selecting text in Flash doesn't feel right because it doesn't feel how your OS does it.
Flash doesn't play nice with mouse and keyboard input - it constantly fights with the enclosing browser for focus. If your system needs either of those things, users need to click on it first. Don't fall into a trap where people will get confused because their inputs are going to the wrong place.
Flash is a performance hog - we've all heard this one, and it's not nearly as much of a problem as people like to think, but it does mean that you'll have to put a lot of thought into the performance of your system. Your UI should run at a stable 60FPS when being used and should not use much if any CPU when the user is not interacting with it. If your FPS dips below 60, then your UI will feel slow and gunky compared to native or HTML5 UI. Also make sure to watch for memory leaks.
In the end: user your head. Both approaches are just tools in your arsenal.
I am working on the rewrite of a large VB6-based application. We are moving from Windows Forms to web-based deployment using ASP .Net. There are about 50 core users and all are internal to the company.
We need an efficient way to try out different designs in order to investigate the information architecture of the site, the workflow, and the overall look and feel. Ideally, the prototype would look good enough to show to the users in order to gather feedback.
A few ajax-style drop-down menus or controls would be useful to demonstrate our ideas, but not at the expense of quick prototyping.
It feels too early to break out Visual Studio, and we need something more than pen and paper or Visio... Any suggestions?
Jeff Atwood had a nice article a while back about this:
http://www.codinghorror.com/blog/archives/001091.html
We used Visio the last project and while the Visio document screens look nearly identical to the end result I'd recommend against doing a pixel-perfect prototype. Simple rectangles and simple coloring are better and gives the designed and the web developers more freedom.
In our case some of the screens were developed by a person without good knowledge of limitations of web apps. Depending on the team members, this could lead to endless discussions about what is possible and what is not.
Have you taken a look at the excellent Balsamiq?
I use JustProto.com - it's very simple but works very fast. I regret there are no ready components to use but you can create your own masters.
Anyway - I did a few prototypes with JP and for me it's fine enough.
In the past we've used full page graphics - either pretty designs from our design team, or just Visio/PowerPoint (don't ask) mockups - dropped into HTML pages as a background and then added ImageMap links and dropped some dynamic controls on top - Drop-downs, pop-up/accordian menus etc to link most of them together.
This worked quite well in for A/B usability testing with our users - some were slightly confused by the pretty design versions, as they looked more like usable web pages, but they quickly got the hang of it.
For large systems, you really need something with masters/templates. Two good threads here on SO:
What tools are there:
https://stackoverflow.com/questions/156937/balsamiq-mockups-alternative-for-building-wireframes
Why mockup tool instead of IDE:
Whats the best way to create interactive application prototypes?
And here is the most complete list of mockup tools I know of:
http://c2.com/cgi/wiki?GuiPrototypingTools
(I am the author of this one: MockupScreens).
You can use Balsamiq mockups, is a very good software and easy to use for prototyping, mockups can make dynamic and complexity you need, not very expensive and has an evaluation version and limited version online.
If you want a much more complex software has components and functional and you can use Axure is a prototyping software very complete, you can export and test the prototype in the browser with all the features, I invite you to go to the official pages there you can find examples.
Balsamiq link: http://balsamiq.com/products/mockups/
Axure link: http://www.axure.com/