Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION
Using Photoshop for web design if you have access to Illustrator is a sign of someone who doesn't understand web design, sorry.

Photoshop is great for making and tweaking particular assets, but for the overall site design using a pixel-centric tool like Photoshop is dumb and a complete pain for the poor devs who have to turn it into an actual site.

streetlamp posted:

Exactly this, too many designers and devs get caught up on using the latest software, framework, etc while ignoring the fact that many of their problems don't lie in the 'hammer'. These designers are failing as designers in this situation way before they even get into using software.

That's only a valid point if you somehow think that only one problem can ever be fixed. Surely you could get the right hammer AND fix the other issues as well?

Adbot
ADBOT LOVES YOU

The Dave
Sep 9, 2003

The Wizard of Poz posted:

Using Photoshop for web design if you have access to Illustrator is a sign of someone who doesn't understand web design, sorry.

Do you want to throw any actual substance behind these statements? Why because of art boards?

NovemberMike
Dec 28, 2008

The Wizard of Poz posted:

Using Photoshop for web design if you have access to Illustrator is a sign of someone who doesn't understand web design, sorry.

This is a little strong. Someone that understands web design can use Photoshop (theoretically). You could have a master carpenter that really understands wood but is more comfortable pounding nails with the butt end of a screwdriver. All of the designers I've worked with that used Photoshop willingly and as a primary tool were bad, however. They tend to be art majors that used photoshop in college and don't want to learn a better tool.

EDIT: And to be clear, Photoshop is the right tool some of the time. If you're editing images to go up on a site then Photoshop is 100% the tool for the job. I've also seen people use Photoshop as a sketchpad for mockups, which is fine. The issue is that pixel perfect photoshop mockups don't tend to be particularly useful.

