Right now, responsive pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.

Wire frame your desktop and small-screen version before writing any markup. This allows you to know where and what order your markup (HTML) will be need to be in to achieve correct placement in your desktop version and your small-screen version. If your site demands efficiency, you can subtract and add navigation elements with JavaScript, just make sure you have enough of the basic navigation to go to every page first.

Make use of position absolute, relative-absolute and fixed. And know the difference. You might want the logo above the menu in one version and below the menu in another. Short of moving your markup around (remove/insert) with Javascript. This is the only way to visually re-order your markup.

Become familiar with fluid layouts. Knowing what adds up to 100% is helpful. Don’t forget to use percent margins and padding. Using percentages is called liquid layout or flexible layout.

Decide what content is important for small screen (which are often mobile and thus have a low connection speed). If you are a brochure site–that is your main purpose is to inform, not complete a task, then don’t hide content if you are downloading it anyway.

Make buttons big. If it’s something that most people are going to click, add some padding if it’s a text line. Avoid fat finger syndrome by making action item large enough for fingers.

Plan on adding around 30% more CSS design time for a typical brochure site to be responsive also. You wil probably be more for your first responsive site.

Use min-width over max-width for the width of your elements. Remember to scale media. Image, embedded objects (embed, object tags, video) should be scaled. Make them have a max-width of 100%. Read about creating CSS Elastic Videos. I usually limit this CSS rule to the children of a #primary div. Another possible route is to use JavaScript, via FitJS.

Use the correct video format for your device. The simplest way to achieve this is use a video distribution service (I like Vimeo for their minimal layout–if you pay) that will change the format for you.

Style rules outside any media query is the default style. You need to make the choice of whether you are going make small or large (read desktop) the default CSS style sheet. I think that small first will become dominant in the long run, but you will need to a JavaScript media query polyfill/shim for browsers that don’t support media query, and if you are using HTML5 already, then you probably already have a polyfill like Modernizr running anyway. Modernizr uses Respond.js to allow min/max-width CSS3 media queries. I would claim that creating a desktop first style sheet would be best if you are editing an existing site to be responsive or working on your first responsive site. If you want an detailed overview of the desktop or small screen first debate, I suggest  Essential considerations for crafting quality media queries.

Use the most appropriate size image if possible. If you are going to use JavaScript, to create content that uses images (read slideshow, gallery, etc.), you might as well check the width of your browser window and request smaller images than the “desktop version” in order to speed up their download. You might considering lazy-loading related content also.

And finally…

Forget about being perfect. Yes, it’s your job–you SHOULD have a close to pixel-perfect layout for the two or three devices that the majority of your audience uses, but for all those in between accept a less than perfect layout. And while I’m on the topic of perfect, these are guidelines that I’ve discovered in my small amount of responsive work, and are by no means rules or laws.

What guidelines have you discovered that aid in responsive design?

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

• A non-linked image
• HTML entity encoding
• Client-side obfuscation/abstraction (via JavaScript)
• Server-side redirect
• Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed.

A non-linked image

• Anyone viewing images can see your address, but has to visually remember and re-type this address
• Low chance of your email address being grabbed by a spam robot

This is how Facebook displays email addresses in one’s profile. It is inconvenient to the user, since he or she cannot click the email address in order to send an email. The spider may grab one’s email address if a spam robot uses image reading (Optical Character Recognition) though this is unlikely at this time.

HTML entity encoding

• Anyone with a typical browser will be able to contact you
• Medium to high chance of your email address being grabbed by a spam robot

This method encodes certain characters of the email address into Unicode.  For instance, “Bob” in Unicode is “Bob” Since computers create Unicode, it does not seem like a hard task to decode from Unicode. I do not recommend this solution.

Client-side obfuscation/abstraction (via JavaScript)

• Anyone with a typical browser will be able to contact you
• Low chance of your email address being grabbed by a spam robot

