On Sunday, 18 January 2015 at 16:23:35 UTC, Andrei Alexandrescu wrote:
> On 1/18/15 2:36 AM, ponce wrote:
>> On Sunday, 18 January 2015 at 10:27:43 UTC, aldanor wrote:
>>> On Sunday, 18 January 2015 at 10:16:15 UTC, Jacob Carlborg wrote:
>>>> On 2015-01-18 03:18, Andrei Alexandrescu wrote:
>>>>> I took the better part of today working on this:
>>>>> https://github.com/D-Programming-Language/dlang.org/pull/780. See demo
>>>>> at http://erdani.com/d/.
>>>>>
>>>>> What do you all think? Is it an improvement over what we have now?
>>>>
>>>> It looks absolutely horrible. It was way, way better before
>>>
>>> On iPhone 6: D, Rust, Python, Ruby websites (Ruby being particularly
>>> gorgeous and D looking particularly ancient and out of place):
>>>
>>> http://imgur.com/7Vb2ynM
>>> http://imgur.com/SGKUd2q
>>> http://imgur.com/bXk1lf9
>>> http://imgur.com/njSgbzW
>>
>> Looks like tweets occupy valuable screen estate on this device.
>
> Can we ditch the twitter div on mobile? (Pull request would be nice, thanks.) -- Andrei

This is usually solved by media queries / responsive design / grid frameworks, sorry if I'm stating the obvious :) Try resizing the commonly used websites and see what happens, e.g. for ruby-lang you have at least 3 "versions" which are selected automatically based on the current viewport's settings which the browser provides: http://imgur.com/a/gE38d

E.g. the menus on the left getting folded into one mobile "button" which expands them on demand and leaves more space for the actual content, or some elements disappearing in smaller viewports altogether (like the twitter feed div). This is quite a pain to manage manually without having an underlying grid framework.

On 1/18/15 9:02 AM, aldanor wrote:
> This is usually solved by media queries / responsive design / grid
> frameworks, sorry if I'm stating the obvious :) Try resizing the
> commonly used websites and see what happens, e.g. for ruby-lang you have
> at least 3 "versions" which are selected automatically based on the
> current viewport's settings which the browser provides:
> http://imgur.com/a/gE38d
>
> E.g. the menus on the left getting folded into one mobile "button" which
> expands them on demand and leaves more space for the actual content, or
> some elements disappearing in smaller viewports altogether (like the
> twitter feed div). This is quite a pain to manage manually without
> having an underlying grid framework.

My understanding is there are various simpler way to do this, e.g. separate styles for small screen devices, redirection to a different URL, setting "hidden" to certain DIVs dynamically etc. etc. As you saying there's no way to do this unless we use some grid framework I know nothing about and probably need to learn? -- Andrei

On Sunday, 18 January 2015 at 17:05:28 UTC, Andrei Alexandrescu wrote:
> On 1/18/15 9:02 AM, aldanor wrote:
>> This is usually solved by media queries / responsive design / grid
>> frameworks, sorry if I'm stating the obvious :) Try resizing the
>> commonly used websites and see what happens, e.g. for ruby-lang you have
>> at least 3 "versions" which are selected automatically based on the
>> current viewport's settings which the browser provides:
>> http://imgur.com/a/gE38d
>>
>> E.g. the menus on the left getting folded into one mobile "button" which
>> expands them on demand and leaves more space for the actual content, or
>> some elements disappearing in smaller viewports altogether (like the
>> twitter feed div). This is quite a pain to manage manually without
>> having an underlying grid framework.
>
> My understanding is there are various simpler way to do this, e.g. separate styles for small screen devices, redirection to a different URL, setting "hidden" to certain DIVs dynamically etc. etc. As you saying there's no way to do this unless we use some grid framework I know nothing about and probably need to learn? -- Andrei

The thing with frameworks is that some designers have put a considerable amount of time on putting them together, making them cross-browser compatible, working around various edge cases etc (and there are many...) -- so that you won't have to. Once you want something like responsiveness + automatic reflows, things start getting even more complicated... Not all frameworks are gigantic like bootstrap/foundation, there's some smaller ones that just do the grid thing (like 960). (that, or you can always pull just the bits you want from bootstrap or anything and minify it). Another point is that if you use the elements the framework provides (e.g. navbar menu), they would be already nicely compatible with the framework's grid system. As an example -- try resizing the width here and see what happens: http://getbootstrap.com/examples/grid/.

