Make changes to the TSC's CSS and front-end code.
Pre-req's:
Finalised homepage wireframe and visual design from Teresa
Issue details imported from Jira:
Detail |
Value |
Assignee |
Jack Zhao |
Reporter |
Teresa Leung |
Created |
2010-07-17 21:13:55 |
Updated |
2010-07-29 10:45:17 |
๐ Jira attachments: https://tickets.openaustraliafoundation.org.au/attachments/EL/EL-28
Imported Jira Comments
Teresa Leung - 2010-07-18 13:15:55
I'll get cracking on the design tonight. Would a photoshop or illustrator file suffice?
Matthew Landauer - 2010-07-18 13:22:28
@teresa - is that a question for Henare and I or for Jack?
Henare and I would like new html and css for the design changes. Even better, if possible, would be patches to the current codebase (but that is optional) ![](https://camo.githubusercontent.com/d0fc0f286915d0ea76ffbf41d7952672a3c019e38b76022fcba9cec534a2ae26/68747470733a2f2f7469636b6574732e6f70656e6175737472616c6961666f756e646174696f6e2e6f72672e61752f696d616765732f69636f6e732f656d6f7469636f6e732f736d696c652e676966)
Teresa Leung - 2010-07-18 14:07:49
The psd/ai file was a question for Jack.
Henare Degan - 2010-07-18 22:24:48
Hey Teresa, Jack,
How's this work coming along? I've made good progress today and stand ready to integrate the visual changes that we were planning to get an initial version of tonight.
Cheers, Henare
Teresa Leung - 2010-07-18 23:39:09
Still working on the design. I'm sending this over to Jack tonight. Plan is for him to work on it tomorrow night after work.
Teresa Leung - 2010-07-19 00:33:16
Hi Jack - jpg and fonts attached here. I will YouSendit the psd file to you - it's bigger than the 10mb upload limit.
I've used a free font called Pigiarniq which I'm hoping you can implement using @font-face. If we run out of time to do this, let's look at using another default font for the headings.
I haven't had a chance to do a second generic page tonight but I'll send you something early tomorrow night.
Please give me a call when you start work on this so I can give a more complete handover of the design & discuss any potential issues.
@team - hope design suits - I took the tactile paper approach - obvious I know..
Teresa Leung - 2010-07-19 00:41:23
@henare & Matt
Jack also had a question about getting a local copy (of the code I think) for him to work on.
Can either of you advise what's the best way for Jack to integrate his work into yours?
Henare Degan - 2010-07-19 08:29:55
@teresa
Wow - design looks great, awesome work! Thanks very much for the update about timing too.
@jack
>Jack also had a question about getting a local copy (of the code I think) for him to work on.
As per my email a while back - if you have any questions, please do not hesitate to ask. I'll be happy to help.
>Can either of you advise what's the best way for Jack to integrate his work into yours?
With the amount of time we have - whatever way suits you Jack.
If you want to get a local copy running, modify the templates and provide Git patches back, that's awesome. However, if you want to make your own static HTML files, we'll just live with that too. Whatever works.
Please don't hesitate to discuss this with me (over the phone if need be), the most important thing is that we get something quickly so we can start producing new iterations and iron out the issues. I don't need to say it again but I will - we don't have much time ![](https://camo.githubusercontent.com/d0fc0f286915d0ea76ffbf41d7952672a3c019e38b76022fcba9cec534a2ae26/68747470733a2f2f7469636b6574732e6f70656e6175737472616c6961666f756e646174696f6e2e6f72672e61752f696d616765732f69636f6e732f656d6f7469636f6e732f736d696c652e676966)
Jack Zhao - 2010-07-19 09:42:50
I think instead of me trying to get a local copy working, I'll work on static XHTML/CSS templates and send them over to one of you guys to merge.
I will work on it tonight after work.
Henare Degan - 2010-07-19 09:51:39
Sweet, Jack no problem.
I'm sure I don't need to tell you but remember we'll be integrating into the existing dynamic code so the closer you stay to the original code structure the easier it will be for us.
The CSS: http://github.com/openaustralia/electionleaflets/tree/master/docs/css/
The templates: http://github.com/openaustralia/electionleaflets/tree/master/templates/
Are you aiming to get us a first cut tonight?
Cheers, Henare
Jack Zhao - 2010-07-19 09:55:44
no problem, Henare. will use the current template as the base.
should be able to finish the first cut tonight.
Henare Degan - 2010-07-19 10:17:54
That's awesome Jack, thanks!
Henare Degan - 2010-07-19 10:25:16
@teresa
A couple of minor points about the design:
- The pipe separated list under the title should be (not so worried about the wording, just the grouping): 2010 Federal Election | Live Election Leaflet Monitoring
- At the bottom of the cool paper background thing I assume there's another 'cut', it kinda looks weird - what about a gradient fade to white? (You may have already tried this, ignore me if you have
![](https://camo.githubusercontent.com/d0fc0f286915d0ea76ffbf41d7952672a3c019e38b76022fcba9cec534a2ae26/68747470733a2f2f7469636b6574732e6f70656e6175737472616c6961666f756e646174696f6e2e6f72672e61752f696d616765732f69636f6e732f656d6f7469636f6e732f736d696c652e676966)
- The nav bar at the top - we're getting rid of "Map" and "Analysis" for the moment, yeah?
Teresa Leung - 2010-07-19 23:28:40
Thanks Henare!
- Pipe fixed
- Cut looked weird to me too but had to pull the trigger last night (too sleepy). There's a new solution now (jpg preview attached)
- Jack & Andrea will remove 'map' and 'analysis'
Some notes about the calls to action on the homepage...
The wording was changed from TSC version to accommodate mobile users since it was recommended by TSC to capitalise on this feature.
From Henare's explanation, it seems that the workflow for emailing leaflets doesn't make much sense for any other users apart from mobile phone users (I could be wrong, please correct me). It's a convoluted process for users with digital files on their computer - it's quicker if they upload them directly instead.
This lead to the idea of splitting up instructions to suit the 3 types of users:
- mobile phone users who have to email their files
- users who don't have smart phones but have digital files should upload directly to save time
- people who want to post their leaflets via snail mail
So I looked at TSC wording:
- Are the instructions...take a photo with a camera and scan with a scanner etc.. really necessary. And if so, this is common to emailers & uploaders. To do this means it's just visually complicated.
- With the new wording, I've tried to allude to that process without spelling it out like TSC.
Jack & Andrea have simplified the wording even more:
Upload them online now (photograph or scan them first)
Email them straight from your phone ([email protected])
Post them to us via snail mail (PO Box address...)
Jpg attached
Teresa Leung - 2010-07-19 23:31:44
- New wording for calls to action
- Divide between paper & white background changed
Jack Zhao - 2010-07-20 01:02:30
initial draft template based on design.
to do:
- Teresa's slightly new design
- "crease" lines
- footer styling
- make "add a leaflet" icons clickable
... other css styling issues.
Henare Degan - 2010-07-20 10:39:46
>initial draft template based on design.
Can I be the first to say, "oh boy, oh boy, oh boy!". Great stuff Jack - looks awesome at initial pass.
I'm not sure of Matthew's availability right now but I'll put my hand up to start work on this straight after work.
Jack Zhao - 2010-07-20 22:44:28
Templates:
home (home.html)
upload (addupload_new.html)
listing (latest_new.html)
detail (detail_new.html)
full view (full_new.html)
Jack Zhao - 2010-07-20 22:46:33
IMPORTANT:
all templates must use 'home_files/main.css'
Matthew Landauer - 2010-07-21 01:35:01
Even at this late stage there are too many small problems left with the css/html implementation for this to go live for the launch.
Henare can fill you in on the details of these.
I'm disappointed you weren't able to deliver working css/html.
It would be great if you could iron out the remaining problems in the next couple of days so we can update the site as soon as possible.
Teresa Leung - 2010-07-21 07:14:05
Oh bummer. We deliberately de-prioritsed visual refinements on the homepage - we intend to fix these in the next couple of days. Henare, details of the functional fixes would useful.
I've uploaded our logo as png & photoshop without the background image. We need to overlay this over the clouds to at least inject a portion of our identity into the TSC version & make the header less dodgy-looking.
Teresa Leung - 2010-07-21 07:50:47
Interim header files
Henare Degan - 2010-07-21 19:50:24
Hi all,
Just as a random idle experiment I thought I'd see if I could rebase my design changes from last night onto our latest code and... it worked!
I've pushed it as a new topic branch to my fork: http://github.com/henare/electionleaflets/tree/EL-28
You can see the code differences here:
http://github.com/openaustralia/electionleaflets/compare/openaustralia:master...henare:EL-28
And I've checked it out on the test site so you can see what it all looks like: http://test.electionleaflets.org.au/
Teresa Leung - 2010-07-24 18:02:46
Jack - lots to do to tighten up the design.. I've attached a pdf with my comments. Also have provided design templates for the leaflet pages to show where we need to get to.
I'm still working on the leaflet gallery page.. will send that through later tonight.
Teresa Leung - 2010-07-24 18:05:15
Photoshop file with type specs on leaflet page
Teresa Leung - 2010-07-24 22:48:03
Jpg and psd file for the leaflet gallery page template:
http://www.electionleaflets.org.au/leaflets/?page=3
However, live site has issues with text and image overlapping.
Google image search results - possible solution - resize images to fit within a set area to resolve spacing issues:
http://www.google.com.au/images?q=election+leaflets&hl=en&client=firefox-a&hs=H7y&rls=org.mozilla:en-US:official&prmd=i&source=lnms&tbs=isch:1&ei=dttKTL2_OYnUvQOfo7W7Cg&sa=X&oi=mode_link&ct=mode&ved=0CBcQ_AU
Teresa Leung - 2010-07-24 22:55:44
Refinements for About us page:
- Narrow the text column to 820px to reduce line length to readable width.
- Apply hyperlink style to links within the body text (brown with underline)
Jack Zhao - 2010-07-25 01:42:32
implemented most the design changes. see them on the test site.
gallery page is in progress, should be able to finish today (sunday).
Teresa Leung - 2010-07-25 12:13:34
LOOKS AWESOME!
Can't wait til this goes live.
We should probably add a badge or something to acknowledge the redesign so that previous visitors don't think they've landed on the wrong site.
Also, some minor adjustments attached in the pdf (notes_r2).
I'll work on a 'new design' badge now.
Teresa Leung - 2010-07-25 13:34:01
If we want to add this...
Design for a little flag saying 'new design launched' which we can keep for a week or so, then remove as needed...
jpg and EPS attached
Henare Degan - 2010-07-25 15:47:49
Wow, you guys have done an amazing job!
Henare Degan - 2010-07-25 15:56:42
Committed: http://github.com/henare/electionleaflets/commit/405ffcc49cd41587fc7c30312a8de287662aa1ce
Jack Zhao - 2010-07-25 23:12:16
majority of visual design changes now completed.
please create new tickets for new changes/fixes.