This anti-spam solution is not a cure all–but it is my favorite right now. Some spider bots do run JavaScript. The majority of the spider robots do not however. The method described here not only prevents your email address from being obvious simple text, but it also performs levels of obfuscation and abstraction that makes it useable for actual browsers to read and gracefully degrade for those without JavaScript running.

In a related form, if you create your JavaScript function or call of the function on the server-side (ASP, PHP, etc) then you can slightly change the function over a period of time.  The user will never notice, since the output being given is exactly the same. It is only the input (the simple text) into the JavaScript function that is being changed.

Server-side redirect

• Anyone with a typical browser will be able to contact you
• Medium to high chance of your email address being grabbed by a spam robot

There are several ways to do this. Most redirect to a script that provides the email address. The problem with this solution is that spam robots will follow the link and eventually grab the URL although the email address is not in plain text. It is being given out. This is an example of the server-side redirect method. A similar solution is MailHide from Captcha. I don’t recommend any use of Captcha except as a last resort, since I don’t enjoy using captchas myself.

Contact form (no email address listed)

• Anyone with a typical browser will be able to contact you, but will not know your email address
  
• Next to no chance of your email address being grabbed by a spam robot

This is guaranteed to save your email address from spam lists, since your email address is never used within your page. This solution could be annoying, since a potential vendor will have to use the contact form to hear more about your product. I’ve always thought this was impersonal. Although less of an issue for personal sites, a user often does not feel he or she is contacting the site owner.

In conclusion

The contact form is the only full-proof way, but right now, I prefer JavaScript obscuration. If my email address is captured, Gmail does a very good job (if sometimes, too aggressive) of ferreting out the email spam. If you’d like to have a small sense of justice, you can link your website to a multitude of email addresses that are all fake.

Photo: Lake Tawakoni State Park, Texas, August 15, 2007 (Donna Garde)

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

• OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
• Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

• Convert Image Mode to RGB
• Make horizontal guide at 100% of canvas height
• Switch to inactive document (-1 in document array)
• “Duplicate Layer. . .” Layer Menu via right click
• Switch back to inactive document (+1 in document array)
• Double canvas size vertically
• Transform/Move top layer down (50% of canvas size)
• Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

You may be interested in this PhotoShop script that creates a sprite from all the images in a folder.

Features and characteristics of a great 404 page:

• A link to the site map that lists all articles and the home page
• A search box
• A distinctly minimalist look
• Remove the jargon (i.e.- what’s a 404?)
• State the reasons someone would reach a 404 page (A mis-typed URL, a out-of-date search engine referral, a broken (in-site) link) and then do something about it
• Notify with either a user input form or automatically with server side scripting the site owner so that the problem can be fixed (In WordPress, you can email yourself using the code at the end of this article)
• Contact information for the site owner (after all, it’s your site that is broken)

Most of this list is taken from A List Apart, The Perfect 404. They use JavaScript to create many of the features above. Address the mis-typed URL by suggesting the visitor review the sitemap. You could tell them to look for some of the words in the URL. For the out-of-date search engine referral, you could grab the query string for popular search engines and add search results to the bottom of your error page.

As to a pleasing visual design (not to mention humorous content) of a 404 page be sure to look at Smashing’s Magazine’s collection of 404 pages and a second collection for inspiration.

What to do now

If the fault is truly yours and the invalid URL was not created by a crawler bot grabbing email addresses or trying SQL insertions, then you should open up your .htaccess file and redirect them. You shouldn’t have to use mod_write and regular expressions if you are soley creating a list of 1 to 1 relationship URLs. If you create websites for a living, I HIGHLY recommend familiarizing yourself with both powerful tools.

Email the site owner the invalid URL in WordPress

I recommend not sending this to your main email, but one of your secondary email addresses or filtering it to a folder (with the subject “[404 Error]“). I receive more than 10 notices a day from my sites. By placing the URL in the subject line, Gmail will group/thread message about same URL.

<?php
$url = $_SERVER[ 'REQUEST_URI' ];
$message = "URL Requested: ".$url_requested;
wp_mail("youremail@gmail.com", "[404 Error] ".$url_requested, $message);
?>

