UI/UX of the new Website json-ld.org

[ivikash]

Hello Community Members,

Recently I have been in constant communication with Manu and Greg over the new website for JSON-LD. This task is also enlisted in my GSoC proposal for JSON-LD in GSoC 2013 under W3C.

I am sharing the live links of the implementations and if things take a concrete shape I will soon file a pull-request

Landing Page: http://dl.dropboxusercontent.com/u/5278881/GSoC/json-ld/index2.html http://dl.dropboxusercontent.com/u/5278881/GSoC/json-ld/index3.html

The main difference in the above two links is the slider so please see to that if the slider is necessary or not :)

/Playground: https://dl.dropboxusercontent.com/u/5278881/GSoC/json-ld/playground/index2.html

Note: I have used a free theme simplex from boostwatch to ease some of my tasks specially considering the fonts :)

Regards ~Vikash

[gkellogg]

+1, it looks good to me!

[ivikash]

I also thought to incorporate Timeline.js (http://timeline.verite.co/) in the project but so far I couldnt find the correct place in the landing page. So once we decide concretely we can also have a new ./timeline.html and set it up for the project

Regards ~Vikash

[lanthaler]

Hi Vikash,

Great work. This is definitely going in the right direction. A few nitpicks and comments:

• Could you please adjust the beakpoint used to collapse the navigation at the top. Currently it is at around 970px. You could reduce that to 560px or so.
• I find Josefin Sans very hard to read at small sizes (like in the navigation at the top). Could you try a couple of other fonts?
• The most important thing on json-ld.org are the specs, the playground, and the implementations. It's very difficult to find them in your layout. What about replacing the GitHub social icons with buttons to the specs and playground? We are not a hosting source code for an application so we are not looking for PR or stars.
• I don't like sliders that much but would like to have a simple example showing JSON-LD in action nevertheless. Can we include that directly in the hero unit?

The other thing I would to see a bit more highlighted are Publications/Articles/Presentations. A lot of people prefer to click through a presentation instead of reading the spec at the beginning. Maybe presenting them on top of the 6 blocks under the hero unit wouldn't look too bad.

The playground is completely broken in IE10, could you please verify that.

Other than that, awesome work! I like the clear structure and the clean design. Definitely meets my taste :-)

[lanthaler]

What would you like to present in the timeline?

[ivikash]

Hi Markus

Thanks for your constructive remarks!

I will take it one by one :)

1. I can certainly do that, it will be simple edit @media-selector tag and not a fuss at all. But IMHO that wont a good option. As its based on twitter Bootstrap and using its default grid layout and responsiveness is good, I think keeping it in default will have have a promising effect in future if the website has to be changed or refactored to work upon it :).
2. I can certainly try more, but when I was using it on my phone fortunately I liked it more than others. I found it crisp :). If you say I can still work with other fonts. I am enclosing a few screenshots from the phone :)
   • https://dl-web.dropbox.com/get/Public/GSoC/json-ld/Screenshot_2013-04-28-22-07-27.png?w=AADDE1RAuexVF3Vc5RqHoCz6UxtqTeqeQknpEVBYLn4njA
   • https://dl-web.dropbox.com/get/Public/GSoC/json-ld/Screenshot_2013-04-28-22-07-31.png?w=AAArkI-6NptqiirHrDo3pMidWbT-d0JWoPn8tvybOzmlCQ
   • https://dl-web.dropbox.com/get/Public/GSoC/json-ld/Screenshot_2013-04-28-22-07-52.png?w=AAAsBfB40nW6fE1Cy6ea9oiTgSCVKTh6-nSoDgkodfEM7A
   • https://dl-web.dropbox.com/get/Public/GSoC/json-ld/Screenshot_2013-04-28-22-07-56.png?w=AACWyRHwJhwiduopwMfepUpHA--nnkqu7z2uMcsEbGohXQ
3. You may be right on this, but its majorly because hyperlinks are not set yet. Due to development most href's are # and in production I am sure they would be easy to navigate.
4. I agree to you on this, If suggested I can surely try making a new page. But keeping it in hero-unit would bit weird as the hero-unit will become huge!
5. I intend to make a documentation page and I think 'Publications/Articles/Presentations' should go there. Also I have applied Google Analytics so once the site is up, we can find whats being clicked the most :) and iterate to a better one. [ I wish someone could do the SEO for the website :)]
6. Apologies, haven't and cant test on IE.
7. In my view, the time line would have the birth, growth , progress and current state of JSON-LD and what it has undergone. Moreover this would also be good reference to link the W3C, Publications/Articles/Presentations etc.

Thanks, for appreciating my small steps :)

Regards ~Vikash

[dlongley]

@ivikash To test on IE, Microsoft has recently made this much easier: http://www.modern.ie/en-us

Here's the more-direct link for getting the free VMs: http://www.modern.ie/en-us/virtualization-tools#downloads

I've used these with virtualbox on Ubuntu -- they're great.

[ivikash]

@dlongley :+1: Thanks :) I will test things on the VM :)

[niklasl]

I second this recommendation, and also recommend to use this quite popular script: https://github.com/xdissent/ievms

It downloads these images from MS and sets up VirtualBox from them. (Before the modern.ie project (which is very helpful!), this script was necessary to save a lot of hassle setting things up. Though it looks much easier to do this manually now, by using the ievms script to to the work, the setup becomes virtually automatic.)

Cheers, Niklas

On Tue, Apr 30, 2013 at 7:08 PM, vikash notifications@github.com wrote:

@dlongley https://github.com/dlongley [image: :+1:] Thanks :) I will test things on the VM :)

— Reply to this email directly or view it on GitHubhttps://github.com/json-ld/json-ld.org/issues/242#issuecomment-17240405 .

[ivikash]

Thanks for your help!

But it seems it will a hell lot of download :'( So is the websites have to be tested on all the IE's are we can limit it to IE10 .

It says around 37GB has to be downloaded!

Regards ~Vikash

[ivikash]

New Additions:-

• Link to Specification in header
• Link to Images in Header
• Learn Page
• Images Page.
• Spec
• Requirements
• Primer

Working:-

• index.html
• playground/index.html
• learn.html
• images/index.html
• spec/index.php
• requirements/index.php
• primer/index.php

/ns/json-ld.html -> No modifications are done here as of now.

Tools :- This is the next work now, where the JSON to JSON-LD creator will come. [Work In Progress, So still linked as #]

Developer :- It will have the LinkedIN tool [Work In Progress, So still linked as #]

[ivikash]

hi Everyone,

I have resolved the issues with extra-tabs in page. In the future there will be a developers page, so for now its hidden. Link to Images has been removed as of now because of issues with landing page.

I really want to seek some help with the landing page. It was notified over that there is a need for revamping of index page. Unfortunately this week I tried a lot of combinations and somehow to me it seems that in a way these are the basic informations needed but still its very true I am not myself satisfied with the landing page as of now and I am sure it has to be improvised. The current one -> http://dl.dropboxusercontent.com/u/5278881/GSoC/json-ld/index.html Please guide me here for some modifications. Infact I still prefer the previous one!

Regards ~Vikash

[lanthaler]

I haven’t had time to look at the site in detail but I noticed that the navbar is inconsistent. On the homepage the last point is “Branding” but if you click on it turns into “Images”. Similarly, “Documentation” and “Specifications” swap positions on some pages and the “Specifications” drop-down has different contents. Was the change from “Playground” to “Play” intended?

[ivikash]

Hey,

Lanthalar, Yes, I have observed that and in the next PR I plan to cater everything :+1:

[lanthaler]

Great. Please also check the playground. It’s broken as well