Posts Tagged Cascading Style Sheets

Backend Layout (Grid View) Feature of the New Typo3 4.5 LTS

For anyone who has ever used Typo3 as a CMS, they would be well aware of the limitations associated with the layout of a page (backend layout) in the administration area.

Without hacking or using third party extensions such as TemplaVoila, it was pretty difficult to get anything more than the Left, Normal, Right & Border columns to add content elements to your website. For someone familiar with Typo3, it wasn’t a major problem, but as soon as you put the administration system in front of someone who was about to use it for the first time, it created nothing but confusion.

With the release of Typo3 4.5, Typo3 developers now have the ability to make a more user friendly admin page for content editors through their new core feature Grid View (Backend Layout).

With ease, we can now give the Typo3 user a more user friendly and intuitive admin page just by creating a few simple backend layout views that only helps people make a better association with the websites design.

I found it very hard to find any decent information online about how to implement the Backend Layout feature, so I’ve decided to put together this little tutorial on how you can get started.

Step 1 : Create Backend Layout
The first thing you need to do is create a system folder to store your backend layout templates.

Once you’ve created the new system folder, choose List (on LHS) > the System Folder > Click the “Create Record” button at the top of the RHS page. Then from there, you should choose “Backend Layout”.

On the next screen that loads, enter your Title (used to easily identify the layout) and click the Grid Wizard icon (pencil and notepad) beside the Config field. It is also a good idea to associate a simple graphical icon to help you identify the layout visually.

 

The Grid Wizard allows you to design a layout, in our simple example we use a Top Left, Top Right and Bottom style layout.

 

One thing to note here is that you MUST enter a Name and Column number for each column of the layout grid. If you don’t do this, you will get a “not assigned” error in the admin page.

The Grid View wizard creates the config code required to make it all work!

E.g.

backend_layout {
colCount = 2
rowCount = 2
rows {
1 {
columns {
1 {
name = TopLeft
colPos = 1
}
2 {
name = TopRight
colPos = 2
}
}
}
2 {
columns {
1 {
name = Bottom
colspan = 2
colPos = 3
}
}
}
}
}

Once you are happy with your layout, you can now begin to apply the layout to the backend page.

 

Step 2 : Apply Layout to Backend Page
This step is very simple, all you need to do is access the page properties of the page you would like the Backend Layout applied to. Choose the “Options” tab and at the bottom of this page, you should see the icons (if you’ve applied one to the layout) of the layout options you have available. If not, you can simply choose your layout from the drop down menu.

 

Step 3 : Apply to Front End Template
Nothing hugely changes much from a front end perspective. We all have our own ways of doing this I’m sure. But here’s a simple example of what we would do:

Layout.html File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Untitled</title>
</head>

<body>

<!– ###DOCUMENT_BODY### –>
<div id=”topLeft”>
<!– ###TOPLEFT### –>
TOPLEFT of page
<!– ###TOPLEFT### –>
</div>
<div id=”topRight”>
<!– ###TOPRIGHT### –>
TOPRIGHT of page
<!– ###TOPRIGHT### –>
</div>

<div id=”bottom”>
<!– ###BOTTOM### –>
BOTTOM of page
<!– ###BOTTOM### –>
</div>

<!– ###DOCUMENT_BODY### –>

</body>
</html>

 

TypoScript Set Up
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/layout.html

page.10 {
workOnSubpart = DOCUMENT_BODY
subparts.TOPLEFT< styles.content.get
subparts.TOPLEFT.select.where = colPos = 1

subparts.TOPRIGHT< styles.content.get
subparts.TOPRIGHT.select.where = colPos = 2

subparts.BOTTOM < styles.content.get
subparts.BOTTOM.select.where = colPos = 3

}

One final thing to do is make sure that you have included the CSS Styled Content in your statics!

That should be enough to get you started with this great new feature! Enjoy!!

Tags: , , , , , , , ,

9 Comments

Is your site ready for Google’s speed ranking factor?

Image representing Google as depicted in Crunc...
Image via CrunchBase

Back in November 2009, the infamous Matt Cutt’s mentioned in an interview at PubCon that there was a push within Google to make the speed of your website a factor in ranking criteria. Considering that there are many factors that will affect the speed of your website, it seems a little unfair to me. None-the-less if that’s what Google plan to do, we all need to prepare ourselves for this possible ranking factor.

What can you do to ensure your website is running at optimum speed? Well as mentioned, there are a number of factors to take into account some in your control and others not. Here’s my list of things you should work on.

  1. Hosting
    First and foremost you should ensure your hosting is with a reputable hosting company that provide fast reliable hosting. Judging by the page speed test in Google’s Webmaster Tools, they will POSSIBLY take the average speed of your website over a set period of time.
  2. Reduce use of and optimise your image files
    There’s nothing easier than reducing the use of images on your website. For more complex designs, it may not be the easiest thing in the world, but when designing your website you should be conscious of the fact that larger images increase download times.

    Optimising your images is also of key importance. Make sure you choose the correct file format for the image type you are using. For example, don’t save a photograph as a gif!

  3. Clean Code
    Make sure your websites HTML code is as clean as can be, if possible don’t use tables. Apart from the fact that using tables for design is a no no in terms of web standards, tables tend to have a lot of code associated with them. If you can avoid using them, do so.
  4. Combine CSS files & Javascript Files
    Another obvious way to reduce the load time of your website pages is to combine your all your CSS into one extermal file rather than placing it all on the page. Similarly you should do the same with with all your javascript.
  5. Reduce HTTP Requests
    Following on from point number 4, you should try and limit the number of HTTP requests you make from your webpage. So for example, rather than having 2 or 3 external javascript files, try limit it to one file.
  6. Gzip Compression
    If your server supports it, make sure it’s turned on! Need I say more?

