I took my time and learned a little more about html5 and CSS3 web design and also after reading some comments on reddit for example, I have made yet another UI design for the PirateBox.
- A cleaner structure than before using html5 and CSS3 design elements
- 4 pages only: Home, Download, Forum and Mobile, where chat is included on the main page
- Compatible with Firefox, Chrome, Internet Exlorer plus I have an old Blackberry phone, even on that the layout remained the same and it was displayed just like in my browser
- Mobile version is available from the menu, however as I said, even my old BlackBerry phone could display the standard site properly. (I could not get my script to work, I will keep on working on that)
- Dark colour theme (as most people wanted)
- I have implemented the upload feature in the main page, so no more pop-up (drawback: if someone refreshes the page manually, the upload is interrupted...)
- Download/Browse opens up in a new browser tab, this does not interrupt the upload or trigger the main page to re-load
- Site scales with your screen, so it won't case any issues with smaller screens
- I will publish a slightly different version soon of the same design, which is almost identical, but the chat window is on a different page (more tabs on the top), upload comes still as a pop-up and loads in the background, uninterrupted and some more functions. I am even experimenting with some short html5 video clips on the main page.
Now initially I wanted to make some screenshots again, but I though it would be nice to put together a short video instead. I have recorded this on my Windows7 machine, because it has a wider screen and it will show and illustrate the features of the site much better than my Ubuntu machine's samaller screen.
Again feel free to modify anything on the design, basically any text can be re-written in the html documents (or the logo replaced with your favourite image) as the layout is done by the CSS file. If you don't need the mobile or forum menu elements (if you don't have a forum) simply delete those elements from the nav bar.
Any feedback is more than welcome and I am happy to take some tips of what kind of design YOU want for a PirateBox.