Change Full Size image width to match theme

The column width in WordPress’s default theme Kubrick is 500px. Therefore, the default (maximum) image size is 500px. The column width of the blog I am posting to is 614px. You can set a global variable to change this setting. Create if not already existing functions.php in your theme directory. Define your maximum media width (that is “Full Size” in the Gallery interface):

<?php
$content_width = 614;
?>

I’ve set mine to 614 pixels since that is the width of my div with the class “.entry” minus padding. If this does not work, some have solved this problem with $GLOBALS['content_width'] = 614; also. You can view this setting at a post at RachelSteely.com.

Default media to Full Size

I prefer to justify my media (align left and right) to the column width. To do this, set default selected size to “Full Size” by changing the code in /wp-admin/includes/media.php. Move the ‘checked’ radio attribute from Medium to Full Size.

Line 458:

" : '' ) . "<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-medium-$post->ID' value='medium' checked='checked' />
<label for='image-size-medium-$post->ID'>" . __('Medium') . "</label>
<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-full-$post->ID' value='full' />


change to

" : '' ) . "<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-medium-$post->ID' value='medium' />
<label for='image-size-medium-$post->ID'>" . __('Medium') . "</label>
<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-full-$post->ID' value='full' checked='checked' />

And that’s it! Happy uploading with the new and improved (and customized) WordPress media gallery.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http$3://$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

The majority of the above regular expression was not created by me. I however cannot locate the original programmer. It was posted on a message board I visited along with ftp and mailto options. If you can help, please comment.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links.

You can view the Graphic Web Design and Cascading Style Sheets PowerPoint (431KB) or view the presentation in HTML. Some support images and all sites discussed can be found on Delicious (theses are notated by “{link}” within the presentation).

• Apple .Mac
• Google Gmail
• Lotus Notes 8
• Outlook 2007
• Windows Live

This is based on their acid test. If you are involved in developing internet applications or sites and aren’t familiar with acid tests (and you should be!), visit WebStandards.org for the web browser acid test.

So what’s a person to due in the mean time–structural tables and inline CSS, of course! That’s what! So barbaric and so 1999! Here is a tutorial on what HTML/CSS you can use across multiple email clients.

I hope this is a starting point for those that want to make Gallery2 more SEO. Please remember that the SEO doesn’t make you show up higher in search listings, but makes it easier for this to happen. Having other people link to your pages is always the best thing you can do (at least for Google). Any additions to this list would be helpful. If you have questions or would like clarification, please ask.

Technical Background on Gallery2

Some of the suggestions on this list involve editing template and class files, do this at your own risk. Gallery2 administrators recommend copying the file you are editing to the subdirectory called “local” and editing the file there. Gallery2 will then use that file instead of the original. This also means that upgrades will not overwrite your edited file. In the examples below, I am using Gallery 2.2.3.

1. Activate URL Rewrite plugin

Read through the URL Rewrite Administration page and familiarize yourself with the structure of Gallery2, you’ll notice that the permalink of a photo is based on the filename.

2. Make items in keyword and other dynamic albums point to item’s permalink

ll links that can, should point to an item’s permalink–after all that is the valuable content–all else is for the user’s convenience and experience. This will eliminate some duplicate content and use the keyword album’s PageRank to point to the item’s permalink.

• On the Site Admin page, go to Keyword Album (and/or Dynamic Albums)
• Change Thumbnail links in dynamic albums to Jump to original album, and click Global checkbox if possible.

3. Use keywords in filenames

ince the permalink of an item is based on the filename, the filename of the item affect the keywords contained within the URL. Do not use the file name that a camera gives each photograph, but name your photos using keywords. You can do this manually, or you can use a bulk file renaming tool.

I recommend you use a bulk file renaming tool. On Windows, I use the free Bulk Rename Utility. It allows all sorts of file naming options including regular expressions, recursive file renaming of files in subdirectories, add suffixes, add prefixes and many, many more. It’s a little overwhelming when you first load the program. Thankfully, you can see the actual before/after of the file names, so you don’t have to guess at what you are doing. If anyone know of an OS-X bulk renaming tool, please contact me.

