I’m pleased to annouce that on Monday this week we launched the Matrix version of our website - http://www.lifeline.org.a .
While its design is very similar to the previous version - this new design has an emphasis on standards compliance and accessibility. We are thinking of this new look as a refresh, rather than a redesign.
While the html and css has been tested with a validator - its not been tested in a wide range of browsers - so I would be interested in feedback from people using browsers other than IE6&7 or Firefox if they find the design breaks.
I’ve also validated it at Cynthia Says - which only shows one failure at this point.
I’ve got a bit of time to clean up any bugs or issues with the site - but I had though I might enter it in this years http://www.lifeline.org.a. Any advice I can get from accessibility experts will be very welcome.
Also - if you visit our website, please have a look around. Lifeline is doing some really valuable work for the community in the areas of suicide prevention, mental health, depression and counselling. And feel free to make a donation
We are not government funded - we rely on donations.
Just curious how you, and others who are building sites with Matrix add their content. Do you just add a normal tag, e.g. <MySource_AREA id_name="body" design_area="body" /> And then add your html into that DIV through the simple edit interface? Or do you hard code things into the parse file? Also, are you using paint layouts in this design? I guess I am just trying to figure out how everyone builds their sites…
Matrix designs will have some hard coded HTML in them. The bits that need to change between pages (like the main content area) will use design areas. Parts of the design that you want to edit easily will probably use the nest content design area so you can place the contents of a page in that location.
I tend to build the html template for the page and then add matrix tags tags, as you suggested. I have a few things hard coded in the parse file where I'm happy for them to appear on every page.
I use design_area="nest_content" quite a lot too. The random blocks of text at the side of the content pages are an example of this - the nested content is an asset listing page that is randomly selecting standard pages that each contain the small block of text.
I also have two customisations for our site at the moment, one for the homepage, another for the other pages in the site. The main difference between them is the css files that they point at.
We aren't using any paint layouts for the website at present, but you never know - we may in future.
Also - I'm finding more and more that I am using the raw html mode when entering page content, as the extra divs and the occasionally odd wysiwyg code were being a pain. But that may be just because I'm much more confortable writing the code that relying on a widget to do it for me.
I expect that some of the methods that I have chosen may not be the most efficent, so I'll be interested to hear what the Squiz guys have to say
Avi?
Can you explain a little more how you use the design_area="nest_content"? Are these just for asset listing pages, e.g. adding my current news, or a random photo from my library.
Also, I don't see a difference between adding a DIV that is Block-level and one that is Raw HTML, maybe someone could point this out to me.
And yes, I would love to know what the best practices are that Squiz uses for adding content.
The Nest Content design area can list any type of content outside of the BODY design area in your design. Usually, we nest an Asset Listing (or similar) asset so that its easier to change the content in that block without modifying the design.
There is a difference in Block, Inline and Raw HTML Presentation: Block adds <div> tags around the content, Inline adds <span> tags and Raw HTML doesn't add any tags at all.
Similarly, if you have the commercial modules, you have a series of alternative content types, including a Raw HTML type, which suppresses the WYSIWYG editor and allows you to provide raw code. This code is not checked for validity, but can contain things like CSS or JavaScript (which is removed by the WYSIWYG editor). However, it cannot contain PHP code.