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!
This is less of a code-based question and more of a best practices-based question I suppose.
I built a scrollytelling data visualization with svg elements using d3.js. While it works just fine on my desktop, it lags quite a bit on mobile (I'm thinking perhaps because mobile has less cpu/ram capability). While making it responsive using chrome dev tools for mobile, I suppose I figured because it looked fine for that particular device (which it does design-wise), it would render the elements just the same performance-wise (which it does not when deployed to an actual hard device).
I suppose my question(s) is - Is there a best practice for preventing something like this from happening? I'm assuming I should have staged this on an actual device earlier so I would pick up on something like this occurring. Moreover, (and perhaps a dump question), are there well-working svg-to-canvas converters that would allow me to override this problem (are these even a thing?), so when device width & height is detected, it would run the canvas-copy as opposed to the original svg code which is better suited for more powerful/capable devices?
Many thanks.
I am working in a hybrid application which target is Windows 8.1 and iOS, but I am looking the size of the components (buttons for example) are different.
I would like to know how to handle this difference in terms of size depending of the application target?
Thank you in advance
Not sure what you want to do... but I think issues you are having is that UI elements are styled differently in different browsers.
This is a common problem we all face... not to worry, just use reset.css so that all your ui elements appear similar across different browsers and operating systems.
--- EDIT : RWD solution for different resolutions ---
If you want to have different style adjustments for different resolutions... you can go for Media Queries...
If you have just started building the app, a front end framework, like bootstrap, will get you up and running quickly.
Learn more about bootstrap grids here
But if you have most of stuff done media queries is the way to go.
Anyone out there done reserch or have real good experience with 3rd party scroller's for apps running in a webview? Especially with more than one divide that scrolls?? i.e. A webview with a navigation panel and a details panel.
When there is only one divide requiring a scroller, it works smoothly but in the situation above, its very choppy. I'm sure a lot of developers have encountered this issue.
I have tried iScroll (and is best so far) along with other plugins but the quality of the scroll is less than desirable. I can't use iFrames because I need to tweak the style of some HTML docs that are pulled from our server. I've searched online for a way to invoke the native scroller in HTML divides and haven't found a way to. Is there a way and how could I do this?
I've been playing around using API's 9 thru 15 on various devices and I'm not seeing any difference when it comes to the performance of a non-native scroller. I'm currently developing the app on 15 if this is a help to your answer. Also, I have hardware acceleration off and this works best.
I've played with jqm, Sencha, and alike and they seen to have satisfactory scroller's. Does anyone know what they use? The issue why I'm not primarily using any of these platforms is the bulk and other performance issues.
Currently I'm building an app using raw javascript and this is proving to have a significant improvement in performance over all in animations within the webview layouts - Significantly better over any of the big name cross platform solutions. Unfortunately I am not experienced enough to build my own scroller so I need to find an out of the box solution.
Any ideas, leads or solutions so others that are better at writing apps with javascript can have a fighting chance building quality apps would be very appreciated.
With you experiences and experties, please include what API level you were using.
Thnx
I did many tests about this. I won't recommend a third party scrolling based only on HTML because on my experience the problem is not the javascript, but the webview itself:
1) Iframes performance on WebView is weak weak weak. I got a nearly 40% decrease on performance for any (complicated) app just for placing it inside an iframe. Besides, they cause much more problems if you use hardware acceleration.
2) Scrolling of DIVS is acceptable if stuff in divs is simple and SHORT, but the performance decreases as you add more elaborate stuff to scroll. For example, in my case it made a difference to enclose everything in ul/li's (slower) or not (noticeabily faster). However, the feeling is not perfect, ie., if you are used to native scroll, you realise this is not native scroll.
3) Raw scrolling of the body is very good. Besides, you get native-like feedback, such as the glowing effect on overscroll, etc. But mind that this scroll is NOT using javascript, it's just a page bigger than the webview that you let the user to scroll and WebView takes care of it. In my case, this was the only acceptable scroll experience I wanted for my users.
So I came with a mixed solution: I did a JavaScript-callable Java function that would open another webview with requested size like if it was an iframe, so I could open it from HTML and fill with stuff, it was not very difficult to do, and the improvement was awesome.
More things:
4) Scrolling a WebView from Java (scrollTo) was very useful in my case, where I had a huge HTML page loaded (kind of a magazine) to be swipped. Performance if I asked the webview to scroll from Java was much, much, much better than relying on JavaScript to do the scroll.
5) Hardware-Acceleration improves the scroll speed a 100% -setLayerType(HARDWARE)- but to be able to use it you have to keep you html very very simple. stuff like Display:none/block, etc completely break the application (see WebView fails to render until touched Android 4.2.2 for more info)
6) HTML5 animations on big images completely kill the scrolling experience.
7) All this is not valid in a couple months, goole is replacing the rendering engine to "Blink", so who knows what's gonna happen. I am restless.
With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"