Struggling badly with this all day and I get the feeling somebody with more knowledge on subject could save me a lot of grief...
I have created a website using Jquery Mobile and I want to use a custom image/logo instead of the standard header on all of my pages. What makes it slightly more complicated is that I am also using a navbar just under the custom header/image for navigation. See the below image for what I am talking about:
So here is where I am running into issues... The scaling of the custom image/header is giving me nightmares. At a certain resolution (e.g the 480x800 preset in Dreamweaver) everything looks fine. However, I start to run into issues when the resolution increases:
Firstly, the image height keeps getting bigger, making the overall header (image and navbar) a lot bigger than I want it to be. Secondly, if you are using a very high resolution display which exceeds the total width of the image, the image just stops at its max width, while the navbar (and the rest of the page) continues to expand to 100% the width of the page - which obviously looks very odd.
I am using the following files/setup:
jquery-1.8.2.min.js, jquery.mobile.structure-1.2.0.css, jquery.mobile.theme-1.2.0.css, jquery-1.8.2.min.js, jquery.mobile-1.2.0.js and Dreamweaver cs6.
I have tried a million different variations to the CSS in the above files along with the html in the page with no luck. I have a feeling its going to involve media queries, with 3 or 4 different versions of the image, but despite my best efforts, I havnt been able to figure out the best way to do it.
My ideal scenario - The linked background image + navbar combo (or something similar) that works well on all popular mobile devices in both portrait and landscape mode.
The only thing there that needs to be a bitmap image is the logo.
Construct the black and red with pure CSS. Set a specific height to the header using CSS media queries, and size and position the black bar with %.
Text should be text. You can use a webfont to get a particular font. You can size the text with CSS media queries.
The bit with the dot and the triangles can most likely be constructed with pure CSS. Certainly the dot. Or, as below, you might use an icon font.
I don't like using default JQM icons on tabbars, they look terrible. Again, you can use CSS media queries with multiple bitmap images, but better still use an icon font and you can just size the icons as you wish with CSS media queries.
Thanks for the reply watusiware, very informative.
I am sure your method above would work very well, but I am under a serious time constraint to get this project submitted. With that in mind, would there be an alternative method to get it to work, that would be much quicker to get set up (full in the knowledge that its not the ideal way to do it) ?
I would then implement your suggestion above in subsequent versions of the site.
You're not going to get a good appearance scaling-up a bitmap image in the browser. Period. And you're not always going to get a good appearance scaling-down, either.
(Though the latter is mostly a problem with small images like icons. A photo will generally scale-down reasonably well to a certain size, but once you get to the size of a small icon, you're not going to get good results scaling-down from a larger image in the browser. In the tiny sizes needed by icons, you need pixel-accurate graphics. You need to pick the pixels, not the browser.)
As well, if you make the entire banner as a single image, what you want to do is impossible, since, as I understand it, you want the banner to have different aspect ratios depending on the screen size. (e.g. you want it to grow in width without growing in height. Or perhaps you want it to grow in height but not proportionally. That is what I read into your previous comments.)
It's impossible to scale the image up with unequal X & Y without distorting the geometry. (Like watching a 4:3 TV show in one of those hokey "expanded" modes...)
I would at least de-construct the image into parts: background, logo, text, black bar, "triangle squiggle". (Or include the latter with the logo.)
I can't tell if the background is meant to be solid red or is a texture. If it is a texture, create a background swatch that can be applied with a repeat.
The black bar can simply be a black div. The corners are obviously easily achieved with CSS border radius.
Text should be text. Graphics-as-text is so 1995.
So that leaves you having to create multiple versions of the logo in different pixel sizes and using CSS media queries to bin possible screen sizes into ranges. The same CSS can set font size, height of the black bar, etc.
None of this really has anything to do with jQuery Mobile.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic