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.
Related
The issue:
I'm working simple html website that I want to work on any web browser size, so basically if you resize the browser the website will resize to and you won't have to scroll horizontally on the webpage.
I am assuming this has to do with CSS, I've been going thru my html book but unfortunately it doesn't cover this, I've also tried googling but I don't really now how to put it in words so basically google doesn't help me, at least not until I know what this is called.
The word you're looking for I guess would be responsive design / css.
If you are ok with reusing existing frameworks I'd suggest you try:
lessframworkd
responsive grid system
gskeleton *
bootstrap *
* are fullblown frameworks that include a lot of other features as well
Or have a look at this nice collection
You might be looking for these words:
CSS GRID SYSTEM ยป http://960.gs/
ADAPTIVE CSS DESIGN
FLUID CSS DESIGN
or even
MEDIA QUERY CSS
I have been working with cocos2d-iPhone, cocos2d-x, and cocos2d-html5 for quite some time. I wanted to ask if it is okay to build a website with cocos2d-html5. I want to do it because I want the website look interactive, animated, and scroll around like a game. We can do this with javascript, but is it possible to write it in cocos3d-html5? What are the drawbacks of doing this? And is there any existing website that is built on cocos2d?
Thank you for the help.
As i figured out, you cannot make a cocos2d-html based website as it is for making web apps for web sites. Although a web app can cover up the whole screen but there are a large number of issues assigned to creating such a situation. The internet users are used to using the refresh and back buttons on the web browser as well as opening in the new tab, nothing of these options would work in a cocos2d-html based web app as the navigation would be all done within the application and in no way can the button in the browser respond in the appropriate manner.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
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.
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?