Variant Multi, two alternate versions
The Variant Multi template got very positive feedback, but I got one e-mail about the fact that the narrow 600px layout wasn’t working very well on iOS devices – it appeared very narrow since the Safari Mobile viewport was not adjusted in the HTML. In order to provide a better option, I customized the template and added the viewport meta tag, as well as optimizing font sizes and margins to make it look better on mobile devices while keeping the different content area layout options. For testing I used my iPhone 4 and an iPod Touch (2nd generation).
I have released the customized template as an alternate version called Variant Multi (mobile). You can download it directly here: Variant Multi (mobile). You can also see a live demo of the mobile version to see what it looks like before downloading.
Along with the mobile version, I also created an alternate version with a different colorscheme, background images (very lightweight, 6 kilobytes in total for the three added images) and text shadows. This version is simply called Variant Multi (alt) and it can be downloaded from here: Variant Multi (alt).zip.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.
4 comments:
Good job!!! But…
Despite being mobile, Internet Explorer has an error: The menu is not above the div “feature”: there is a small distance between them.
The problem is solved by replacing the following lines of css:
#menu{background-color:#467aa7;height:39px;}
to
#menu{background-color:#467aa7;height:38px;}
and
#menu ul li a.current{background-color:#eee;color:#333}
to
#menu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}
I hope it is useful …
Goodbye!
Does that error appear on Internet Explorer on a mobile device, such as a Windows Mobile phone? I don’t have access to any WinMo device for testing so I can’t tell, but I do see that the error appears in regular browsers. I’ll try your code and use it if it works, but I removed the border-bottom from the a.current since it rendered a visible border line in Safari Mobile on iOS 4 – and the current code (which is tested on Safari Mobile) works as intended.
Feedback (and screenshots!) from Windows Mobile users would be extremely welcome, feel free to send me an e-mail if you find any other errors!
I am not referring to Windows Mobile versions, I meant Windows desktop computers.
I tried to find a solution and that was what worked.
I have no dealings with mobile browsers, so I do not know much about them. Therefore, I proposed a solution for proper display in Windows desktop versions, “although the template is to mobiles.”
A greeting and I will follow closely the template to find the correct solution and learn more.
Very nice!!!