EDIT2: To give an example of a better tool, download this thing from google, run it and play around with how you can update styles and it automatically refreshes the page after you save. I know a designer that uses something similar (it's just a gulp task) to develop final designs. It's easy to make something responsive that runs on multiple browsers when you can literally have 3 browsers open with different sizes in different windows (you can have IE, Chrome and Firefox open) . If a client wants to work with him on the look and feel the client can look at the browsers and see how it looks at different resolutions as he goes. This means the designer has to know CSS but the design he puts out can be directly consumed by the developers and it tends to lead to relatively few contradictions between design and production.

NovemberMike fucked around with this message at 04:15 on Jan 12, 2015

putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION
Mostly I see Photoshop as needlessly limiting yourself, and an indication that you don't know enough about what's required of a good web designer to be able to pick the best tool for the job. Illustrator being built around vector art is exactly the kind of focus you need when dealing with responsive layouts where you're going to want to take one layout and easily resize and reposition elements of it in order to produce the layout for the next breakpoint. The pixel-based focus of Photoshop just isn't suitable anymore (there's definitely a time when it was, however, I'm not at all denying that) now that we're dealing with layouts that need to be able to transform based on screen size.

To be clear: I think Photoshop is an incredible piece of software, and it's no reflection on the quality of the software that I consider it unsuitable for web design. I just think any web designer who sits in front of a computer with Illustrator and Photoshop on it and opts to open up Photoshop to design a website is making a Bad Decision™ because they're needlessly making things more difficult for themselves.

The Dave posted:

Do you want to throw any actual substance behind these statements? Why because of art boards?

If you're looking for some kind of evidence then I can't offer it and I won't try - but I've provided some of my reasoning above. Not everyone will agree but that's the way of the world.

revmoo
May 25, 2006

#basta
I used to be at a place that used Illustrator and mockups were basically 1:1 with the end result. The place I'm at now it's a bit more freeform and I'll build a basic mockup in Photoshop--just enough to get the point across and then iterate on the actual site/app.

Both methods are totally valid and good for different things.

fuf
Sep 12, 2004

haha
How big can a home page auto-playing background video be before I start pissing people off? Can I get away with 2.6mb?

5pitf1re
Oct 4, 2014

space ninja in space

fuf posted:

How big can a home page auto-playing background video be before I start pissing people off? Can I get away with 2.6mb?

If you are smart about it you can possibly get away with more. Make sure you never ever force a mobile user to download it though. That also means that you'll have to employ feature detection to figure out what browser is being used and then load the video and inject it after figuring it out.

Personally I hate websites that have a background video and stuff like that, I think Spotify used to do that once on their landing page and it really annoyed me.

-JS-
Jun 1, 2004

5pitf1re posted:

Make sure you never ever force a mobile user to download it though. That also means that you'll have to employ feature detection to figure out what browser is being used and then load the video and inject it after figuring it out.

From what I remember both Android (Chrome & stock browser) & iOS ignore the autoplay attribute on video, so these should just fall back to the poster image and nothing should be downloaded either.

An issue in background playing video is that screen size isn't an indication of connection speed - I could be using my smartphone on wi-fi/4G or my iMac tethered through a 2G connection.

5pitf1re
Oct 4, 2014

space ninja in space

-JS- posted:

From what I remember both Android (Chrome & stock browser) & iOS ignore the autoplay attribute on video, so these should just fall back to the poster image and nothing should be downloaded either.

An issue in background playing video is that screen size isn't an indication of connection speed - I could be using my smartphone on wi-fi/4G or my iMac tethered through a 2G connection.

It's not only about the connection speed but also the device performance. It can get really ugly in terms of performance and you don't want to go there.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

5pitf1re posted:

It's not only about the connection speed but also the device performance. It can get really ugly in terms of performance and you don't want to go there.

It's also not only about device performance. People have data plans, and if viewing your site kills 10M of their cap for the month, they are going to be pissed.

Pollyanna
Mar 5, 2005

Milk's on them.


I have a really simple problem that I am blanking out on. My project currently uses gulp-sass to compile its SCSS files. I want to use an SCSS version of a Bootswatch theme. I downloaded the two files and imported them into my main SCSS file, but it turns out I also need Bootstrap's SCSS version as well. I want to do a thing where I can get something like bootstrap.scss that imports all its poo poo from other folders, and I can use its mixins in my own SCSS files. Basically, I just want to put this at the top of my main.scss file:

code:
@import "bootstrap";
@import "bootswatch-variables";
@import "bootswatch";

main {
  ...
}
and be able to mix in bootstrap stuff so that I don't have classes on my components like nav-navbar navbar-fixed row column-sm-2 and other disgusting messes.

That made absolutely no sense and I apologize, but stylesheets and design in general is really not my strong point, like, at all.

down with slavery
Dec 23, 2013
STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

Pollyanna posted:

I have a really simple problem that I am blanking out on. My project currently uses gulp-sass to compile its SCSS files. I want to use an SCSS version of a Bootswatch theme. I downloaded the two files and imported them into my main SCSS file, but it turns out I also need Bootstrap's SCSS version as well. I want to do a thing where I can get something like bootstrap.scss that imports all its poo poo from other folders, and I can use its mixins in my own SCSS files. Basically, I just want to put this at the top of my main.scss file:

code:
@import "bootstrap";
@import "bootswatch-variables";
@import "bootswatch";

main {
  ...
}
and be able to mix in bootstrap stuff so that I don't have classes on my components like nav-navbar navbar-fixed row column-sm-2 and other disgusting messes.

That made absolutely no sense and I apologize, but stylesheets and design in general is really not my strong point, like, at all.

https://github.com/twbs/bootstrap-sass

or their homepage

http://getbootstrap.com/getting-started/

you'd be better off learning google as opposed to web dev at this point

Heskie
Aug 10, 2002
Anyone got any success using a 'living' style guide? I've looked at KSS, Pattern Lab and a few others but I'm still undecided how to approach it.

This would be for some solo projects so I'm more interested in building and consolidating modular components (i.e. Atomic Design / SMACSS etc) rather than documenting the (S)CSS for a team.

kedo
Nov 27, 2007

Heskie posted:

Anyone got any success using a 'living' style guide? I've looked at KSS, Pattern Lab and a few others but I'm still undecided how to approach it.

This would be for some solo projects so I'm more interested in building and consolidating modular components (i.e. Atomic Design / SMACSS etc) rather than documenting the (S)CSS for a team.

I used a pattern library + atomic design on one of my recent projects. My process went about it like this:

1) Looked at a bunch of different pattern libraries to decide what kind of elements I needed to include in mine.
2) Coded the markup so I could lay eyes on all the default styles while designing my own.
3) Worked on visual aesthetic for about six or seven of the elements in Illustrator to help define a general direction before spending too much time coding (eg. button, headlines, paragraph text, links, color palette)
4) Applied that aesthetic across all the elements
4a) Tested each atom/molecule frequently and alongside other molecules to make sure everything played well together.
5) Delivered the pattern library + wireframes to the developer for the project, as I wasn't coding the final thing.