There's also some minimalistic frameworks -- like PureCSS, just to give an example -- http://purecss.io and https://github.com/yahoo/pure, where the entire grid system is just 0.8KB.

On Sunday, 18 January 2015 at 17:05:28 UTC, Andrei Alexandrescu wrote:
> On 1/18/15 9:02 AM, aldanor wrote:
>> This is usually solved by media queries / responsive design / grid
>> frameworks, sorry if I'm stating the obvious :) Try resizing the
>> commonly used websites and see what happens, e.g. for ruby-lang you have
>> at least 3 "versions" which are selected automatically based on the
>> current viewport's settings which the browser provides:
>> http://imgur.com/a/gE38d
>>
>> E.g. the menus on the left getting folded into one mobile "button" which
>> expands them on demand and leaves more space for the actual content, or
>> some elements disappearing in smaller viewports altogether (like the
>> twitter feed div). This is quite a pain to manage manually without
>> having an underlying grid framework.
>
> My understanding is there are various simpler way to do this, e.g. separate styles for small screen devices, redirection to a different URL, setting "hidden" to certain DIVs dynamically etc. etc. As you saying there's no way to do this unless we use some grid framework I know nothing about and probably need to learn? -- Andrei

And yet another thing you gain with (most) frameworks is having access to the original SASS/LESS. This essentially provides you with features like inheritance, mixins and default values for CSS which reduces the boilerplate and makes the whole thing much more manageable.

On Sunday, 18 January 2015 at 17:05:28 UTC, Andrei Alexandrescu wrote:
> On 1/18/15 9:02 AM, aldanor wrote:
>> This is usually solved by media queries / responsive design / grid
>> frameworks, sorry if I'm stating the obvious :) Try resizing the
>> commonly used websites and see what happens, e.g. for ruby-lang you have
>> at least 3 "versions" which are selected automatically based on the
>> current viewport's settings which the browser provides:
>> http://imgur.com/a/gE38d
>>
>> E.g. the menus on the left getting folded into one mobile "button" which
>> expands them on demand and leaves more space for the actual content, or
>> some elements disappearing in smaller viewports altogether (like the
>> twitter feed div). This is quite a pain to manage manually without
>> having an underlying grid framework.
>
> My understanding is there are various simpler way to do this, e.g. separate styles for small screen devices, redirection to a different URL, setting "hidden" to certain DIVs dynamically etc. etc. As you saying there's no way to do this unless we use some grid framework I know nothing about and probably need to learn? -- Andrei

when not using a css framework like this, then the app for the mobile will consist of css and javascript hacks. and mostly one would lack the designers' and frontend developers' experience :)

if i may, i'll go and straightly ask a very great designer friend of mine to help us out. he'll either design a new interface for us or help us make this one better. let me know your call.

On Sunday, 18 January 2015 at 07:42:05 UTC, DaveG wrote:
> On Sunday, 18 January 2015 at 04:44:56 UTC, Israel wrote:
>> On Sunday, 18 January 2015 at 02:18:16 UTC, Andrei Alexandrescu wrote:
>>> I took the better part of today working on this: https://github.com/D-Programming-Language/dlang.org/pull/780. See demo at http://erdani.com/d/.
>>>
>>> What do you all think? Is it an improvement over what we have now?
>>>
>>> I'd appreciate your help with reviewing and pulling this, and also with improving the colors (which I'm terrible at) and page tracking as mentioned in the pull request.
>>>
>
> I'm no designer, but I do have some comments. Without consistency it just looks a bunch of parts rather than a singular thing. Some elements have gradients, some don't. Some elements have round corners, some don't. Elements with borders use different widths, some have none. In regards to borders, we engineering types (maybe it's just me) tend to put boxes around stuff to represent discrete units when basic design concepts, like proximity and contrast, may be better suited for the task. I just took a quick pass at it in the browser:
> Original: https://dl.dropboxusercontent.com/u/114394/D-site/current.png
> Cleanup: https://dl.dropboxusercontent.com/u/114394/D-site/001.png
> Cleanup w/o bg: https://dl.dropboxusercontent.com/u/114394/D-site/002.png
>
> Think "consistency and subtlety". Good design generally goes unnoticed.
>
>>
>> Too much code, I know its what you want people to see but if the entire length of the website consists of giant blocks of code it just doesnt look as pleasing to the eyes...
>>
>> put all of that code and introduction to D into a subpage called "About"/"Intro to D". have it be the first subpage on the left column.
>>
>> The front page should be updated with new content like your tweets, forum posts, articles from other websites,reddit, etc.
>>
>> maybe under the documentation put a "Getting started" Tutorial?
>
> I agree, from a new user perspective all the code might seem like a bit much. It might be a good to have short blurb about "Why D?" or "What is D?" or something. I also like the idea of highlighting some key projects, particularly ones with broad appeal (dub and VisualD come to mind). I would recommend keeping things like blog posts, tweets, etc. out of the the main content (on the side or bottom is fine). External sources usually make no sense to a new user, or are generic press pieces which are unnecessary because the person is already on the site.
>
> -Dave