Of course, there are a number of other ways to reduce the load time of your website, but by sticking to these simple steps, it should be enough to keep your website running at an optimum speed. There are also a number of free tools available for you to test your web sites page speed. The Page Speed plugin for FireFox is really good as is the website www.webpagetest.org !!

Oh and don’t forget to check out the Page Speed test tool within Google Webmaster Tools to see how your page is currently performing!

Tags: , , , , , , , , , ,

3 Comments

Son of Suckerfish dropdown menu displaying behind other DIVs in IE6

Windows Internet Explorer
Image via Wikipedia

Did you ever get one of those days when no matter what you do or try, nothing seems to work for you?

Well I had one of those days today – a site we are currently working on was giving all of us heartache, so I decided to get my hands dirty and give the lads a dig out.

It was a strange one, we use the Son of Suckerfish method for most of our websites that use drop down menus. Suckerfish is a great way to have a dropdown menu work purely with CSS alone. The only javascript required is approximately 8 lines of code and it’s only there to support non-standard compliant browsers such as Internet Explorer.

All was well and good with this new site until of course it was tested in Internet Explorer 6. For some odd reason the drop down menus were appearing behind other divs on the page and therefore you couldn’t see them. After hours of trying many different things from the z-index to positioning, we couldn’t find a suitable solution. Most solutions would have meant rewriting the HTML code to suit. This was something we didn’t really want to think about as it was only happening in one browser… IE6.

Thankfully I found a great little solution to the issue on a blog (sorry the blog address escaped me now) – it was another few lines of code:

function reIndex(){
forms = document.forms
zi = 2000;
cn = document.getElementsByTagName(‘div’);

for (n=0;n<cn.length;n++){
cn[n].style.zIndex=zi–;
}
}

You just need to call the function from the body tag onload and voila.

This basically reindexes all the divs on your page so that IE6 doesn’t fall on it’s face when you give it something to do that it’s not capable of doing!

Tags: , , ,

No Comments

Where do I stand on web coding standards?

In my business, I’m constantly involved in debates on a regular basis discussing how important developing websites to the latest coding standards actually is.

In most cases, people expect me to be a huge fan of the latest W3C web coding standards. A lot of these people believe that all professional web design agencies should do nothing less than provide my clients with websites coded to the latest web standards.

However the reality is, that although I completely believe in the concept of having web coding standards and that it is for the common good and the future of the Internet, I’m not convinced that every website has to be developed to the latest coding standards right now.

Those that think it is the only way to do websites now are generally egotistical snobs who like to brag about being able to produce standards compliant websites.

I think it’s time to cut out the b*llshit.

Let’s look at the arguments most pro-standards compliant supporters use to justify their cause.

  1. Sites coded to the latest coding standards perform better in the Search Engines
    This statement is simply untrue. A site can perform just as well developed in the old fashioned way as it can in the new way.

    But with all statements related to this topic, it was taken completely out of context and made a fact by those that didn’t really understand what it meant.

    The truth is simple, a properly coded CSS based, compliant standard website should have less code than your old table based website. In theory a search engine should be able to pick up the important content of your website more easily, since there is less code. However, a clean coded website in the old fashioned way can do just the same too.

  2. Quicker and more flexible
    In some cases you can agree with this, but in others you can’t. There are a few things that can be done quickly in HTML that take an age in CSS, but this goes both ways. So I don’t think it’s fair to use this as an argument for the cause.

    Another argument is that CSS based sites download quicker… that too is highly debatable and comes down to how well a site is coded. Here’s a recent study : http://www.decloak.com/Dev/CSSTables/CSS_Tables_02.aspx

    The fact is that in theory a CSS based site will have less code, so it should be a smaller file size. In turn this should relate to a faster download. I completely agree with that.

    However, if the site is badly coded and uses unnesseccary code, it will be the same amount of code as the old way.

  3. Accessibility & Cross Browser Compatibility
    This is one that really gets to me. Most people that use this as an argument don’t really understand what accessibility actually means. So just for you, here’s WikiPedia definition of accessibility:

    “Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible. Accessibility can be viewed as the “ability to access” the functionality, and possible benefit, of some system or entity.”

    My only issue with wikipedias definition is the highlighted part. Accessibility is about access for all (http://www.sustainable-design.ie/arch/adapthouse.htm) not just a few people.

    So unless your site is nearly completely text based, your website will not work in old browsers. Have a look at a browser compatibility chart : http://vzone.virgin.net/sizzling.jalfrezi/stylebml.htm

    For me, it is more impressive for a web developer to have his website work well in all browsers than someone who can just code for the latest browsers.

    To date, most webmasters base their website accessibility test on W3C’s WCAG 1.0, which are just that, guidelines. How many web designers that claim to be 100% accessible have actually sat down with someone who has activity limitations? I would imagine very very little.

    Instead, they use a program to test how well their site is coded. Webmasters being webmasters, have spent years hacking their code to work in different browsers, so you can imagine how easy it is to trick a piece of software that just looks for dodgy code. In theory you could have an inaccessible website, that will pass this test, yet it could be claimed to be accessible. Thankfully WCAG 2.0 will focus more on the actual accessibility rather than the websites code.

    On and just to add more to this argument, you can create an accessible website no matter which route you take in terms of coding standards.

With our clients, we’ll continue to give them the pro’s and con’s of each different techniques. It must be noted that a lot more people care more now about the latest coding standards than working in older browsers.

The change is coming, so make sure you evaluate all issues before deciding on which route to take your website. Both ways have equal pro’s and con’s associated with them.

Tags: , , , , , , , , ,

4 Comments