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!

How to place a checkMark as a character?

$("#status").html('<img src="available.png">Available');
Instead of checkMark picture I want a chekMark character.
Is there a way, please?

You could use U+2713 (Check Mark Symbol ✓):
$("#status").text("\u2713 Available");

Try
$("#status").html('✓');

try either of
✓
✓
one is hex, one is decimal. If I don't put code markers around them, you get
✓ ✓

See this: http://www.danshort.com/HTMLentities/index.php?w=dingb
✓ or ✔
Although I must say that I think a picture is a better option: you can modify it later at any time without changing your code.

Try this:
Decimal:
✓
or
hex:
✓
example: $("#status").html('✓');

You can also use a check mark in a web font.
This question (and the answers) are now five years old. For the sake of those coming from Google, I wanted to add another option that's become available in recent years, but is not mentioned in previous answers.
You can certainly still use unicode characters (.html("✓") or .text("\u2713"), but in the past few years web fonts have become more common. For example, material icons has a check mark:
https://material.io/icons/#ic_check
Google (who made and maintains material icons) also did a good job of explaining web fonts and how to use them here: https://google.github.io/material-design-icons/
Basically web fonts are the best of both worlds: the customization of images and the usage/dynamics of font characters. The advantages to using web fonts over unicode characters are:
control over style (you can make your own web font character of any style, whereas unicode characters are what they are)
use of multiple styles (you can make web fonts with numerous styles of check marks for different situations; you're not locked into one style)
code readability (very few developers will know what \u2713 or &#10003 means, but <i class="myfont">check</i> is easy to understand
portability: although every major browser uses a unicode font by default, there are still some computers or devices which may render with a non-unicode font by default. In fact, wikipedia's current list of unicode fonts is decently long, but the supported characters vary widely between each font, and there are clear differences between how the each font is rendered by different platforms. Including a webfont ensures that every user will see the same thing, regardless of platform or default fonts.
More options: having an installed webfont allows you to update the style, add new icons/characters to the font, etc. There is no way to currently do this with unicode.

cufon glyphs support

I have a problem with cufon and a few Turkish glyphs. This is the context:
I used the #font-face property to embed the custom font (Delicious-Roman) on a website. The client didn't like the fact that the font was the last one to load on each page (common issue with font-face) so I switched to cufon. When I was using font-face all the characters worked as they should, but when I used cufon a few glyphs stopped working (they simply don't show up on the page). I opened up Photoshop to test the font and indeed it doesn't have those Turkish characters (ğĞİşŞ).
Why the font-face property managed to show all the characters even if the font didn't have them?
How can I add those Turkish characters (ğĞİşŞ) to cufon?
I tried the "...and also these single characters" option on the cufon website but it didn't worked. I simply inserted the characters - ğĞİşŞ - in that text field. Is that correct?
If there is no way to add these glyphs to cufon, what is the easiest way to add them directly in the font I use?

The easiest way I found was to simply include the missing characters into the font and the re-use cufon. For this task I used the Glyph App - Demo version works perfectly for 30 days and you can export fonts without restriction.

Certain HTML Character Entities are HUGE in Firefox Only

For some reason, in my Firefox 12.0 for Mac OS X, my 〉 (〉) characters are much larger than they should be. On Chrome and Safari, they look exactly how I want them to be.
I have AddDefaultCharset utf-8 in my .htaccess as well as <meta charset="utf-8"> in my <head> (as the group I'm delivering these files to may not use my .htaccess).
Also, according to Adobe's Browser Lab, IE 7 and 8 just show a square box... is there anyone I can get these browsers to support that character? It would make things a lot easier (as the colors are going to be changing, so images are very inconvenient, and no color fade with images).
Demo: http://cameronspear.com/demos/rang/
This is what I see in Chrome and expect to see:
This is what my Firefox is showing:
This is a screenshot from Browser Labs of IE8:
TL;DR: I want all of these screenshots to look like the first one using 〉 aka 〉 characters. Use of JavaScript would even be acceptable.
Thanks.
[edit] I should specify that it's not as crucial I have the 〉 character as I am able to change its color with CSS and have it look the same across multiple browsers.
Solution
I just wanted to share exactly what I did for posterity's sake.
Thanks to Pointy's tips and resources, I created my own SVG with Inkscape using the template and methods as described at "How to make your own icon webfont". I mapped a big angle bracket to X and a small one to x.
The one thing I ran into was that my angle needs to touch the baseline and only go about 72% the way to the top of the box to fit "inline," so capital X was my original too-tall one, and lowercase x was the more inline one.
I then converted my SVG to TTF with http://www.freefontconverter.com/ and converted to a webfont with http://www.fontsquirrel.com/fontface/generator
... and that was it.
The demo (http://cameronspear.com/demos/rang/) is still up. You can see it looks consistent in all the browsers and the onclick rotation animation is dang close to the point, etc.
[Update] I found a great resource called IcoMoon that helps on making fonts and organizing fonts for the web, and it accepts regular svg vectors so you can make it in Illustrator and not mess with Inkscape since IcoMoon handles the keyboard mapping and stuff. You can only export the icons you use, so you only load 3 or 4 icons if that's all you need and not the entire font.
It's become an invaluable resource, and I recommend everyone else wanting to get into Icon Fonts check it out. You can learn more about the entire process from CSS-Trick's 113th Screencast.

Are you able to use images? They would provide a consistent look across all browsers. In many cases, images are preferable to character symbols.

This is a font issue. To maximize the odds of having a rare character (one that is not present in most fonts) rendered properly, specify a maximal list of fonts that all contain it.
The page now has just font-family: Arial,sans-serif set on the span elements that contain the bracket. Since Arial does not contain it, each browser will use its own definition for sans-serif. If the map that it is mapped to does not contain the bracket, clever browsers try something clever, like scanning through other fonts in the system, but this may still result in lack of any glyph for it.
There’s an additional problem. Normally it does not matter that you use entity references like 〉 instead of the character itself, but here it does. By HTML 4.01, 〉 means U+232A; by HTML5 drafts, it means U+27E9. IE obeys HTML 4.01 here, whereas Firefox uses the HTML5 definition. So it is better to use the character you really want, either as such in UTF-8 encoding, or as a character reference 〉.
If you can check e.g. the font coverage for U+232A and write the fonts in order of preference. But you should check that all of the fonts give an acceptable presentation. For example, if Cambria Math is used, the default line height will be very large, so you probably want to set line-height explicitly to some reasonable value like 1.3.
Finally—and this should perhaps have been asked very first—do you really want to use RIGHT-POINTING ANGLE BRACKET or MATHEMATICAL RIGHT ANGLE BRACKET? They are brackets, to be used as paired with left angle brackets, not arrow symbols.
Some more info: Guide to using special characters in HTML.

Making an icon font is easy enough that I can do it, though (for me) the process is somewhat mysterious. I suspect there are many actual graphic artists who are better at it, and surely many who understand the technical details more than I do.
Here is a pretty thorough blog post on the topic. (Not mny blog.) The main thing it doesn't describe very well is the relationship between the Inkscape "art board" area and the vertical positioning of each glyph in the font. It goes into some detail, but I've just never been able to figure it out.
What I did, therefore, is just make a square artboard 1024 pixels on a side. I then set up a grid in Inkscape so that the art board is divided up into a 16x16 grid. That makes it (somewhat) easy to design characters that will render nicely at a 16px font size. (Of course you could target a different font size, if you want; 16x16 is good for stuff that needs to be pretty small however.) Then, I just make sure that when I put the glyphs on the page, they're in a 1em by 1em box (or 16px by 16px; however you want to do it in your CSS) with no padding. I use <i> tags, and give them display: inline-block. That gives me a lot of flexibility, and it generally works great.
The Inkscape SVG font tool is, to put it mildly, pretty raw. It's literally the result of somebody's summer project. It works, but not much more than barely. Save often.
Now the process for generating the font files is somewhat crazy. I use FontSquirrel. I upload the .svg saved from Inksccape, and then ask for EOT, WOFF, and TTF. Amazingly, it works.
If you just need a few glyphs, this is a pretty sweet way to go, because you'll have a little bitty font file to download and it'll be cached by the browser. There are some accessibility issues however and the practice is sufficiently controversial that some more fanatical members of the community may consider you a barbarian for doing this :-)

How can I detect whether Unicode characters are displayed properly on my web page?

I’m trying to use a reasonably esoteric Unicode character on a website — specifically “︙”. Windows XP, as far as I know, didn’t ship with a font that included a glyph for this character — the Virtual PC IE 6 test image doesn’t display it at any rate.
Is there any way I can detect whether the character is displaying properly, in case people are looking at the site using Windows XP without Arial Unicode MS installed?
An answer on a similar question suggested comparing the width of an element containing just this character with the width of an element containing an unprintable Unicode character. Unfortunately, both seem to render at the same width in browsers that display my character properly as well.

Try using ⋮ (⋮), which is an alternate character for the same thing (a vertical ellipsis). I'm not sure why there are two glyphs for this, and they are slightly different; in my own testing, ︙ (︙) uses circles for the dots, while the other one uses squares. That probably varies by font though. And anyway, you have to increase the font size to ridiculous sizes to notice a difference.

What you are trying to do is virtually impossible, at least not in a safe way.
Instead you should clearly define your supported audience, specifying exactly what browsers you will support and for unsupported ones display an warning.
BTW, Do not display the warning for any browser that it was not identified by you, just for the that were identified as bad.
You could add an embedded font but this will work only on some browsers and probably not on mobile devices. I wouldn't recommend you to use such esoteric characters.
One idea http://www.devslide.com/labs/browser-detection
NOTE: in the text above, I refer to a browser as a combination of browser and operating system. Today most browsers do properly display Unicode characters, BUT the fonts do not, and the user will see boxes instead of correct characters. A well designed web page must render properly with the default fonts existing on the client computer.

Use an embeded font. You have to have 4 versions or so of the font file around for it to work in all browsers, but it works in IE6 Up and all modern browsers, including iOS mobile devices..
http://www.fontsquirrel.com/fontface/generator
You can upload a TTF font and get the whole package back as a download - all the font files needed and the CSS plus a sample page to test with. I have not found a browser that this will not work in (including 1-2 version back from current, depending on the browser).

I am not sure you need to worry about this... according to the Microsoft site, Arial Unicode MS is automatically installed for Windows XP.
http://office.microsoft.com/en-us/visio-help/install-the-universal-font-for-unicode-HP005255840.aspx