8 ms·

CSS today is so good that I now design websites in CSS and just present a website to the client. If you use grids and flex you can rearrange content very quick

by thdrdt 7y ago

CSS today is so good that I now design websites in CSS and just present a website to the client. If you use grids and flex you can rearrange content very quick if the customer wants to move it. My workflow is now much faster. Great for the client, great for me. The only design tool I use in the beginning is a pen and peace of paper to get some ideas of where I want to go. But after that it's all HTML + CSS.

simion314 7y ago
>CSS today is so good that I now design websites in CSS There are so many things missing that people are forced to use Javascript and a div-mess to implement widgets. Ex elements like dropdowns, numeric input, the small scrollbar that appears for elements, I am wondering if browser makes are just ignoring css and focusing on JS.(I admit flexbox and grid layout is cool)
- tyingq 7y ago
  Agreed. There remains many moments where I'm questioning why I have to use JavaScript. A css concept exists to accomplish what I'm doing, but it's incomplete. It is also often blind to stuff where css could be useful like basic-auth.
- thdrdt 7y ago
  The moment people start building their own numeric input they create all kinds of problems on different devices. I think people should just accept the browser default. And dropdowns can easily be created CSS only. To me the use of JS to get the design right always smells like bad practice.
  - simion314 7y ago
    I know, it is not the developers at fault , we the devs pushed against this, we tried to get the native input to look as much as possible as the design but it was not accepted, we had no choice but to use JS and get teh pixel perfect design.
    - jonpurdy 7y ago
      I’ve been in Product Management positions and always advocate for native controls over custom. Too many times I’ve seen custom stuff take way longer to build and make work responsively. Native might not be pixel-perfect to a design but that’s okay; design is how it works, not how it looks.
    - matheusmoreira 7y ago
      > we had no choice but to use JS and get teh pixel perfect design There was another choice: sacrifice the pixel perfect design and accept the native inputs.
      - simion314 7y ago
        By "we" I mean the developers, we can explain the upsides and downsides of the solutions but we don't decide the look and feel.
- saadalem 7y ago
  You can make smooth scrolling, dropdown etc.. With just CSS
  - simion314 7y ago
    What I mean for dropdowns is to get css properties to style the "select" element and not have to use div inside divs. For scrollbars I do not remember now the issue we had to use JS, I think on some browser you could not get the exact colors/look the designers wanted. Edit: as an example in other GUI frameworks you are also limited but you can extend the widget with a custom render function and you can paint the widget as you want, you get the look you want but you keep the native widget behavior like the correct events and keyboard handling where with the nested DIVs you get most of the time missing or broken functionality, even Google could not properly implement the Search and dropdown in YouTube, it gets stuck open sometimes and you have to reload the page.
    - zzo38computer 7y ago
      What is needed is better way for the user (rather than the document author) to customize it. For example, I may want to disable smooth scrolling, or make other adjustments.
- vbezhenar 7y ago
  Why do you want to style dropdowns or scrollbars? Using those "designer" dropdowns is a pain on mobile, while simple dropdowns just use native controls and work flawlessly. Same about scrollbars, I hate websites that interfere with my scrolling.
  - simion314 7y ago
    Is not me, the designers want it, we need to ask them why? But in my case it was a complex application that is not intended to be used from a phone.
    - acdha 7y ago
      > Is not me, the designers want it, we need to ask them why? Yes: JS widgets have a usability impact and especially accessibility, which is a legal requirement in much of the world. Some libraries have good accessibility stories but given that this is an ongoing cost which will need to be supported it’s always important to link it to an actual requirement (e.g. searchable drop downs) to justify the expense.
      - zzo38computer 7y ago
        There is ARIA, but ARIA isn't quite good enough. I also suggested a <widget> element, which allows you to define your own widgets and provide an implementation in HTML and JavaScript to be used if the browser cannot use it directly (if the widget is implemented directly (subject to user configuration), then the stuff inside the <widget> block is ignored or used in an implementation-defined way; if the widget is not implemented, then the <widget> is treated the same as a <span>, and any <script>, <noscript>, etc it contains is interpreted normally). (For selections from lists, there is already <input> anyways, and the browser can include whatever special features they want; they may be disabled in application mode if needed.)
        acdha 7y ago
        ARIA is always improving but really the problem is that most developers either don’t use it or don’t test their usage. This is not a problem of needing new technology as much as companies skimping until they get sued.
