New designs for TPFC by tproli

[Checker]

Looks nice, but I would remove the star at the "New" tag.
New users could be confused, because there are stars below the icon, too.

[lautrepay]

Thanks for your work, tproli!
It's getting better and better.
Respect to the permalink, it is necessary because it is the ID of each program. When you need to link to an app entry you have to use the permalink.
Since it's not a very used information perhaps you can place it at the bottom...
And I think that the entries should lost the "New" label when they leave the group of the first 500.

[tproli]

Ok, I will leave permalink as is.

Here is the latest:
http://rolandtoth.hu/pic/pfc-facelift/p ... ft-04a.png

- page title and the top pagination links rearranged: more white space at top
- gray sidebar background: more lighter
- new footer
- new member points icon
- "suggested by..." went back to second row

I think I'm happy with the results and I don't plan bigger modifications, unless you point out something terrible

I will re-create the logo, it will be better than before

[Andrew Lee]

@tproli: You are awesome! We are witnessing first hand the stark difference between a programmer and a designer.

I am quite happy with the current design:

http://rolandtoth.hu/pic/pfc-facelift/p ... ft-04a.png

but then I am aesthetically quite blind. Not my words, my wife's.

Once you are happy with a first cut, please email me the necessary files and I will try to integrate them and push them out into the test region, which I will open up for you guys to play around with. Nothing like a live site to provoke even more comments!

[Andrew Lee]

@tproli: A question popped into my mind? I was wondering how easy it is to maintain/update the design if you are busy/not available for some reason?

To break it down:

1) Was any tool(s) involved in designing the layout?

2) What kind of skillset is required for someone to modify/update/extend the layout?

Thanks.

[freakazoid]

Mockups are one thing, but cutting up the design and changing the existing HTML markup and coding brand-new CSS will take the most time.

Depends on your comfortable level with HTML / CSS; I'm guessing tproli has the skills to do this!

A couple of things to also consider:
* Is this a fixed-width layout or a variable-width layout? (current version of the site is variable)
* Is it going to be responsive layout? (eg. work with mobile devices)

The "entries per page" dropdown will probably need to use javascript, since you can't design a dropdown menu like that without manipulating it.

[tproli]

@tproli: You are awesome! We are witnessing first hand the stark difference between a programmer and a designer.

Thanks. In fact the existing layout is quite functional and well thought so there was no need to reinvent the wheel. There are some new features but basically it was only skinning.

1) Was any tool(s) involved in designing the layout?

- Adobe Fireworks. Its filetype is png but I can convert it to psd which is more universal. I guess it is not hard to convert it to GIMP's file format.
- "Open Sans" is the font used: http://www.fontsquirrel.com/fonts/open-sans

2) What kind of skillset is required for someone to modify/update/extend the layout?

- for the graphical part, Adobe Fireworks or Photoshop (or GIMP).
- sitebuild: html, css, javascript (+ jquery), and a text editor. Basic modifications/update would be easy. Bigger changes would need deeper technical skills but I guess there are other members here who could help.

* Is this a fixed-width layout or a variable-width layout? (current version of the site is variable)
* Is it going to be responsive layout? (eg. work with mobile devices)

Quoting myself from page 3:
I plan it to be flexible/responsive. So it would stretch to full width but on lower resolutions some items will be hidden. For example below 600 px (screen width) the sidebar would be hidden.

I think we should wait some days, maybe there will be some modifications requests.

[the_watcher]

waiting for the new logo
nice work so far , tproli

[Midas]

A couple of observations:

• Experience advises that most of the layout options should reside in a (heavily commented) external style-sheet (CSS).
• PSD might have more currency among web designers, but PNG is now a standard and universal graphic file format.
• Permalink is techy but is also a general accepted moniker for any page ID.
  (see http://en.wikipedia.org/wiki/Permalink or http://www.bloggingbasics101.com/2008/1 ... permalink/)

[I am Baas]

@tproli

Excellent work. Thank you for doing this.

Is pfc-facelift-04a.png the latest?

[tproli]

Is pfc-facelift-04a.png the latest?

Yes, it is. There may be some color tweaks to make it more contrasty.

Here is the updated logo:

It is not 100% the same but close enough I think. But if there is a bigger version of the current that would help.

Sneak preview of the sidebar:

[tproli]

What do you think about these?

1. Using the Open Sans webfont from Google fonts to spare bandwidth? That's about 60-260 KB savings per visitor (depending on the browser; on first visit, when the font is not cached). If somehow Google webfont is not available, texts will be still available with the fallback font.

2. Linking jQuery from cdn? This would also save about 50-100 KB bandwidth. Optionally jQuery could be removed, but this would make creating javascript stuff more simple and more cross-browser compatible. Currently the Screenshot feature and some show/hide info needs javascript but that could change in the future. So I vote for having jQuery, whether self hosting or via cdn.

3. Currently application icon and screenshot accepts uploading of gif files only. If quality is important, I would recommend using png (for screenshots and icons), and if lower filesize, then jpg (for screenshots). Gif support for screenshots should also be kept to be able to use animated gifs.

4. "10 entries per page" stuff could be modified to "10 20 50 100 entries per page" or similar to avoid javascript dependency.

I've made some progress with the sitebuild. Currently it looks almost complete but javascript stuff are still missing + making it responsive also needs some work. Additionally there are the other (sub)pages too.

[freakazoid]

2. Linking jQuery from cdn? This would also save about 50-100 KB bandwidth. Optionally jQuery could be removed, but this would make creating javascript stuff more simple and more cross-browser compatible. Currently the Screenshot feature and some show/hide info needs javascript but that could change in the future. So I vote for having jQuery, whether self hosting or via cdn.

You might want to use Zepto instead. It's a lightweight version of jQuery. Cons are it doesn't support IE at all. Do we care for IE? If you choose Zepto, you might want to fallback to jQuery for IE users (scroll down to the Internet Explorer block).

3. Currently application icon and screenshot accepts uploading of gif files only. If quality is important, I would recommend using png (for screenshots and icons), and if lower filesize, then jpg (for screenshots). Gif support for screenshots should also be kept to be able to use animated gifs.

I want to use PNG as well, but I've had to convert PNG / JPG to GIF to abide by TPFC's choice of GIF. Andrew, want to chime in here?

Looking forward to test your design, tproli!

[tproli]

Thanks for mentioning Zepto, it is new to me. Good stuff!

The fallback to jQuery in case of IEs is acceptable I think.

Here is the peview of the new "Entry per page", I like it:

[lautrepay]

3. Currently application icon and screenshot accepts uploading of gif files only. If quality is important, I would recommend using png (for screenshots and icons), and if lower filesize, then jpg (for screenshots). Gif support for screenshots should also be kept to be able to use animated gifs.

How much support has the apng format among the most popular browsers nowadays?