I enjoyed the process, but at the end of the day implementation still requires a lot of tweaks and adjustments to get things looking just right.

hayden.
Sep 11, 2007

here's a goat on a pig or something
edit: nevermind, have a cute kitten

hayden. fucked around with this message at 05:29 on Jan 13, 2015

Mister Chief
Jun 6, 2011

I want an effect where I have a list and its items are ticked or crossed off with an animation in sequential order. I could have a bunch of nth child rules with different delays but I just wanted to know if anyone knew of a better solution.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Mister Chief posted:

I want an effect where I have a list and its items are ticked or crossed off with an animation in sequential order. I could have a bunch of nth child rules with different delays but I just wanted to know if anyone knew of a better solution.
You could iterate over the lis with JavaScript.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

Heskie posted:

Anyone got any success using a 'living' style guide? I've looked at KSS, Pattern Lab and a few others but I'm still undecided how to approach it.

This would be for some solo projects so I'm more interested in building and consolidating modular components (i.e. Atomic Design / SMACSS etc) rather than documenting the (S)CSS for a team.

tl:dr:
My experience has been that none of the myriad approaches to generation work very well. Kedo's suggestion is pretty much how I do it. Just make up a static page. Include every element you'll be using. Write about them. Update it as you go, and try and keep it minimal. You don't need to overthink it. Ignore those other things, they are a trap.

----------------------

I suggested leveraging a living styleguide system/generator for work projects to my team about a year ago, thinking it looked like a great idea. I went off and tested a shitload of them, and IMO they're all more effort than they're worth. Nice in theory, not great in practice.I assume some of them were useful within the specific workflow of the individual or company they were coded up to help with. Obviously they can be slotted into existing workflows (eg KSS + GitHub), but only with a helluva lot of massaging and patience.

