User Tools

Site Tools


ce4_identity

Identity

The Identity control group is used to create or assign your logo graphic (identity plate), or to fill in your Site Title and slogan. The identity usually exists within the Masthead, or a graphical identity plate can be inserted into the navigation.

Using CE4, you have a choice of four implementations for your identity.

Plain Text

The default, two headings in plain HTML. You can choose colors and font, set the size and add a text-shadow if you'd like. Because it's just text, it scales beautifully on all displays, wraps when it needs to, and always looks great. The H1 heading (the larger of the two) can be a hyperlink.

To use plain text, leave the “Use Graphic Identity Plate” checkbox disabled:


The standard banner masthead using your graphic identity plate. If you're familiar with previous iterations of the CE series plugins, then you should be well familiar with this masthead style. The image can be aligned left, right or center, and may be a hyperlink.

To use this style masthead, enable the “Use Graphic Identity Plate” checkbox, then set “Identity Plate Role: Banner”.

In this style, you should fill in the Heading field with a text version of your logo image (this would usually be your site or business name). While this will not be visible on the page, it will be used for SEO purposes.


Integrated

The Integrated masthead type allows you to insert your graphical identity plate (or a text-based title) into the navigation bar as a clickable list-item. This allows you to significantly reduce the real estate occupied by your masthead, should you like to go seriously low-impact.

Whereas the other masthead types are fairly agnostic as to the size and shape of your identity plate, with the “Integrated” type enabled, one should be very deliberate in designing your graphical identity plate.

Considering that the smallest width at which your site is likely to be viewed is the iPhone's 320-pixel portrait orientation, and maintaining space for the navigation menu, the ideal canvas width for your graphical identity plate is 252-pixels.

I like to pad either size of my graphic with 4-pixels of empty space, so that gives me 244 horizontal pixels that I can work with.

For height, we take the sum of Font-size, Padding-top and Padding-bottom under Navigation Items.

As an example, I begin in Lightroom with my Navigation Items values:

Font-size: 14
Padding-top: 12
Padding-bottom: 12

Total: 38

In Photoshop, I will begin with a canvas 244-pixels-wide by 38-pixels-tall:

When content with my image, I then expand the width to 252-pixels via the menu, Image > Canvas Size:

This gives me 4-pixels on either side of my graphic, ensuring that however I might align the image in Lightroom, it will always maintain some space from horizontally adjacent elements:

I then disable the background-layer, making it transparent, and save the image as a PNG for use in Lightroom.

Another thing to bear in mind when using this masthead type, you should set your Mobile Breakpoint sufficiently large that your menu will not wrap to a second line, i.e. keep your mobile breakpoint larger than the total width of your graphic and menu.


Profile Image + Text

The Profile style masthead combines the graphic identity plate with plain text, in a format similar to Facebook's timeline heading. In the image above, the TTG logo is a square icon, while the text is plain HTML text. In this style, the image and the H1 heading are both hyperlinked.

To use this style, enable the “Use Graphic Identity Plate” checkbox, then set “Identity Plate Role: Profile”.


This one is different from the others in that it removes the identity plate from the masthead, and instead inserts it into the background of the navigation. This obviates the masthead entirely; it's gone. To make space for the identity plate in the navigation, you will probably want to use the padding-top and padding-bottom sliders in the Navigation Container control group. And because the image is a background for the navigation block, it cannot be hyperlinked.

To use this style, enable the “Use Graphic Identity Plate” checkbox, then set “Identity Plate Role: Navigation Background”. Then scroll down to the Navigation Container control group (it's the next one down) to setup the space.


Keep Away From Edge

The only option under Identity that may seem obtuse is the “Keep Away From Edge” checkbox.

Some designs may set the masthead's padding at zero (0) to keep the logo graphic flush with content, resulting in the logo graphic smashing against the edge of the display or browser window at small screen sizes. Enabling this option ensures that the masthead will be given some space from the edge, even when the masthead's padding is zero.

ce4_identity.txt · Last modified: 2014/09/01 08:50 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.