I've been using H5BP for what seems like Eons and find it really useful however I've never really understood what all of the icons are for.
I know they are for various devices but I've never really bothered you think more about it... I've just sheepishly replaced the icons with my own set for the site I'm working on.
I've just been googling and can't find any good explanation for each of them and in what context they are used?
I have an iPhone & iPad but to be honest I'm kind pretty un-impressed by both and therefore I'm probably not well versed enough to know exactly where the H5BP icons would be used for on these devices...
Please refer to this section of the HTML5 Boilerplate documentation - html.md
You'll find a link to Everything you always wanted to know about touch icons which will explain, in depth, what each icon is used for.
On the iPod/iPhone/iPad you can decide to place a website on your home screen (think of it as a bookmark). The bookmark will then have the same look as the icon of an ordinary iOS app (a large icon and a small text beneath it). The H5BP icon is used as the app icon, if someone decide to save your website like that.
The reason there are three different resolutions is simply because different apple-devices need different resolutions on their icons. The new iPad (retina) needs to have a high-res icon, and so forth.
Related
http://wilsonschlamme.com
Is my artist website that I decided to build from scratch myself. I did some html css work many years ago, and barely know what I'm doing. However, after picking through examples on the web, I'm slowly re learning. That is what I've put together.
PROBLEM: on the info page, clearly you can see on MOBILE device like an iphone that the text is sprawling down in a thin line, like a waterfall. This effect can be mimicked as well if one were to make their browser page very thin.
Wondering if anyone has any suggestions on how to keep that text proportionate to the page. I know what's happening, I'm keeping the text roughly centered to the page using padding/margins. Well, this works great when the site is displayed on a computer, but on mobile, the text is then displayed SUPER thin.
Problem is, I'm not sure how else to achieve this on a full web browser. Obviously, this is unacceptable at the moment.
Any thoughts are very much appreciated.
*I also notice that my little copyright text at the bottom of the page is displayed far to the right on mobile devices, while it works fine on web browsers. This is a much more minor issue compared to the one above. Thoughts on this would be awesome as well!
Thanks very much,
-Wilson
Been looking into responsive web design lately, and to practice I've made a very simple "application" which adapts to the screen size of the browser. Everything works as expected, but now I'd like to spice up the interface.
My intention is to create a logo and perhaps some icons too. I've downloaded GIMP and I was thinking of using it. Then it struck me, is that the proper way to proceed?
Is GIMP a good choice? Or, could that be achieved with the functions in HTML5, like canvas and stuff like that. Or how do you normally do and with what tools?
I'm not quite sure how to proceed.
Thanks!
i recommend you using EaselJS , i hope you enjoy working with it, however normal graphics that you want ever be accessible for wide range of your visitors should be designed and saved as popular graphic formats such as PNG , JPEG and GIF.also gimp is a good lovely tool.
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
I am still very much in the planning phase on this but here is the basic idea of what I want to do. I also have not done much/any web development in the past few years so I am a little out of the loop on what will/wont work.
I want to have a video playing essentially on a background layer with various widgets on top of it. The widgets will all be fairly simple HTML based text and maybe a few images. The widget also need to be movable (eg. I need to be able to drag and drop the widgets to move them). Finally I would really like it to work on a tablet (iPad or Android).
Am I going to need to use flash or silverlight for something like this? I would rather not because I know that makes it hard to get tablets working. I know HTML5 is supposed to be the new hotness but I don't really have a good idea of its capabilities.
Flash or Silverlight will rule out tablets (the iPad anyway), not just make them hard.
I'd start with jQueryUI it supports easily making elements moveable.
Can someone look at this page carefully. I am trying to fix font on this page. I don't know what previous programmer has done to font. Can you look at service guarantee and service features headings in green panels, edges of text are like someone cut this font with seesaw. Similarly on other parts of page. They are supposed to look smooth.
viewing page on ff and ie8 (widows xp).
I think you mean that these sections aren't anti-aliased. This isn't something you can control when you display text on the browser -- it's actually browser- and OS-dependent.
If it's important to your users to have smooth fonts, then you could anti-alias them in an image program and use images instead of text, but this is extremely inefficient and makes your page a gigantic pain to update.
So, in short, there isn't anything you can do to fix this. See this SO question for more details.
use firebug which is a firefox plugin to see the styles and html tags used in the web page, you can even edit the css used in the web page through firebug.
Your page looks fine on my browser (Chrome under Windows).
Different browsers all render text differently. What you will find is that there are often sweet spots in font sizes that look better than others. In any case, what you are talking about is whether the browser is displaying fonts anti-aliased or not.
There is a CSS3 property, font-smooth, that you can adjust for this, but don't expect it to work on browsers that aren't smoothing their fonts anyway. You can read about it here: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
In short, don't worry about it. If it is a big deal for you, then experiment with different fonts and sizes. A good tool for doing this is at http://www.typetester.org/
Don't forget to test your site at BrowserShots.org. It will do screen captures for you, so you can check these details on a wide range of platforms.
If you must have your font rendered in a specific way, then it must be done in an image. This is not recommended. Text should be text wherever possible. However, if you must do it this way, consider one of the many scripts that assist, so you can keep text for browsers that don't support the script, and SEO isn't a problem. Typeface.js is commonly used for this.