The main problem I see is that most of the generators work by parsing comments from the CSS[1]. That's ok when you start out fresh, but becomes an immense pain in the arse as you change things. It forces you to be incredibly attentive to keeping [huge, specifically-structured, boilerplate-filled] comments updated[2]. They often force a very specific file structure + way of writing CSS. And/or they involve large amounts of duplication. And/or they're overly complex (eg Pattern Lab's PHP thingamajig). I feel like if there were a good generic solution, living styleguides would be more widely used, but there isn't.

CSS is just too changeable. A project's styles are never as generic as you think they're going to be. Any kind of approach more complex than an HTML page [of components you're going to use] can very very quickly become an annoying hindrance.

1. Or [very bad] equivalents, for example a markdown file to match each individual CSS file/component.
2. This is a Good Thing in general, but in this case these are generally large, structured blocks of text full of boilerplate and annoyances. KSS, for example, needs a section number, which means you have to change all the other section/subsection/sub-subsection/etc numbers when something needs to be slotted in.

RobertKerans fucked around with this message at 02:36 on Jan 14, 2015

Heskie
Aug 10, 2002

kedo posted:

Style Guide stuff


RobertKerans posted:

Style Guide stuff

Cheers guys.

After wasting way too much time looking into this I came to the same conclusions. Huge unmaintainable docblocks, forced directory structures or convoluted tools (I really like the concept behind Pattern Lab but it does feel very rough) that aren't very practical.

I'm going to try Styleguide Boilerplate. Its a simple php page that acts as a starting point for a process similar to what you guys suggest. It gives a simple layout and loops through imported .html files (displaying the component and the markup). Easy to modify and use, no nonsense etc.

Heskie fucked around with this message at 10:41 on Jan 14, 2015

midnightclimax
Dec 3, 2011

by XyloJW
Is there a blogging engine similar to Tumblr, but available for download & free for private use (possibly GPL)? I'm currently using a private Tumblr as a scratchpad and like it, but having it on my own server would be preferable. (maybe it's possible to revamp the ui of wordpress to make it look like tumblr's, idk)

5pitf1re
Oct 4, 2014

space ninja in space

midnightclimax posted:

Is there a blogging engine similar to Tumblr, but available for download & free for private use (possibly GPL)? I'm currently using a private Tumblr as a scratchpad and like it, but having it on my own server would be preferable. (maybe it's possible to revamp the ui of wordpress to make it look like tumblr's, idk)

Depending on what kind of guy you are you could go either with Octopress or Ghost. Both are MIT licensed.

Octopress is a bit of a snowflake as it uses Markdown files along with git as publishing mechanism.

5pitf1re
Oct 4, 2014

space ninja in space
please delete derp post

Hanpan
Dec 5, 2004

Can anyone recommend a decent library for off canvas push menus? It seems pushy or push.js are the most popular, but neither of them retain scroll position when activating the menu. Seems Zurb Foundation has it down, but I'm not using the framework unfortunately.

The Dave
Sep 9, 2003

I've had best success: http://mmenu.frebsite.nl/

midnightclimax
Dec 3, 2011

by XyloJW

5pitf1re posted:

Depending on what kind of guy you are you could go either with Octopress or Ghost. Both are MIT licensed.

Octopress is a bit of a snowflake as it uses Markdown files along with git as publishing mechanism.

Came across Ghost, but hadn't heard about Octopress. Will check it out, ta.

Pedestrian Xing
Jul 19, 2007

How do I handle an embedded browser (webkit 534.34 :negative:) rendering poo poo weirdly? I've tried normalize.css but it still displays basic stuff like fonts and absolute positioning incorrectly.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Pedestrian Xing posted:

How do I handle an embedded browser (webkit 534.34 :negative:) rendering poo poo weirdly? I've tried normalize.css but it still displays basic stuff like fonts and absolute positioning incorrectly.

Make a whole different style sheet and possibly markup for it and tweak it/them until they look right. Embedded browsers are near-universally terrible.

Pedestrian Xing
Jul 19, 2007

Munkeymon posted:

Make a whole different style sheet and possibly markup for it and tweak it/them until they look right. Embedded browsers are near-universally terrible.

I've done some of that, mostly in the form of 'if in embedded, $(".whatever").css...', but the bigger problem I've found is that libs like jqueryui aren't working properly and are positioning elements in weird ways.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Pedestrian Xing posted:

I've done some of that, mostly in the form of 'if in embedded, $(".whatever").css...', but the bigger problem I've found is that libs like jqueryui aren't working properly and are positioning elements in weird ways.

Yikes. Hope you've got a lot of time budgeted for this :(

revmoo
May 25, 2006

#basta
TBH it's going to be easier to redo the layout in a way that works both places. Chances are if one random browser is rendering an element wrong then you probably didn't go about it the right way in the first place. I'm going through this now on a project where stuff renders bad ONLY in iOS Safari and nowhere else.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



revmoo posted:

TBH it's going to be easier to redo the layout in a way that works both places. Chances are if one random browser is rendering an element wrong then you probably didn't go about it the right way in the first place. I'm going through this now on a project where stuff renders bad ONLY in iOS Safari and nowhere else.

I assumed he meant an embedded hardware browser like a smart TV or something similar and if that's the case, he could have totally valid everything and it might not matter.

For some background, I was on a smart TV project back when Samsung first started making them. The 'browser-based' UI would key out elements set to certain background colors (or maybe just transparency levels - it was a while ago) and whether any CSS rule worked right was a total crapshoot. Anchor tags didn't do anything except change the style of the text so you had to use JS events to trigger navigation. I was so glad I was only on the project to help with JS stuff.

Kobayashi
Aug 13, 2004

by Nyc_Tattoo
This is more of a workflow question. I've converted most of my writing over to Markdown, and I'm looking for mathematical markup language to go with it. There are a lot of choices out there, so I was wondering if anyone had a particular favorite.

Pedestrian Xing
Jul 19, 2007

Thankfully it's nothing as weird as embedded hardware, it's a built-in browser in a third party software thing. I've got the core functions all working, it's just display bugs at this point. We're moving away from the embedded version towards fully browser based, so it will eventually be irrelevant.

Then we have to support IE. Kill me now

5pitf1re
Oct 4, 2014

space ninja in space

Kobayashi posted:

This is more of a workflow question. I've converted most of my writing over to Markdown, and I'm looking for mathematical markup language to go with it. There are a lot of choices out there, so I was wondering if anyone had a particular favorite.

Check out Mathjax, it is used on http://math.stackexchange.com/ and the like.

stoops
Jun 11, 2001
I have this odd problem, hopefully someone can explain.

I have a form on an intranet, that when submitted, runs an ajax call and spits out an image.

The image being generated can take up to 40 seconds to complete.

Firefox and Chrome and Safari spit out the image, no problems.

Once i post that page to an outside site where the public can get to it, Firefox and Chrome spit out the image, but Safari just hangs. A quick google search tells me that Safari times out after so many seconds and that there's nothing i can do about it.

But i'm not sure why it would work on the intranet and not public?

If this is more of a jquery problem, I can delete and post on the appropriate forum.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
I just saw this here thing on the internet and I thought it looked interesting: http://materializecss.com/ Material Design CSS framework. I'm probably late to the party on it, but it's new to me!

5pitf1re
Oct 4, 2014

space ninja in space

Lumpy posted:

I just saw this here thing on the internet and I thought it looked interesting: http://materializecss.com/ Material Design CSS framework. I'm probably late to the party on it, but it's new to me!

wow, that actually looks really interesting!

syrup
Jul 18, 2003

I HAVE TAMED THE BEAST

Lumpy posted:

I just saw this here thing on the internet and I thought it looked interesting: http://materializecss.com/ Material Design CSS framework. I'm probably late to the party on it, but it's new to me!

Nice find -- I hadn't seen that one yet. There are also similar projects that work out of the box with React, Angular, and Ember if you're into any of those.

Rubies
Dec 30, 2005

Live Forever
Die Every Day

:h: :s: :d: :c:
Where do you guys go if you need some backend work done? What I need is pretty straight forward, the product delivered to me would just be some numbers and strings spit out onto a blank page so I can wrap the design around it. Im very clear in my ads that I'm not looking for design or "business optimization" or whatever. I also specified local only in like three different ways. I was expecting a lot of canned responses from India and whatever, but even the non-boilerplate replies seem to be too far reaching in what they expect to be hired for, and none of them are local. This is for Cragislist and Freelancer.com - what else is out there? I've never had to do this and I'm really not happy with the hustle. What's a site where a reliable coder can be given a list of tasks and just complete them without offering a ~eWeb 2.0 suite~?

Also I'm not trying to be cheap with it, I'm totally ok paying regular rates for pros and I'm not trying to skimp. If some dude wants 75 or 100 an hour and gets the job done that's cool but I literally have not had one non-lovely response in the hundreds I've received. Where the pros at?

Adbot
ADBOT LOVES YOU

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
You might want to check out: https://www.toptal.com/companies/apply

Although I have no idea what the prerequisites for clients are, I only know people who freelance through it.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply