Home      FAQ      Forum      Idea Exchange      Ask a Question      My Stuff      Help   
  
Apple-Touch-Icon and Selectable Fonts
I notice with the new format here on the Idea Exchange that a list of apple-touch-icons are being used which can be used to add a professional look to a Webapp (When the web site is accessed from a smart phone, adding/sharing to the home screen displays nicely, the TD logo rather than the default 'snippet' of the webpage.

It would add so much more polish to our applications if we could add the same functionality easily. It was possible via a 'hack' in dashboards html text, but that blew out when iOS 8 came to the fray. I understand the list of requirements for an acceptable logo is large (mainly sizing and the derivatives of sizing required due to different screen sizes) but there are great, free websites that can convert a logo to the required formats simply.
An option to have each table with it's own apple-touch-icons would be even better - this way, dependent on your role, your main table may display a symbol/logo for accounts (a '$' sign perhaps), a 'Clock' for time sheets....

The new Open Sans Light Font that is used here is much clearer to read as well. An option to include this as a selectable css would also add that touch of 2015 polish to our applications...and make them easier to read IMO.


ID
832
Category
TeamDesk
Author

basenine
Date Created
2/5/2015 6:13:09 PM
Date Updated
7/22/2015 11:00:04 PM
Status
New Idea
Score
20
Promoted By
Rick Cogleybasenine
Comments
Rick Cogley 2/13/2015 6:02:09 PM
Agreed, this forum looks great. I like Open Sans, Adobe Source Sans, and Googles New "Noto" series of fonts, which are designed to cover the world's languages. http://www.google.com/get/noto/#/
Kirill Bondar  Staff  2/17/2015 4:37:42 AM
1. Icons - if you want to target every browser and not just iOS is a mess since you'll need a dozen of icons for iOS, another dozen and JSON file for Android, half-dozen + XML file for Win8 and an .ico file containing 3-4 differently sized images for desktop browsers.

For TeamDesk promo, we've achieved those results by using vectorized logo (it scales far better than rasterized image) on http://realfavicongenerator.net/ and I guess to keep it simple we should do something similar - let the user to download a single image to let us produce all the icons - or accept a package with all icons hand-crafted; keeping it on a radar.

2. Fonts - it's all about file sizes. When using Latin-only characters Open Sans weighs about 20K which is acceptable, but each additional character set will add to the font size. Cyrillic and Hebrew won't add a lot, but with full Unicode coverage (what about Japanese, Rick?) the font (Arial Unicode MS for example) may take some 22Mb.

Regards,
Kirill
basenine 2/17/2015 5:07:57 AM
Thanks Krill,

The link to create the series of icons is great - easily able to create the code required within a couple of minutes of playing around. Now....where to put? I tried making a dashboard and creating an html text, then pasting the code into that...
it didn't work (I wasn't really expecting it too - it needs to be pasted into the <head>....but stranger things have happened!)

I'd need a dedicated place to put the code in every table as I'd like different icons for each...if you could do this for us, it would solve the Favicon for each Application idea

As for the weight of the Fonts, if each application was able to choose/add their Font in setup and only add in what they needed, would this help? Leave the decision to the administrator...after a high level meeting of course!

I for one would support a generic change to the font you're using here - it's just so much easier on the eye. 😀
Rick Cogley 2/17/2015 8:32:26 AM
Kirill - yes, Japanese web fonts are really few and far between. Google has an "early access" program for the Noto font, which has a Japanese variant shown on this page:

http://www.google.com/fonts/earlyaccess

It's a good looking sans serif.
Adobe has Source Han Sans as a web font, which is also good if you have their typekit subscription.

Other than that, another open source option is the M+ family, which you can install on the server. It's not exactly light though. We tried using M+ on the www.esolia.co.jp Japanese site, but, it was too slow to load, so we just set the body text as some common fonts (in this case our main is "hiragino kaku gothic pro") and use a weight of M+ for titles.

--Rick
Rick Cogley 2/17/2015 4:57:27 PM
Here's a set of links as a starting point for someone wanting to set up Japanese or CJK web fonts:
https://pinboard.in/u:rickcogley/bundle:JRC_Web_Fonts/
basenine 4/9/2015 7:00:59 AM
Is there an update as to whether the font used here is being considered for TD applications?
basenine 6/17/2015 11:46:37 PM
I'm a little confused by your comment regarding the font file size.
Can you not use the pc's installed fonts via css?

I notice that here you're using the google open sans fonts via googleapi and can appreciate that these are loaded every page load, but if it was just css based on inbuilt standard fonts then file size wouldn't be a problem - right?
Kirill Bondar  Staff  6/18/2015 6:03:39 AM
> Can you not use the pc's installed fonts via css?

Arial, Times New Roman, Tahoma, Verdana, Georgia and are only fonts you can rely on. The presence of the others is not guaranteed.

> these are loaded every page load

They are loaded on a first visit and then cached. Moreover, they are loaded from shared Google's location - that's if you visited the site that uses the same font technique, the file is likely already in cache. Also for TeamDesk promo site we only need Latin subset of characters, thus fonts downloaded are only about 20K in size.

But once you want to target any language, you'll need all possible scripts.

basenine 7/22/2015 11:00:04 PM
Hello Krill,

I just found a solution for this - for me anyway...so not universal for everyone

I installed an extension for Safari called "Helvetica the World"...I then extracted the file and altered the .css file to add in Helvetica Neue Light
This did nothing!
So I also added in the style sheet to the Safari Preferences as well...this does nothing on it's own but now whenever I toggle between the extension (enable/disable) the fonts alter and use the Helvetica Neue Light...
I might see if adding in Googles Open Sans might also work...
Feedback
 
Back to Search Results