This is very true. As a newcomer you've probably already found out about D through another website, friend, etc. Which proves your point 'unnecessary because the person is already on the site.'. however I'm thinking about people like is who are already here. We need to see how D is impacting the rest of the world so turning the front page to something like a blog would make traffic flow like crazy and grab more attention. Which is what D needs the most right now.

If you just have a static page frozen the same way for 7 years. You kind of start to see why people think "D is dead".

> On 1/18/15 5:41 AM, Kiith-Sa wrote:
>> Also, note that the collapsible menu can be done in pure CSS, no JS
>> needed, which would allow it to work consistently even with NoScript.
It is possible with CSS only (I think), but fancy features like animations require CSS3 transitions which has inconsistent support. Do we have a set of "supported" browsers? In this case we shouldn't have any problem degrading gracefully anyway, but it's good to know.

> On 1/18/15 9:02 AM, aldanor wrote:
>> This is usually solved by media queries / responsive design / grid
>> frameworks, sorry if I'm stating the obvious :)
>
> My understanding is there are various simpler way to do this, e.g. separate styles for small screen devices, redirection to a different URL, setting "hidden" to certain DIVs dynamically etc. etc. As you saying there's no way to do this unless we use some grid framework...
We don't need to use a framework, although it might be a good idea if someone has experience with one they think is appropriate. I'll try to get to the menus and making primary layout responsive at some point today.

-Dave

Half year ago there was attempted to rewrite site to vibed. I even see demo sites with fresh design. What happened thous projected was abandoned?

On 2015-01-18 06:14, weaselcat wrote:

> Looked at it in a webkit browser and you're right, I take back my first
> comment Andrei.
> But it does seem messed up on Firefox.
> https://i.imgur.com/FVb2Q6y.png

Looks like the colors are inverted.

-- 
/Jacob Carlborg

"Mengu" <mengukagan@gmail.com> wrote:
> On Sunday, 18 January 2015 at 17:05:28 UTC, Andrei Alexandrescu wrote:
>> On 1/18/15 9:02 AM, aldanor wrote:
>>> This is usually solved by media queries / responsive design / >> grid frameworks, sorry if I'm stating the obvious :) Try resizing >> the commonly used websites and see what happens, e.g. for >> ruby-lang you have at least 3 "versions" which are selected automatically based >> on the current viewport's settings which the browser provides: http://imgur.com/a/gE38d
>>> 
>>> E.g. the menus on the left getting folded into one mobile >> "button" which expands them on demand and leaves more space for the actual >> content, or some elements disappearing in smaller viewports altogether >> (like the twitter feed div). This is quite a pain to manage manually >> without having an underlying grid framework.
>> 
>> My understanding is there are various simpler way to do this, > e.g. separate styles for small screen devices, redirection to a > different URL, setting "hidden" to certain DIVs dynamically > etc. etc. As you saying there's no way to do this unless we use > some grid framework I know nothing about and probably need to > learn? -- Andrei
> 
> when not using a css framework like this, then the app for the mobile will consist of css and javascript hacks. and mostly one would lack the designers' and frontend developers' experience :)
> 
> if i may, i'll go and straightly ask a very great designer friend of mine to help us out. he'll either design a new interface for us or help us make this one better. let me know your call.

Give it a couple more weeks until I migrate more stuff to CSS, then ask what it would take to improve the css. Thanks!