My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used wedding-party-rachel-stephen-richard-mary-james.jpg

4. Create keyword-dense titles and keywords for each item

aving tags or keywords link similar items not only provides users of your site to easily visit similar items, but it also links the keywords with your content for SEO.

Upon wanting to post over five hundred photographs of my honeymoon in Ireland to my Gallery2, I decided to write an automated PHP script that goes through the database and does the following:

• Reads in the file name
• Replaces the hyphens and/or underscores with spaces
• Removes Windows and OS-X renaming suffixes/prefixes such as numerals, parenthesizes and the word “copy.”
• Then, places this text in the item title field

After creating the title, I re-run the php script that then adds keywords. It does the following:

• Reads in the file name
• Replaces the hyphens and/or underscores with a comma and a space
• Removes Windows and OS-X renaming suffixes/prefixes such as numerals, parenthesizes and the word “copy.”
• Removes common words such as the, of, to , with, on, through, in and single letters (A-Z)
• Then, places this text in the item keyword field

Now you can do all this manually and probably get better results by fine-tuning each item’s keywords and title, but in this instance, I did not want to enter thousands of keywords and possibly misspell them.

If you would like a copy of this script, I can email it to you. Please contact me. You will need to directly edit a PHP file, but I believe it is straight forward enough. It has no warranty for anything it does to your system. Before using it, backup your database. After the script has run, the database cache will need to deleted at Site Admin >> Maintenance >> Delete database cache

5. Optimize robots.txt

Some say to disallow search engines from listing keyword or tag pages by using disallow within one’s robots.txt. The theory behind this is that search engines do not actually stop looking at the pages listed after a disallow command. Disallow is there to prevent good search engines from listing disallowed pages in their search results. They DO read and evaluate disallowed pages for content. So the theory is that when a user searches for a keyword, the keyword page will not show up in the search results, but the actual content pages that the keyword pages link to will show up. This only works with search engines that value linking over keyword density. Since there is usually not much text on an item page, disallowing keyword filled dynamic albums might have negative effects. I suggest you research optimizing your robots.txt more, before disallowing hundreds of pages from search engine results.

6. Remove slideshows

I would say that this is the least important item on this list, but you want to be sure to remove as much duplicate content as possible, then to remove the slideshow:

• Goto Plugins on the Site Admin page.
• Deactivate Slideshow and Slideshow Applet

7. Remove multiple sizes

I’ve never had multiple sizes setup in my Gallery, if someone has the directions on how to deactivate this. It would be helpful.

8. Enable Google Sitemap

Sitemaps are an XML document that lists all content pages. When your site changes, it changes. Just like it says, it is a map. It doesn’t automatically get you a higher SEO, it only give the search engine a map to browse your site with. Personally, I’m not convinced that this helps SEO. It just makes sure all your pages get listed–which if you are practicing good SEO on your site, when you should not have to worry about a page not being listed. To enable Google Sitemap:

• Goto Plugins on the Site Admin page and deactivate Slideshow and Slideshow Applet
• Activate Sitemap

9. Optimize permalinks

Search engines do not like variables (question marks and ampersands) at the end of URLs. Gallery is made to be sticky with its items which makes human browsing easier and pretty much eliminates the need to use the browser’s back button. If you use the breadcrumbs in the upper left to view a parent album, you are shown the album page that contains the item you were just viewing. Below are changes to make to the Gallery2 code

Comment out the urlParams call in /modules/core/classes/GalleryTheme.class
LINE 1408 – BEFORE

if (!empty($theme['parents'][$i + 1]['id'])) {
$urlParams['highlightId'] = $theme['parents'][$i + 1]['id'];
} else if ($itemId && ($i + 1) == count($theme['parents'])) {
$urlParams['highlightId'] = $itemId;
}

LINE 1408 – AFTER

