WordPress › Support » personal site for writer / speaker

automaton
Member
Posted 1 year ago #

The site is in Dutch, so you won't be able to make much of it if you don't understand that language.
But I spent a lot of time on the look and the templates, carefully balancing jpegs, gifs and alpha-transparent pngs. In the end, I think it turned out pretty well.
Have a look at http://www.leobormans.be
MoTStudio
Member
Posted 1 year ago #

I wish I could read Dutch because it all looks like something interesting to read, but that looks really nice!

Visually, it looks very rich and I think you did a good job balancing the color scheme and graphics. Vibrant, yet not too hard on the eyes (though some might disagree?).

However, my one word of warning is also about the graphics.

The site navigation is very much GUI versus textual and coding-only/mostly links and to rely so much on the graphics to guide people around means that if the graphics fail to load for some reason or if the graphics take too long to load (I am running DSL and your site took a bit to load), then the look and purpose of the site - along with its navigation - vanishes.

For a personal website, this might not be much of an issue if any, but for a professional site, this might be something to be concerned about.

So.

Really nice design but a word of warning on loading time and 'what if' in regards to the site being so graphics-heavy.
automaton
Member
Posted 1 year ago #

Good points on the graphics, the homepage is kind of heavy. I was thinking about putting a simple drop-down navigation somewhere for people with slower connections or for navigating to deeper-lying pages directly. I might also shave some size off of the images here and there or see if I can change the loading sequence. For now, I'll wait to see what other users' opinions are. This is a personal site, so many people will know this guy personally and will send him their feedback.
The templates are constructed in a way that is friendly to screenreaders and other image-less browsers, so semantically everything should be more or less in order, at least. That should help me along the way when I need to optimise.
Chrisber
Member
Posted 1 year ago #

It does take a fairly long time to load, but the look of the site would be destroyed without the image links. It would be a good idea to try and reduce the file sizes if you can. Maybe the best alternative to the navigation issue would be to include a second set of nav links in the footer using small text.
automaton
Member
Posted 1 year ago #

The transparent png in the footer is about 150k, a bit over the top, any suggestions on how to make a seamless transition in the wood background without alpha transparency somewhere?
The big block of text on the homepage is a 170k jpeg, I've just changed it to an 8-bit png and it's now only 35k. That should help.
Chrisber
Member
Posted 1 year ago #

It does load faster now.
justderek
Member
Posted 1 year ago #

It loaded very fast for me - I'm using Firefox 3.0.1/Windows XP.

I think it looks really nice. I don't speak Dutch so I couldn't read the page titles, etc, but I also loaded the site through Google Translate so I could get the meaning of the content.

Anyway, very nice job! Well done.
mores
Member
Posted 1 year ago #

Cool ... care to explain, how you set it up?
automaton
Member
Posted 1 year ago #

So, the full post-mortem?
Well, I've been using Wordpress for a number of sites since roughly 2003, and I love the down-to-earth simplicity, and especially how user-friendly its back-end is.

So, for this project, I decided to use Wordpress pretty early on. I knew the site was going to be 90% Pages and only 10% (blog) posts, but I was pretty confident I could make it work.

Template-wise, I didn't base it on any existing theme, this was actually the first time I built a theme completely from scratch.
I more or less know what makes Wordpress tick, the first thing I did was create a home page design in Fireworks (a hugely underrated program, I think). Once approved by the client, I then started building completely static HTML pages.

By then I had received most of the actual site content. I think it's always a good idea to develop using real content instead of 'lorem ipsum' dummy stuff. Things like text length, subtitles, inline links, etc. are hugely important for how a page should be designed.

So, only then did I install Wordpress. I created all the pages, nested them appropriately, created the necessary categories and users. I did all this with the Wordpress default theme.

Then, one by one, I replaced the default pages with my own designs. These were based on my initial static HTML pages, I simply added the Wordpress code where needed.

I only used two plugins . One was a breadcrumb plugin (Yoast Breadcrumbs) which I modified heavily to fit my needs. The code generated by the plugin isn't that flexible, I'm thinking of creating my own more developer-friendly version.
The other plugin I used was the excellent Dagon Design Form Mailer. I think it's the single most useful third-party Wordpress plugin out there. Something like that should be included in the core, with database support.

A lot of stuff, especially the homepage, is hardcoded. The client can do his own text corrections, but creating extra Pages in the top level and making them accessible isn't possible without a significant modification of the template files. That's an obvious trade-off to the visually-rich front-end. But I don't see it causing any problems. Even if I get run over by a bus tomorrow, someone else who knows Wordpress can easily add another set of images and link them to a page.

So, any questions?
mores
Member
Posted 1 year ago #

Wow! I expected a "made it with pages, static links in front-end" answer, but this was very insightful and fun to read. Thank you for taking the time!

jberghem
Member
Posted 1 year ago #

Very good! I never would have taken it for a WordPress site.

Just one thing; open you header.php and change the doctype from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

't ziet er heel goed uit!!

automaton
Member
Posted 1 year ago #

Why change the doctype? For standards-compliance?

Bedankt, by the way ;-)
jberghem
Member
Posted 1 year ago #

The answer is very simple. The code you are using below the DOCTYPE is XHTML 1.0 Strict and not HTML 4.01 Strict.

Net als wanneer ik iets in het Nederlands schrijf zet ik er ook niet boven dat het Vlaams is (al lijkt het veel op elkaar)

HTML is a SGML language
XHTML is HTML rewriten in XML

See for yourself:
HTML validation
XHTML validation
all4travel2
Member
Posted 1 year ago #

Loaded in 9 seconds with my not-so-fast DSL connection.
jberghem
Member
Posted 1 year ago #
Great that you changed the doctype. Pity that you added a target attribute to a link. That's not allowed in XHTML Strict but is in XHTML Transitional. If you want to keep it strict you can add this JavaScript in your <head>
```
<script type="text/javascript">
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;
</script>
```
Then you can add a rel attribute to it called "external" to those link you want to open in a blank window or tab. Like this:
```
<a href="http://validator.w3.org/check?uri=referer" rel="external" title="XHTML Validation Check (external link, opens in new window)">
```
I usually inform viewers that it's an external link that opens in a new window with the title attribute. This way they know they're leaving my website.
automaton
Member
Posted 1 year ago #

I'm starting to suspect that http://www.leobormans.be has somehow been blacklisted by Google. I have no idea why, but none of the content shows up in Google, and when I search for the domain the site does not appear in the results. Should I be worried, and what could I possibly have done wrong?

@jberghem: Yup, I know about the target thing. For now I just keep using them, I think the Javascript solution is a bit over the top. Best would be to have an 'external link' icon with every external link, but it'd be best to have that automated.
jberghem
Member
Posted 1 year ago #
The reason you're not being found on Google (or any other search engine) is because you've told the Index robots that are responsible for listing you not to do so with the meta tag: <meta name='robots' content='noindex,nofollow' />

Take out that meta tag and you'll be on Google within a week.

As for external links you can use a pseudo class in CSS on your links. Have your external link look like this:
```
<a class="othersite" href="http://www.somewhere-else.com">link</a>
```
and the CSS:
```
.othersite:before { content: url(/icon.jpg ); }
```
automaton
Member
Posted 1 year ago #

That 'othersite' class would be what I'd automate via php or something. I can't expect an editor to add this class to all external links, years of experience have taught me that much ;-)

Didn't notice the robots thing, it was added by wp_head() through a Wordpress admin setting under 'privacy', which I presumably switched on during development. Silly me.

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

personal site for writer / speaker (18 posts)

Topic Closed

About this Topic

Tags

Code is Poetry