Mobile-First Responsive Websites provide users with the best possible experience afforded by their devices. Just as the UI and content will adapt to device widths and network capabilities. So should the website logo have adaptive qualities.
Simply reducing or enlarging a logo according to its context isn’t always the best solution. As the content area and device capabilities increase, designers are justified in adding additional details to the logo graphic itself.
I wanted to explore this idea and decided to create a little demo.
Explanation:
Using media queries and CSS3 properties we can add subtle shadows and effects to our logo as the screen size expands. This technique will work in most modern browsers. On older browsers it will simply fall back to the flat logo image. Which isn’t bad.
I decided to use an inline SVG image for the logo because your logo is an image, not an h1. I used an SVG graphic because we need the logo to scale flawlessly.
This logo starts at a mobile-first size and scales up at 3 breakpoints. (The breakpoints are unimportant for our purposes and were chosen at random.) It will be small enough to fit on mobile devices. In this first version we have the logo mark and the logo text aligned on a single line. The logo text is the same size as the cross-section of the logo mark.
Break Point Break Down
BREAK POINT 1: On this one we keep the size of the logo text the same but we increase the size of the logo-mark so that now the logo-text aligns with the heart within the logo mark instead of the cross-section.
BREAK POINT 2: We add some shadow on the bottom of the logo. And a highlight at the top. We stack the logo text and increase the font-size of the top line so that it’s wider than the bottom line.
BREAK POINT 3: Finally we use CSS3 effects to create a faux 3D effect on the logo.*Note* Chunky 3d CSS3 text-effect originally by @mdo.
Take a look at the demo and move your browser window around.