/* if (!empty($theme['parents'][$i + 1]['id'])) {
$urlParams['highlightId'] = $theme['parents'][$i + 1]['id'];
} else if ($itemId && ($i + 1) == count($theme['parents'])) {
$urlParams['highlightId'] = $itemId;
} */

10. Make item titles into heading text and links

Add heading tags to item titles in /themes/matrix/templates/album.tpl (with “matrix” being your current theme)

LINE 121 – BEFORE

<p class="giTitle">
{if $child.canContainChildren && (!isset($theme.params.albumFrame)
|| $theme.params.albumFrame == $theme.params.itemFrame)}
{* Add prefix for albums unless imageframe will differentiate *}
{g->text text="Album: %s" arg1=$child.title|markup}
{else}
{$child.title|markup}
{/if}
</p>

LINE 121 – AFTER

<h2 class="giTitle">
{if $child.canContainChildren && (!isset($theme.params.albumFrame)
|| $theme.params.albumFrame == $theme.params.itemFrame)}
{* Add prefix for albums unless imageframe will differentiate *}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
{g->text text="Album: %s" arg1=$child.title|markup}</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
{$child.title|markup}</a>
{/if}
</h2>

11. Prevent duplicate base URLs for your Gallery

On Apache servers, you can change by each directory how the web server serves up your pages within a file named .htaccess. If you have implimented the URL Rewrite plugin correctly, then you should already have an .htaccess file in your Gallery2 directory. Redirects affect SEO negatively, and it has been said that two site homepages, /main.php and /, harm SEO. To prevent the 301 redirect to /main.php, add the following lines to the top of your .htaccess:

# Set the default handler.
DirectoryIndex main.php

It should be said that not all hosts allow you do change the DirectoryIndex. Also, this also might need to be done to get rid of “main.php” in the breadcrumb. I’m not sure if I changed this myself or gallery set it automatically, but on line 177 of /config.php, I have:

# Set the default handler.
DirectoryIndex main.php

In a related note, some search engines will differentiate www.yourdomain.com and yourdomain.com. This not good and could result in duplicate content. You can search Google via site:yourdomain.com and find out how your site is currently listed. You want to be listed in the same format that external links and internal links are linking to your site. To redirect pages without “www” to a page with the prefix, add the following lines to the top of your .htaccess:

RewriteCond %{HTTP_HOST} !^www.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

If you are hosting, your Gallery2 in a subdirectory (e.g.- photos), use this:

RewriteCond %{HTTP_HOST} !^www.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/photos/$1 [R=301,L]

12. Add META tags to your Gallery2 pages

It has been said that META tags have lost importance since their glory days ten years ago. They have lost importance to external links, but they are not to be disregarded. To add the META tags keyword and description to your Gallery2 pages add the following lines to /themes/matrix/templates/theme.tpl (with “matrix” being your current theme).

LINE 19 – BEFORE

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}

LINE 19 – AFTER

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}
<meta name="keywords" content="{$theme.item.keywords|markup:strip|default:$theme.item.pathComponent}" />
<meta name="description" content="{$theme.item.description|markup:strip|default:$theme.item.pathComponent}" />

Note: The above is only an addition of the meta tags.

13. Optimize page title

Page titles are some of the most important information used for SEO. Search engines will only use the first so many characters. I’ve heard that title elements should ideally be less than 64 characters in length. That doesn’t been you can’t use longer ones though. Forum user, maravizzo, suggests adding the title of the parent album to the page title. This should increases your associated keyword density in your page title.

Add lines in /themes/matrix/templates/theme.tpl
LINE 14 – BEFORE


{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}


LINE 14 – AFTER


{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}
{if $theme.parent.title}
:: {$theme.parent.title|markup:strip|default:$theme.parent.pathComponent}
{/if}
:: Title of Site</title>
{/if}


14. Create SEO page numbers

This is related to number six, Optimize permalinks, but I have yet figured how to do it. I’ve read the Gallery2 forum thread, URL Rewrite for page number, but did not want to change my current item permalinks. If anyone has suggestions, I’d love to see this addressed.