So I am using phonegap to create a hybrid application. Now obviously I have many divs(page size) that I hide and show using css "visibility: hidden and visible" property. I read somewhere that by using -webkit-transform: translate3d() I can hide the divs offscreen and show them again when needed and that this technique is much better. Does anyone know is this really true or not?
The main reason why anyone would want to use translations instead of standard visibility or display attributes is perception of performance. One can control exactly how a transition from one state to another state performs. A good example is mobile apps where transitions with animations are very popular.
If you want to use it within your app and do not need third party controls or out of the box MV** support, take a look at the Famo.us framework (http://famo.us/). While it lucks controls, it is very fast, uses transformations and incapsulates browser details.
Kendo UI Mobile is another good framework. It is a MV** framework, has a reasonable set of controls and ability to control look and feel. While it is a complete framework, one can integrate it with with Knockout and AngularJS.
And of course, give it try to Ionic (http://ionicframework.com/) and see if it is fast enough for you.
In any case, it is the best to use some framework and not use it directly. It is a lot of work to do otherwise correctly.
Related
I am starting to build my angularjs material mobile site. I am taking an existing desktop site already built and making it responsize for mobile.
I added the following tag in my header HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Upon refreshing im noticing that everything now appears to be zoomed in and font size had increased. Ive been adding style tags to reduce the font size manually but its getting really teidous and this site needs to adjust to tablets as well.
Cant seem to find any documentation that shows best practices on how to handle this. Am I suppose to play with the intial-scale value in my meta tag and lower it until I find a sweet spot that would work ith all my devices? Or am I suppose to play with the CSS and lower the font size of all components manually?
I am a bit confused on what best practices are for this. The AngularJS Material website has no mention of viewport issues. Would anyone be able to assist or provide some insight?
AngularJS Material works with breakpoints, as most style frameworks do.
You can find a reference for the breakpoints here: https://material.angularjs.org/1.1.5/layout/introduction
If you are new to responsive design, then you should start by some basics, as in what actually is a viewport, what does it mean?
The browser's viewport is the area of the window in which web content
can be seen. This is often not the same size as the rendered page, in
which case the browser provides scrollbars for the user to scroll
around and access all the content.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
In your meta tag, you define the viewport behavior, and what you defined is pretty much the standard to go by.
The reason why your font-sizes are changing is most likely because the app had initially styled them one way without a defined viewport, and now that your viewport has been defined, you're seeing a different scaling.
Now, another very important point I noted in the beginning is breakpoints, what are breakpoints and how do we use them? And to address a part of your own question, what's the best practice?
If you are familiar with classic CSS, then breakpoints can be referred to as media queries.
Media queries are useful when you want to modify your site or app
depending on a device's general type (such as print vs. screen) or
specific characteristics and parameters (such as screen resolution or
browser viewport width).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media queries are used to define style changes, based on a given device width (and/or height). In most cases, you go by the width definition alone (it's also what you'll see as referred units in various style library docs, such as AngularJS Material).
The exception to only defining media queries by width, is when you want to be very specific towards tablets. This is because bigger tablet sizes collide with desktop breakpoints, which is usually standardized to begin at 960px (sometimes you'll see 958px or 959.8px).
Now, what is considered best practice?
The best practice for responsive design is commonly referred to as the "mobile first" approach/design. You start by designing for the lowest screen resolution you want to support (280px for very outdated devices, 320px by today's standards) and work your way up.
Mobile-first design is a key ingredient to successful product design.
Designing for the smallest screens first, and then working your way up
empowers designers to focus on the core functions of their product.
When you focus on the core of your product and strip away the rest,
you are able to pinpoint the most important UX components of the
product.
Source: https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
Extra: https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/
You can find various articles on the mobile approach very quickly by doing a very simple Google search query if you want more references etc.
My advice, would be to familiarize yourself by using the defined breakpoints in AngularJS Material, and use the same breakpoints in your own custom CSS if you want to apply more custom styling that's not easily achievable by native uses of AngularJS Material.
This way, you'll learn the basics, get familiar with the concept, and then, in the future, you can start thinking about incorporating things like NativeScript with Angular, which is what you'd ideally be using in a mobile app development environment.
Today we’re happy to announce an exciting new way to build web and
mobile apps with Angular and NativeScript.
First, some background: since the beginning of Angular, you could use
NativeScript with Angular to build mobile apps.
NativeScript is an open source framework for building truly native
mobile apps with JavaScript. It lets you use your existing Angular
skills, and as a result you get a native UI & performance on iOS and
Android.
Source: https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link to NativeScript, here.
Happy Learning & Coding!
I ran into this beautiful UI mockup on Behance and am very curious about the best way to implement this.
https://www.behance.net/gallery/25264659/Google-transitions
Essentially, I would like my search bar and logo to animate up to the top exactly like this after the form (aka the text input) has been submitted.
My app is an Angular app, so would it be more practical to create an Angular directive? Or implement this with pure CSS or JQuery (independent from Angular)?
Your animation will be independent of AngularJS. In regards to performance of the animation JQuery is by far the absolute slowest. The standard would be to use CSS transitions / animations. If you are not comfortable with CSS then user something like velocity.js. It has a syntax similar to JQuery but used window.requestAnimationFrame making it potentially even faster then CSS.
All Angular would be used for would be used for would be to call the animation or add / remove a class to cause the CSS transition to animation when the search is underway.
As for the animation itself I unfortunately cannot help much with, those things tend to take a lot of effort to get looking good.
Imagine we want to create a cross-platform (iOS, Android, Win...) app using PhoneGap (and we are as expert as to know that native-apps has higher performance in contrast with using a framework but anyway we just decided to do it with PhoneGap).
The app is really simple 2 pages (LOGIN/REGISTER) and nothing more.
We are handling the login and registration process somehow with JAVA
and it's not matter for us now.
What is just matter is the performance of the user interface (including time of initializing the app and motion and transition of pages inside of the app). We implemented two pages (LOGIN/REGISTER) with HTML elements (Form, Input, ...) and there's a button for switch between two pages with sliding effect and we used jQuery mobile for that.
The question is if we all forget about he STRATEGY of using HTML
elements and jQuery mobile and instead using a new strategy which is
creating canvas and using a library like KineticJS or other similar library inside
and implementing our LOGIN/REGISTER and TRANSITIONS (slidding effect)
all inside of the canvas
.
will this change of strategy affect the performance of the app?
and if the answer is yes in which direction? The performance will increase or decrease?
What would be the best Javascript framework to implement objects that can be dragged around the window and hovered over to make other objects appear?
I was thinking about AngularJS but is that the best choice? jQuery doesn't seem to be versatile enough.
Also, which one is the most cross-browser compatible?
Thanks
Edit: jQuery UI could be an option but it seems that what I am trying to do would be animation-heavy and a framework using hardware acceleration would be more suitable than one using browser acceleration?
You're only going to get native acceleration using HTML5 in combination with CSS3. To that end, there are means of implementing something similar to dragability, which, in combination with this answer, may achieve what you need via the events. JS still required, but much, much less.
The downside is that you lose browser compatibility. To remedy this, check out Modernizr. You can add in jQuery UI if a legacy browser accesses your site, but otherwise stick with HTML5. As you can guess, doing animations without Flash and with native acceleration AND browser compatibility can get hairy quickly.
So in Silverlight I've seen an app that had 4 windows together in a box shape. When you click on a window, the windows will rotate to the upper right corner and enlarge while the other 3 shrunk. Then if you click on the enlarged window again, all the windows would go back to their normal size. Now I know all of that can be done in Silverlight (w/XAML and Expression Blend). But what would I use in the HTML/CSS/JS libraries to get the same effect.
Another way of putting it is: if you wanted to have a website with heavy UI razzle-dazzle efects what HTML/CSS/JS libraries would you use or recommend?
You should be able to get a fair approximation of this type of functionality using the jquery UI layout plugin. You will have to write some of your own javascript to get it to do exactly what you mention above, but the framework is definitely there
http://layout.jquery-dev.net/
They have a great page with a lot of good demos to look at.
Take a look at jQuery/jQueryUI. It is commonly used to manipulate DOM and has lots of adding. One of them be what you're looking for.