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 ?
Related
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.
I run a design firm and have frequent need for Drupal development. I'm looking for a bit of guidance on a Drupal workflow that will work best for my company.
My experience working with Drupal developers in the past has been great for back-end development, and chaotic for front-end development. Projects end up with multiple and inconsistent CSS styles, and doing quality control on the visual aspect is very time-consuming.
Moreover, I'm a front-end coder, and use HMTL/CSS/JS prototypes for all phases of projects. I would prefer if the front-end coding I do to was used by the developer instead of going to waste.
However, this workflow hasn't been compatible with Drupal dev partners so far. Because they use themes, and retro-fit them to the design I give them, they aren't able to use the HTML/CSS/JS work I do. Moreover, I have a responsive framework that I like (Foundation), and my developers want to work with the standard responsive Drupal theme (Omega). I don't like Omega because it isn't fluid.
Then there's things like my developer telling me they can't do a carrousel that uses CSS (background-image), because the available Drupal carrousel modules are all based on using the HTML img tag. Does everything have to be based on modules?
Going back to the HTML/CSS inconsistencies and the time-consuming design QA, I think this comes from trying to retrofit a theme. The code is very messy and it makes it hard to target elements for styling. It also makes it impossible for me to do my own CSS changes if I want.
So, in short, I'm looking for a completely different design workflow, and I'm looking for feedback on whether it's workable in Drupal without inflating costs.
Is it possible in Drupal to use front-end code (provided by me), throw in some PHP tags, and end up with cleanly-coded pages, instead of relying on themes? Would this reduce costs (because the HTML/CSS/JS is provided), or would it inflate costs (because it's easier to use a theme)? Are there any security issues involved? Are there update issues involved? In short, what's the big advantage with working with pre-fab themes?
I really, truly appreciate your comments.
We usually develop from the backend to the front end. Modules like Views add many div tags, classes and tags so the theme developer can make better use of them and fine tune the design.
I do not think that is a "messy" code unless you are doing all of the work in tpl.php files.
Modules simply processed the data. It should not heavily theme the output. For a better understanding, see the image below (from drupal.org):
If you want to do any database intensive work in the template level, you will have to load many stuff again that you could simply do in a module.
In my opinion, if your developer is not hardcoding the HTML stuff, he is doing it right.
Keep in mind that you can override most of the theme functions so you already have the flexibility if you want.
Is it possible in Drupal to use front-end code (provided by me), throw
in some PHP tags, and end up with cleanly-coded pages, instead of
relying on themes?
Yes. But you can't simply use slider-image.php like files for that. You will have to add necessary theme functions to and pass the variables to it. IMO, it's relatively more work if you need to completely rewrite the theming functions.
Would this reduce costs (because the HTML/CSS/JS is provided), or
would it inflate costs (because it's easier to use a theme)?
I do not think so. If you have multiple backend developers working on code, ask the theming team to make changes to HTML/CSS. CSS can make your site look worse, and a security bug can ruin your business, expose all your user information or even worse.
Are there any security issues involved?
Most likely. Default theme functions tend to come with much better security. Even though few bugs come out, they will get fixed soon by the community.
Are there update issues involved? In short, what's the big advantage
with working with pre-fab themes?
Because there is a whole lot of work that you can simply adopt. That will also block you from adopting others' CSS work though.
I work somewhere with highly stylized well thought out front end builds which are almost not compatible with the way Drupal theming is handled currently. Having front end developers track down bugs is also very problematic. It looks like there's some acknowledgement of this in Drupal 8 at least. At this point we frequently rework Drupal to work as an API and then build a lightweight PHP Framework app on top to pull content when we need it which gives us total flexibility to do anything we want with the frontend. Another alternative is to checkout Expression Engine where you are explicitly telling it what markup you want outputted and how you want your content to be placed in the markup.
The holy grail would be a very lightweight layer that was part of Drupal where we could use Twig to pull the content the way we want it and all HTML output was defined in Twig.
I am now working on something bigger than simple web page. It should be accessible on mobile/tablet/pc. Is better to use framework like http://foundation.zurb.com/ or implement more layouts for different end devices?
Whether you choose a framework or not, you will still have to write some custom CSS for different view ports.
But I would go with a framework regardless. They do all the heavy lifting for you, and hundreds of people have worked on them, which makes them more robust than anything you can come up with in a short period of time.
All you have to do is write some additional #media queries to customise your styles for different view ports.
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 am building a new WebSite based on Grails technology.
Concerning the graphical design of my website, I plan to use services from a professional web designer but meanwhile, I need to do some basics graphical design myself in order to have a "user-friendly" beta-version.
I have read through the stackoverflow.com site but couldn't make up my mind. Here is what I have found out:
how-do-you-choose-a-css-framework
what-is-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles-css-framework
what-is-the-best-css-framework-and-are-they-worth-the-effort
But unfortunately there are many contradictory answers.
First, some say that using CSS framework is backwards authoring and not a good thing. Others advice YUI Grids, BluePrint, 960 gs, YAML...And many say that Compass allows to develop CSS layouts easily and reusable.
So considering that:
I am new to the CSS world and I do not intend to be a web designer
My layout should be user-friendly (but not necessary awesome L&F)
It should be maintanable and easily improvable (by a professionnal web designer)
Easy to implement (in order to have something quickly)
What do you advice me for getting started with the web design of my site?
Thank you for your advices.
Fabien
First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can supply HTML or a Photoshop design and have it coded up for well under a grand (1k). Or get HTML/CSS designs free.
Then there is one thing you need to know and another two you need to work out:
all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's Transcending CSS is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.
you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)
what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's a good start for multi-column layouts. If you're a programmer, learn to use a framework like Django (Python), Titanium (Perl), something smaller in Ruby (because Ruby on Rails is a bit big to start with) or one in your favourite language.
Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:
understand inheritance (the 'cascade' in CSS) and the fact that anything can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);
learn about block and inline elements (Web Design from Scratch is a great learning resource and I'd recommend it), and that CSS can change this behaviour;
test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for HasLayout). What you can't tweak to get right in IE, use conditional comments to add CSS that only IE can see - never use CSS hacks - .htc files that add missing IE functionality (e.g. rollover styles on any element) are available;
learn about CSS positioning, and use 'fixed' sparingly;
put all your CSS in one file (for starters), and don't use inline CSS in the HTML;
styling forms and form fields is almost a separate skill :-)
Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and opacity looks nice, but requires non-standard CSS for now. although the more flexible rgba (a=alpha) method is widely-supported. As do rounded corners, but both worth using.
I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but read the arguments and the pros and cons). To avoid annoying default margins and padding, I always reset everything by doing html *, body * {margin: 0; padding 0;} then build padding and margins back in wherever needed - never been a problem so far :-)
What do you advice me for getting started with the web design of my site?
Get Firebug plugin for Firefox now!
Primary CSS uses:
See which CSS rules apply
Change CSS in real time and see the affect
Inspect other websites to see how they do things
I would not be able to develop CSS (and other web related technologies) without this tool
Take a look at YUI CSS reset/base/font/grid
http://developer.yahoo.com/yui/3/cssreset/
And Grid 960 also has some nice layouts (search for their site in google)
I don't know what OS you are running, but if you are a Mac user, I suggest a great free tool for CSS: Xyle Scope. It's not an editor but a CSS viewer/scanner, it let you browse easily the CSS code of any web page so you can learn better how css works and you can analyze any well done layout on the web.
CSSEdit (Mac Only) is a good solution for writing Cascade sheets, easy to use, not expensive, and reach of features.
Fireworks: I think is a great software to draft your layouts and make some good graphical works!
Dreamweaver: it's an all in one solution for web developing ... it's a really great tool to easily maintain synched your remote version of the website with your local one.
Coda (Mac Only) is a very good alternative to Dreamweaver, even if it don't let you manage and edit the .htaccess files!
For coding your web site I suggest dreamweaver or Coda, but an other good alternative is BBEdit (Mac Only).
Bootstrap, Its the best css framework i can suggest, there is another one called foundation also but i prefer bootstrap more since it is popular among developers and is extendible. There are few more other frameworks, I wrote a blog about that, Here Read it too if you want http://www.andwecode.com/freebies/5-responsive-css-frameworks :)