I'm making my first website, and I'm trying to make variable-sized buttons so they'll render correctly on low resolution (read: mobile) browsers. Currently I just have the usual rollover image solution (185 pixels wide by 37 tall if anybody cares), but when I preview the site in low resolution it looks, predictably enough, like complete crap (more specifically they don't have room so they arrange vertically instead of horizontally and take up a huge amount of screen real estate).
Semi-related, is there a way to overlay text on a button without saving separate images, each with the correct text? Just using a single template for buttons and then deciding what text goes on it as it's needed?
tl;dr: I'm trying to get a horizontal lineup of buttons for navigating my website, but I'm a noob and I can't do it right without your generous assistance.
You're picking a tough problem for your first website. Some issues you'll encounter:
There are a vast number of different mobile browsers out there (makes dealing with just Firefox, IE, Safair, Chrome trivial)
All these browsers have varying level of support for HTML. Some have poor support, they'll do different things with Tables.
A variety of screen sizes (although you can assume it will be one of 128, 176, 240, 320 or 480 px wide)
A difficulty in testing how your app looks on different browsers.
Varying support for java script (good on iPhone/Android/PalmPre, partial (and inconsistent) on BlackBerry/Sybian60 devices and poor on pretty much everything else)
A usual approach to these problems is to analyse the User Agent to identify the mobile browser type, and its capabilities. Then render the screen appropriately (e.g. for 128/176px wide screens, use small buttons). Look into http://wurfl.sourceforge.net/ or http://deviceatlas.com/ for tools on how to do this. You may also find some useful info at http://mobiforge.com/forum/Developing. And http://ready.mobi/launch.jsp?locale=en_EN is a fine online analysis tool of your mobile website (but don't get sucked into trying to get a 100% score on it).
If you're just developing static HTML, then things are a lot more limited. You could use User Agent based URL rewrites on apache to redirect to different versions of your HTML.
Good luck!
Related
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
My site's CSS is currently taken care of by Twitter Bootstrap, and it looks/works great at high resolutions such as the one of my 1920x1200 monitor. However, as soon as I go to a smaller device such as a smartphone, and even my very high resolution iPad 3, I notice all sorts of quirks that were simply not there on my computer screen. I can of course simulate them by resizing the browser window down horizontally.
The quirks are generally some form of random resizing (the images will resize before the header text) and eventually everything turning into one single big column, which is pretty much useless and inscrutable to anybody browsing the site.
How do I make the site look exactly the same on smaller screens? Look at apple.com and nest.com and you'll notice that they're both identical on any device you use to visit them.
I know it's Bootstrap trying to be more responsive/fluid, but I feel like that unless I spend a considerable effort fine-tuning that behavior for different horizontal resolutions, I'm much better off showing users the same version on any screen. Is there something I can turn off in Bootstrap that will prevent the smart stacking of spans and will preserve the same shape everywhere?
Thanks a lot!
I am just building a new site for a client and want to make sure I serve him best. I am at the process of determining the page width.
First, for the last few years, my pages have been typically about 900 pixels wide and centered in the middle of the browser window. This works really well. That's not the approach I am taking now though. My old standard of 900-1000 pixels seems really small on today's monitors.
I am creating a three column page layout. The leftmost column needs to stick to the left side of the browser. If the browser is set really wide, there is a huge vertical dead zone on the right side of the browser. That's not really a problem since I doubt most people open their browser to 100% wide on a 1600px monitor.
My question is this: Is there a standard pixel width that you assume 90% of the people use to view a web site?
960 pixels!
It has plenty of denominations to allow you to split your page up into various columns. I suggest taking a look at http://960.gs
I know, as you said that it is small compared to your monitor, however there are a lot of users (the majority) who would benefit from keeping this resolution.
You can also consider using a so called "responsive" approach:
http://978.gs/
The idea is that using media queries (and substitute techniques) you adapt your layout to the viewport of your visitor, so ideally you can offer the best content to everyone.
If you made fluid-width pages, this wouldn't be an issue.
Monitors these days are all over the place. You will have to check your analytics to see what your particular audience is using.
If I make a fixed-width page, I usually still shoot for 980px. There are lots of netbooks popping up with resolutions of around 1024x800 and what not. Again though, there is no specific answer to this question, other than making pages without a fixed-width, or checking your own audience.
I have started learning some web development lately and have noticed lot's of sites just use Pixel dimension to specify sizes of thins as well as the overall size of the body.
This seems counter intuitive to me (maybe because I am used to programing for Android)
But this could make the website a pain to view on lower res screens and less useful on higher end screens.
Is this really the way things are done? Does this not cause to much problems?
Thanks.
EDIT: how would one go about implementing a less fixed size site?
There are pros and cons to doing things like this.
Pros: It allows you to have full control over where everything is placed as sometimes with relative sizing things will move in unexpected ways.
Cons: Well you mentioned them! Different size screens will give the site a different look.
But overall to some people it is more important that everything remains in the right place than that everything looks great on all screen sizes. Ultimately it depends on the preference of the designer. Also remember that uses on higher resolution screens can zoom in and those on lower resolutions can zoom out!
Peaces and pears.
Each to their own, so long as they are consistant and know what they are doing that is all that matters.
I have recently starting using grid templating which uses pixel dimensions for containers and I really enjoy it. Considering that 960.gs (960px) is an accepted size width for a website, if you know that you do not want to develop a fluid template, then why not use fixed width pixels.
If I am going to have a mobile version of my phone, then I serve the mobile version not my 960px website, and in any case, most phones intuitively display websites anyway. (At least the latest phones, obviously not the old Nokia 8210's ;).
Now that most of the major browsers support full page zoom (at present, the only notable exception being Google Chrome), are liquid or elastic layouts no longer needed? Is the relative pain of building liquid/elastic layouts worth the effort? Are there any situations where a liquid layout would still be of benefit? Is full page zoom the real solution it at first appears to be?
Yes, because there are a vast variety of screens out there commonly ranging from 15" to 32".
There is also some variation in what people consider a "comfortable" font size.
All of which adds up to quite a range of sizes that your content will need to fit into.
If anything, liquid layout is becoming even more necessary as we scale up to huge monitors, and down to cellphone devices.
Doing full page zoom in CSS isn't really worth it, especially as most browsers now do this kind of zooming natively (and do it much better - ref [img] tags).
As to using fixed width, there is a secondary feature with this... if you increase the font size, less words will be shown per line, which can help some people with reading.
As in, have you ever read a block of text which is extremely wide, and found that you have read the same line twice? If the line height was increased (same effect though font-size), with less words per line, this becomes less of an issue.
Yes, yes yes! Having to scroll horizontally on a site because some designer assumed the users always maximize their browsers is a huge pet peeve for me and I'm sure I'm not alone. On top of that, as someone with really crappy vision, let me say that full page zooming works best when the layout is liquid. Otherwise you end up with your nav bar off the (visible) screen.
I had a real world problem with this. The design called for a fixed width page within a nice border. Fitted within 800 pixels wide minus a few pixels for the browser window. Subtract 200 pixels for the left menu and the content area was about 600 pixels wide.
The problem was, part of the site content was dynamic, resulting in users editing and browsing data in tables, on their nice 1280x1024 screens, with tables restricted to 600 pixels wide.
You should allow for the width of the browser window in dynamic content, unless that dynamic content is going to be predominantly text.
Stretchy layouts are not so much about zooming as they are about wrapping - allowing a user to fit more information on screen if the screen is higher resolution while still making the content acessible for those with lower resolution screens. Page zooming does not achieve this.
i think liquid layouts are still needed, even though browsers have this full page zoom feature i bet a lot of people dont know about it or know how to use it.
Page zoom is horrible from an accessibility perspective. It's the equivalent of saying "we couldn't be bothered to design our pages properly [designers], so have a larger font and scroll the page horizontally [browser developers]". I cannot believe Firefox jumped off the cliff after Microsoft and made this the default.
Yes - you don't know what resolution the reader is using, or what size screen - or even if accessibility is required/used. As mentioned above, not everybody knows about full page zoom - I know about it, but hardly use it...
Only your own site's visitors can tell you if liquid layouts are still relevant for your site.
Using a framework such as the YUI-CSS and Google Website Optimizer it's pretty easy to see what your visitors prefer and lay aside opinion and instead rely on cold hard results.
Liquid layouts can cause usability problems, though.
Content containers that become too wide become exceptionally difficult to read.
Many blogs have fixed width content containers specifically for this reason.
Alternatively, you can create multi-column content containers so that you get an effect like a newspaper, with its multiple columns of thin containers of text. This can be difficult to do, though.