To add a Logo to your menu, first add a ‘Custom Link’ item to your menu: How to add a menu logo Create a new menu item for your logo We’ll use this functionality to add a site logo directly to our menu bar.įor an example of this functionality take a look at the header menu at the top of this page. Some other, more obvious, techniques that I haven’t mentioned above are making good use of CSS, icon fonts and SVG, instead of relying on bitmap images.Max Mega Menu Pro includes functionality that lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. I’ll also try to save highly compressed images in large dimensions for web so they look good when resized in the browser. My preference is to only maintain one version of each graphical asset instead of two (I’m lazy), so I’ll typically have an sprite that I resize for all users. More and more devices have high-res and if you want your product or website to look professional to users of these devices, you should put some thought into how they look. High-res screens, in particular the MacBook Pro with Retina display, are fantastic and I highly recommend Designers invest in them. ![]() And it’s a very simple fix.Įnsure your favicon is 32x32px and you’re golden. Nothing is more telling whether a website has invested in support for high-res screens than your favicon. Bonus: Don't forget your Retina-ready favicon The cons, depending on how you compress the assets, your users may have to download larger files than they actually need. ![]() The pros of this are that you maintain one version. Or every embedded image can have larger dimensions than needed, and then you explicitly set the width of that image. The downside of this is having to maintain two versions of graphical assets and images.įor example, with CSS sprites you can use the version for all users, and let your CSS do the resizing for all users. I’ve talked above about how to serve up alternate assets for high-res screens. You can just use the same image assets for both standard and high-res screens You can see various image dimensions, file size and quality comparisons in Daan’s follow up post here. This is because of the greater amount of pixels in the Retina image, compression artefacts are scaled down and therefore almost unnoticeable.īasically an image can have larger dimensions, but can also be compressed more and you still get great results on a high-res screen. The bottomline is that heavy compression doesn’t affect the final image as much as you would expect. More detail can be accomplished with less kilobytes. But, more pixels doesn’t necessarily have to mean 4 or 5 times more data. More detail doesn't necessarily mean more dataĭaan Jobsis conducted a very interesting experiment last year looking at pixel quality, image dimensions and compression. See their documentation on how to implement. The script will check your server to see if you have any image source with at the end. Imulus developed a useful plugin Retina.js that solves this for you. The sprite solution above is only good for assets referenced in your CSS. Serve up larger html embedded images with Javascript ![]() only screen and ( -webkit-min-device-pixel-ratio : 2 ),( min-resolution : 192dpi ) 3. It’s very straight forward, and some what similar to providing responsive or alternate mobile styles. Using CSS media queries you can target any device with a high-resolution screen and provide it with alternate styles. Use media queries for high-res CSS styles The first website I designed while having the Retina display was and of course I was now more inclined to design for high-resolution screens as I notice the results on a daily basis.īelow are just a few techniques I learned while designing for high-res devices. It’s like the transition from VHS to DVD or SD to HD. At first I didn’t think it would make a big difference but after using for a day it’s hard to go back to other displays. ![]() I was lucky enough to receive a 13” MacBook Pro with Retina display for work a few months back.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |