We Keep Coding

Best practices for designing an Angularjs Material mobile site - Viewport question

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!

Large sized images on website rendered on phones

I am working on a web application that stores and displays satellite images from a given location.
My problem is that these images are quite large (up to 20MB jpg-files) and this causes rendering problems on certain mobile devices.
On some android phones the image resolution is downgraded, while on some iOS devices the image won't even load. The iOS problem is maybe described here, but with no solution.
Does someone have any experience with this kind of problem?
I do apologize if my problem is to broad, but i am really just looking for some pointers or ideas.
I am developing in html/css with jquery/javascript and the server is hosted by cPanel with a Linux CentOS machine.
Regards Peder.

You basically have two options:
Split those large images into smaller images and tile them (still downloads large amounts of data, but at least the client can do it in pieces)
Downgrade image resolution. That is, dynamically serve the quality of image that the client can actually handle.
Many map websites will use a combination of both. Being, they download a few high-quality segments for the area you look at closely and low-quality for all the areas you aren't looking at as closely.

Flexible and dynamic web pages techniques

I have basic knowledge in html,css and good knowledge in JS. But I have problems with putting all this together. I mostly develop for Android, I mean native apps. I have good understanding of Android layout. Concept of dynamic layout is great in android, when I develop apps I try to use relative positions and dynamic sizes whenever it is possible, like match_parent,wrap_content. They are really powerful, apps looks great on any screen. Also there is such measure in android called dp density independent pixels. This is also great concept.
So I want to dive into web page development, but I don't know common patterns, techniques for building responsive and flexible pages.
I know a little bit about #media and viewport directives for CSS but I again I cannot put together all my knowledge to start building responsive web pages.
For instance is it better to use percantage instead of px, as I can see mostly px are used , I cannot understand this concept why not to use percantage everywhere to make page responsive ?
Maybe I am missing something important in web page development, so why I am asking about advice.
Please suggest maybe some good articles about current best practices for building responsive web pages(based on most popular engines Wordpress,Drupal,Joomla) or from the scratch for better understanding.
Also one important question is how to build web page mobile friendly and so on.
Thank you so much

If you are wanting to get going quickly with responsive web design, consider starting with one of the many established frameworks like Bootstrap or Foundation or Skeleton. There are plenty of others as well.
They will save you heaps of time at the start, and you'll get good cross-browser results. Pick one you like, jump in and then learn more as you go!
Good luck!

To design a responsive web page there are two option :
1) design to website one for computers and another one for mobile like facebook
2) same design
there are many techniques to responsive design :
1) you can use percentage for all your content but you must use many calculations to it
2) you can use grid system from bootstrap
3) you can use media and smallest your content and test it by your browser like firefox for responsive design view
4) you can mix between percentage and media .
in this techniques you must to know postion and display and how its works
main divs must be in percentage like body or main wrapper width 100% and inside divs must depends on thier width

Non-Native Scroller Performance within Android Webviews

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.

Animating image/3D/sprite with javascript/css3/canvas

Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.
I was thinking of exporting a 360 degree spin # 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.
That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file # 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.
So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!

If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.
On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)