|
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?
|
# ? Jan 12, 2015 01:52 |
|
|
# ? May 9, 2024 17:40 |
|
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?
|
# ? Jan 12, 2015 02:18 |
|
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 |
# ? Jan 12, 2015 03:29 |
|
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.
|
# ? Jan 12, 2015 03:56 |
|
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.
|
# ? Jan 12, 2015 05:56 |
|
How big can a home page auto-playing background video be before I start pissing people off? Can I get away with 2.6mb?
|
# ? Jan 12, 2015 11:50 |
|
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.
|
# ? Jan 12, 2015 13:00 |
|
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.
|
# ? Jan 12, 2015 14:02 |
|
-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. 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.
|
# ? Jan 12, 2015 14:36 |
|
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.
|
# ? Jan 12, 2015 15:17 |
|
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:
That made absolutely no sense and I apologize, but stylesheets and design in general is really not my strong point, like, at all.
|
# ? Jan 12, 2015 19:40 |
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: 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
|
|
# ? Jan 12, 2015 19:45 |
|
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.
|
# ? Jan 12, 2015 20:27 |
|
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. 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.
|
# ? Jan 12, 2015 21:03 |
|
edit: nevermind, have a cute kitten hayden. fucked around with this message at 05:29 on Jan 13, 2015 |
# ? Jan 13, 2015 05:21 |
|
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.
|
# ? Jan 13, 2015 14:53 |
|
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.
|
# ? Jan 13, 2015 15:14 |
|
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. 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 |
# ? Jan 14, 2015 02:31 |
|
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 |
# ? Jan 14, 2015 10:38 |
|
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)
|
# ? Jan 14, 2015 11:38 |
|
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.
|
# ? Jan 14, 2015 12:09 |
|
please delete derp post
|
# ? Jan 14, 2015 12:10 |
|
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.
|
# ? Jan 14, 2015 23:26 |
|
I've had best success: http://mmenu.frebsite.nl/
|
# ? Jan 14, 2015 23:49 |
|
5pitf1re posted:Depending on what kind of guy you are you could go either with Octopress or Ghost. Both are MIT licensed. Came across Ghost, but hadn't heard about Octopress. Will check it out, ta.
|
# ? Jan 15, 2015 09:36 |
|
How do I handle an embedded browser (webkit 534.34 ) rendering poo poo weirdly? I've tried normalize.css but it still displays basic stuff like fonts and absolute positioning incorrectly.
|
# ? Jan 15, 2015 16:23 |
|
Pedestrian Xing posted:How do I handle an embedded browser (webkit 534.34 ) 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.
|
# ? Jan 15, 2015 20:15 |
|
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.
|
# ? Jan 15, 2015 20:58 |
|
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
|
# ? Jan 15, 2015 21:08 |
|
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.
|
# ? Jan 15, 2015 21:54 |
|
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.
|
# ? Jan 15, 2015 22:59 |
|
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.
|
# ? Jan 15, 2015 23:22 |
|
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
|
# ? Jan 16, 2015 03:26 |
|
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.
|
# ? Jan 16, 2015 13:37 |
|
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.
|
# ? Jan 16, 2015 16:48 |
|
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!
|
# ? Jan 16, 2015 20:29 |
|
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!
|
# ? Jan 17, 2015 01:43 |
|
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.
|
# ? Jan 17, 2015 02:45 |
|
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?
|
# ? Jan 17, 2015 19:05 |
|
|
# ? May 9, 2024 17:40 |
|
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.
|
# ? Jan 17, 2015 19:16 |