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.
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 have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I have an asp.net website, it contains database calls etc
Whats the best way of taking an existing asp.net website and making it look good in mobile and tablet devices?
I have done some research but there seems to be so many options eg lessframework.com, jquerymobile etc
I havent used mvc before but a few people say to use mvc + jquerymobile
any help would be muchly appreciated
There is no magic bullet that will instantly convert your website to mobile. In fact without knowing the specifics of your website it would be hard to recommend a good fit for your situation since the tools you mention like MVC, JQMobile, etc. would be used in one case or another. With the question as you have posed it you will get personal opinion and there are millions of us with opinions... here's mine:
I would recommend not building a mobile specific website like mobile.website.com but rather look into responsive design where your website and the underlying data structs remain the same but your view changes depending on screen real-estate. Bootstrap or HTML5 Boilerplate or any number of design frameworks will help you get started. You just need to figure out a design that fits your websites functionality.
I use MVC + HTML5 Boilerplate (I love Razor) for most of my new projects but sometimes even it has too much overhead so I just start from scratch (multiple PSD's, convert to HTML in Dreamweaver, apply logic with MVC & client side scripting) but that is something you will have to decide on a project by project basis.
As a developer of a traditional ASP.NET web application (non-MVC) who is getting requests for a mobile-friendly version, I'm wondering where I might find some wisdom about the best way to approach the problem. We currently mask most of our database access through web service calls.
It seems like many shops would find themselves in this situation: We have limited resources and don't wish to create a maintenance headache by having versions of an application diverge greatly.
Is there a set of best practices for taking an existing System.Web application and reorganizing code in order to accommodate adding mobile-friendliness. The general approach I'm thinking of is:
Make small stylistic changes on the
client using CSS or even JavaScript.
Make any necessary changes in data,
workflow, or markup in server-side
code.
Keep as much code as possible common
to the two versions by organizing
non-UI logic into separate
assemblies. Conditional compilation
would be used in code-behind where
UIs must diverge.
What are the gotchas that I'll run into with this approach?
Short and sweet:
Read the W3C Mobile Web Application Best Practices
Separate your business/application logic and presentation logic as much as possible
Do server-side detection of mobile devices; serve an extremely simplified UI to mobile devices
Use client-side techniques like CSS media queries and feature detection (such as that done with Modernizr) to do progressive enhancement
The long version:
The most important thing to remember is that as similar as they appear, the mobile web and desktop web ARE different. The analogy I use the difference between a street and a sidewalk. Both of them are made for generally the same purpose - to get people from one location to another. However, they were designed separately and are intended for use by different modes of transport. You can drive a car on the sidewalk, and you can walk in the middle of the street, but neither experience will be optimal.
Long story short, for a good mobile site, you must design specifically for a mobile device. This doesn't mean you can't reuse logic - you definitely should. I'm just saying that using JavaScript/CSS to hide a few elements does not turn a regular site into a mobile site.
For what it's worth, I recently gave a presentation with one of my colleagues on mobile web development strategies. It is mostly targeted towards mobile web in higher education (college campuses) and my campus (UCSB), but many of the strategies and techniques are widely applicable. Interested parties can find the presentation and related resources here: https://it.ucsb.edu/groups/wsg/mobile-web-brown-bag
Resources
Server-Side Device Detection:
DeviceAtlas
WURFL
51Degrees.mobi
Client-Side Feature Support Detection / Progressive Enhancement:
Modernizr
EnhanceJS
Random Resources
Mobile Web Resources (My colleague's reading list)
W3C Mobile Web Application Best Practices
First, these days mobile doesn't necessarily mean doing the things that System.Web.Mobile come, but rather supporting the mobile use case and the limitations of mobile devices. Or, you want to strip down your app to be relevent to mobile users, and you want to do things like limit bandwidth required, browser plugins, heavy scripting and screen size required. But you actually don't need to go back to the bad old days of WAP and such.
From my reading the way forward seems to be to design for mobile first and then customise the layout using #media CSS to introduce more design/functionality concepts in more capable devices.
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.slideshare.net/arborwebsolutions/practical-beyond-responsive-web-design
I am evaluating open-source CMS systems to see which one(s) would be the best option to deliver rich mobile web based applications for mobile handhelds.
So far I am leaning towards Drupal because it seems to be the most extensible, flexible, best performance (cache & compression, etc) and has a good user management system.
The CMS must be able to deliver HTML content that is ideally rendered for most smart handheld phones. I have to assume most if not all would do so as you would just control the front-end (headers, CSS, HTML and javascript) to ensure it renders correctly...correct?
So, it Drupal a good option? And, is there anything else I am missing when choosing a CMS to deliver mobile web pages?
I think it depends on what kind of "rich mobile web based application" you are talking about. As far as rendering the front end for mobile devices go (such as screen size based UI etc.), so long the CMS allows you to control the stylesheets and JS flexibly that's all that matters.
The choice of the CMS itself depends on your own level of comfort also. Do take a look at Joomla! too
I think Drupal is Ok for your application but it has no built in support for mobile. I have worked with drupal but not with mobile web apps with Drupal. But Check this. It seems we can control the things as you expect.
Update: Check this as well
One thing to watch out for with Drupal is that the theme engine tends to be quite verbose. If you take a look at pretty much any Drupal site in something like Firebug, you'll quickly notice that it's full of nested-nested-nested-nested divs.
This makes it great for theming, since there's almost always an element, with a unique ID, to apply your CSS styles to. The downside is that it presents heavy, complex pages that could potentially cause problems for mobile browsers.