pier25 7y ago
Same. I find it faster to make a couple of quick rough mockups on Illustrator or even paper and then do the final design in HTML. 15-20 years ago we used to make the final design of every page in Photoshop or Freehand and show that to the client. Now I just make the front page in HTML so that we can agree on the look&feel. Another benefit of working directly on HTML is that you can start proofing some of your design decisions. Many problems are still not obvious in Illustrator/Sketch/whatever. Specially for the client. In my current project I envisioned a featured to open a form on a modal but when I started doing it looked nice but it just felt wrong. The form worked a lot better in a tooltip-like element.
endemic 7y ago
The thing that baffles me is that even in the present day, (some) graphic designers are still trying to create web sites using a different medium than the end product. Sure, back in 2005 that was the norm, but it’s like nothing has changed for these folks. The platform has evolved so dramatically, but the “Photoshop workflow” stays the same.
- sireat 7y ago
  CSS is horrible for quick mockup iteration. While Grid(I love named areas!) and Flexbox have improved layout, the initial layout process is still rougher than it should be. Pretty much every other design/layout/ui creation tool has all kind of helpers which pure CSS lacks. I am talking about basic guidelines, rulers etc that every tool/layout under the sun (QT, WPF, WinForms, Photoshop, Illustrator even Powerpoint, you name it the basic alignment rearrangement functions are a mouseclick away. Sure the created document might be a huge mess, but that is not the point when you are messing around. If you start messing around with CSS you enter a world of pain unless you know the properties down cold. Client asks how would that picture look here and that menu shrunk a bit down here? With CSS it would take much longer to iterate than with any other tool. With something like WPF I do not need to know XAML by heart to quickly create some reasonable working mockups for a .net application. This explains why it is much easier to do creative mockups in another tool (I see designers who use Adobe XD quite a bit now). When one is in the creative stage CSS is a huge hindrance.
  - HelloNurse 7y ago
    It depends on what a "mockup" is. In sane web development, done by a web designer with HTML and CSS (not by a graphic designer with Photoshop), a mockup is a web page with mock content and incomplete stylesheets.
- strenholme 7y ago
  I remember the days of “pixel perfect HTML” where clueless clients wanted the resulting web page to look exactly like the Photoshop mockup down to the pixel.
pjmlp 7y ago
For me it still fails short of what I am capable to do with native toolkit layout managers, and grids come from WPF by the way. HTML + CSS to me, even after all these years still feels like programmer art when starting from a piece of paper, while with native coding it just flows, maybe I am tainted by my game/demoscene grassroots.

by thdrdt 7y ago

simion314 7y ago

>CSS today is so good that I now design websites in CSS There are so many things missing that people are forced to use Javascript and a div-mess to implement widgets. Ex elements like dropdowns, numeric input, the small scrollbar that appears for elements, I am wondering if browser makes are just ignoring css and focusing on JS.(I admit flexbox and grid layout is cool)

tyingq 7y ago
Agreed. There remains many moments where I'm questioning why I have to use JavaScript. A css concept exists to accomplish what I'm doing, but it's incomplete. It is also often blind to stuff where css could be useful like basic-auth.
thdrdt 7y ago
The moment people start building their own numeric input they create all kinds of problems on different devices. I think people should just accept the browser default. And dropdowns can easily be created CSS only. To me the use of JS to get the design right always smells like bad practice.
- simion314 7y ago
  I know, it is not the developers at fault , we the devs pushed against this, we tried to get the native input to look as much as possible as the design but it was not accepted, we had no choice but to use JS and get teh pixel perfect design.
  - jonpurdy 7y ago
    I’ve been in Product Management positions and always advocate for native controls over custom. Too many times I’ve seen custom stuff take way longer to build and make work responsively. Native might not be pixel-perfect to a design but that’s okay; design is how it works, not how it looks.
  - matheusmoreira 7y ago
    > we had no choice but to use JS and get teh pixel perfect design There was another choice: sacrifice the pixel perfect design and accept the native inputs.
    - simion314 7y ago
      By "we" I mean the developers, we can explain the upsides and downsides of the solutions but we don't decide the look and feel.
saadalem 7y ago
You can make smooth scrolling, dropdown etc.. With just CSS
- simion314 7y ago
  What I mean for dropdowns is to get css properties to style the "select" element and not have to use div inside divs. For scrollbars I do not remember now the issue we had to use JS, I think on some browser you could not get the exact colors/look the designers wanted. Edit: as an example in other GUI frameworks you are also limited but you can extend the widget with a custom render function and you can paint the widget as you want, you get the look you want but you keep the native widget behavior like the correct events and keyboard handling where with the nested DIVs you get most of the time missing or broken functionality, even Google could not properly implement the Search and dropdown in YouTube, it gets stuck open sometimes and you have to reload the page.
  - zzo38computer 7y ago
    What is needed is better way for the user (rather than the document author) to customize it. For example, I may want to disable smooth scrolling, or make other adjustments.
vbezhenar 7y ago
Why do you want to style dropdowns or scrollbars? Using those "designer" dropdowns is a pain on mobile, while simple dropdowns just use native controls and work flawlessly. Same about scrollbars, I hate websites that interfere with my scrolling.
- simion314 7y ago
  Is not me, the designers want it, we need to ask them why? But in my case it was a complex application that is not intended to be used from a phone.
  - acdha 7y ago
    > Is not me, the designers want it, we need to ask them why? Yes: JS widgets have a usability impact and especially accessibility, which is a legal requirement in much of the world. Some libraries have good accessibility stories but given that this is an ongoing cost which will need to be supported it’s always important to link it to an actual requirement (e.g. searchable drop downs) to justify the expense.
    - zzo38computer 7y ago
      There is ARIA, but ARIA isn't quite good enough. I also suggested a <widget> element, which allows you to define your own widgets and provide an implementation in HTML and JavaScript to be used if the browser cannot use it directly (if the widget is implemented directly (subject to user configuration), then the stuff inside the <widget> block is ignored or used in an implementation-defined way; if the widget is not implemented, then the <widget> is treated the same as a <span>, and any <script>, <noscript>, etc it contains is interpreted normally). (For selections from lists, there is already <input> anyways, and the browser can include whatever special features they want; they may be disabled in application mode if needed.)
      - acdha 7y ago
        ARIA is always improving but really the problem is that most developers either don’t use it or don’t test their usage. This is not a problem of needing new technology as much as companies skimping until they get sued.

pier25 7y ago

Same. I find it faster to make a couple of quick rough mockups on Illustrator or even paper and then do the final design in HTML. 15-20 years ago we used to make the final design of every page in Photoshop or Freehand and show that to the client. Now I just make the front page in HTML so that we can agree on the look&feel. Another benefit of working directly on HTML is that you can start proofing some of your design decisions. Many problems are still not obvious in Illustrator/Sketch/whatever. Specially for the client. In my current project I envisioned a featured to open a form on a modal but when I started doing it looked nice but it just felt wrong. The form worked a lot better in a tooltip-like element.

endemic 7y ago

The thing that baffles me is that even in the present day, (some) graphic designers are still trying to create web sites using a different medium than the end product. Sure, back in 2005 that was the norm, but it’s like nothing has changed for these folks. The platform has evolved so dramatically, but the “Photoshop workflow” stays the same.

sireat 7y ago
CSS is horrible for quick mockup iteration. While Grid(I love named areas!) and Flexbox have improved layout, the initial layout process is still rougher than it should be. Pretty much every other design/layout/ui creation tool has all kind of helpers which pure CSS lacks. I am talking about basic guidelines, rulers etc that every tool/layout under the sun (QT, WPF, WinForms, Photoshop, Illustrator even Powerpoint, you name it the basic alignment rearrangement functions are a mouseclick away. Sure the created document might be a huge mess, but that is not the point when you are messing around. If you start messing around with CSS you enter a world of pain unless you know the properties down cold. Client asks how would that picture look here and that menu shrunk a bit down here? With CSS it would take much longer to iterate than with any other tool. With something like WPF I do not need to know XAML by heart to quickly create some reasonable working mockups for a .net application. This explains why it is much easier to do creative mockups in another tool (I see designers who use Adobe XD quite a bit now). When one is in the creative stage CSS is a huge hindrance.
- HelloNurse 7y ago
  It depends on what a "mockup" is. In sane web development, done by a web designer with HTML and CSS (not by a graphic designer with Photoshop), a mockup is a web page with mock content and incomplete stylesheets.
strenholme 7y ago
I remember the days of “pixel perfect HTML” where clueless clients wanted the resulting web page to look exactly like the Photoshop mockup down to the pixel.

pjmlp 7y ago

For me it still fails short of what I am capable to do with native toolkit layout managers, and grids come from WPF by the way. HTML + CSS to me, even after all these years still feels like programmer art when starting from a piece of paper, while with native coding it just flows, maybe I am tainted by my game/demoscene grassroots.