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
The Dave
Sep 9, 2003

Yeah it's just loving dumb for the home page of a news site. It's great for enriching editorials.

Adbot
ADBOT LOVES YOU

Kobayashi
Aug 13, 2004

by Nyc_Tattoo
I'm looking for an entirely client-side library to create an image gallery. I'd like to be able to drop this into a CMS, so that users can use standard HTML with minimal extra markup to define galleries. Something like:

code:
<div class="container">
  <img src="..." />
  <p id/class="...">Some combination of tags, classes, and IDs to serve as a caption for the image</p>

  <img src="..." />
  <p id/class="...">Some combination of tags, classes, and IDs to serve as a caption for the image</p>

  <img src="..." />
  <p id/class="...">Some combination of tags, classes, and IDs to serve as a caption for the image</p>

  ...
</div>
Some version of the above markup would be turned into a gallery of thumbnails (the browser resizing full images is fine) that open in light boxes with the appropriate captions, navigation links, etc. Ideally, users could embed multiple galleries in a single page by using separate containers.

Stuff I've come across, like Photoswipe, needs a lot of boilerplate markup to work. I want something similar that generates everything automatically. Any ideas?

Arriviste
Sep 10, 2010

Gather. Grok. Create.




Now pick up what you can
and run.

Ksi posted:

Hi guys, i'm a graphic designer that has been focused on photography for most of his career.
I got a job doing web design for the past 5 months and i've been learning to code on html/css and using bootstrap for some basic websites.
I want to get better at coding and i've been looking for some online resources, recently i found out about this course.

https://www.udemy.com/complete-web-developer-course/?couponCode=KICKOFF2015

It's 10 bucks right now but i'm not sure if it is worth it (yeah i mean they're 10 bucks but still). Anyone has taken that course by anychance?

Thanks for posting link to this offer. My situation & experience is much like yours, so I signed up for this course and another with the same discount. I tend to go the self-taught way on most subjects; however, sometimes I need help on keeping my focus so I don't start a session with, say, building a wireframe then a few hours later find that I've dissected and rebuilt a bit of code, looked at battle bot builds, watched some pet bird videos, and then cooked from a new recipe.
:derp:

Pollyanna
Mar 5, 2005

Milk's on them.


About the Headers From Hell site design stereotype: I have seen it done well if, and only if, it's used to explain some sort of concept - kind of like this. It works cause it tells you specific things about a specific product and uses the format to its advantage in explaining what the gently caress it does. Otherwise, I hate that poo poo with a loving passion because every startup out there has it and I feel like nobody ever uses it well and it always comes off as style over substance to me.

kedo
Nov 27, 2007

There are definitely ways to use it well. If it's an image just for the sake of looking pretty and the page's main function is something other than looking pretty, it's probably a bad idea. However a call to action header like you're showing, Pollyanna, is pretty nice. Too bad it uses a carousel that's way too loving fast so I can't read everything.

My favorite trick is making the entire image an action area. For example, I had a restaurant client who wanted some massive photography on the homepage, so I made the big rear end image a link to their menu. Was very successful in my entirely unbiased* opinion.











*Opinions may not actually be unbiased.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

If it's not a single serving website that has a clear distinct purpose (e.g. http://www.didtheblackhawksgetashutout.com/) then that design sucks.

shodanjr_gr
Nov 20, 2007
I got a bootstrap-related layout question. I'm making a 2-column layout with a 1/3 split which is working fine.

On the right-hand side column (aka the "Main View" of my app), I'd like to have a single row along the top that will host a toolbar and then a second row that expands to fill the remainder of the space (which will host other nice things). This is what I've got so far:

code:
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sidebar">
      STUFF
    <div class="col-md-9">
      <div class="container-fluid" style="padding-left: 5px; padding-right: 5px;" id="maincontainer">
        <div class="row" id="toolbar">
          <div class="col-md-12 panel">
            <div class="panel-body">
              TOOLBAR
            </div>
          </div>
        </div>
        <div class="row" style="" id="main view">
          <div class="col-md-12 panel" style="">
            <div id="mainviewcontent">
              MAINVIEW
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
Obviously in this situation, the second row does not expand. I can't figure out for the life of me how to get #mainview to expand to fill the rest of the page, without fixing sizes. I tried flex-box by setting:

code:
#maincontainer {
	display: flex;
flex-direction: column;
}

#toolbar{
flex: 0 0 auto;
}

#mainview{
flex: 1 0 auto;
}
However, this causes #mainview to grow to the full size of #maincontainer, rather than that remains in #maincontainer after laying out #toolbar.

Any ideas on how to go about this?

zfleeman
Mar 12, 2014

I wonder how you spell Tabasco.
Anybody gently caress around with Tumblr themes? How do I tell something to stop rendering on my "Ask" page? I saw wrapping {block:Date} around the sidebar as a solution, but that isn't working.

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

shodanjr_gr posted:

Any ideas on how to go about this?

Make a jsfiddle! It will be easier for everybody to look at and mess with

shodanjr_gr
Nov 20, 2007

fletcher posted:

Make a jsfiddle! It will be easier for everybody to look at and mess with

Good idea :).

http://jsfiddle.net/tna7rxd7/

lunar detritus
May 6, 2009


If any of you work in a web shop / agency, how do you deal with responsive design?

We are still having problems with that in my job, our designers design for a 1080p screen and then it's our job to make it work for everything else (which sucks, because then we get complaints from our clients that it looks different from the comps they looked at full screen).

There's a dev team and a design team so any 'design in the browser' plan would be doomed from the start.

Kobayashi
Aug 13, 2004

by Nyc_Tattoo

gmq posted:

If any of you work in a web shop / agency, how do you deal with responsive design?

We are still having problems with that in my job, our designers design for a 1080p screen and then it's our job to make it work for everything else (which sucks, because then we get complaints from our clients that it looks different from the comps they looked at full screen).

There's a dev team and a design team so any 'design in the browser' plan would be doomed from the start.

As a designer, I can say that your designers suck. Sorry. :(

The Dave
Sep 9, 2003

I mean in that situation you need to tell your designers about the issue and that they need to document or mock up how the site will react to smaller break points. Also the designers and developers should have ongoing communication while comps are being coded out, it's never healthy to hand a design off and then it's just in the hands of the developers.

lunar detritus
May 6, 2009


Kobayashi posted:

As a designer, I can say that your designers suck. Sorry. :(

I kinda suspect this but the current reasoning (from one of the founders, developer) is "Well, most of them started working here fresh from college so we should teach them".

lunar detritus fucked around with this message at 23:48 on Jan 9, 2015

-JS-
Jun 1, 2004

gmq posted:

If any of you work in a web shop / agency, how do you deal with responsive design?

We are still having problems with that in my job, our designers design for a 1080p screen and then it's our job to make it work for everything else (which sucks, because then we get complaints from our clients that it looks different from the comps they looked at full screen).

If the design team don't get it it's up to you or another developer to explain it to them. Take a morning, explain the concepts behind responsive design and how this applies to their work. If clients are concerned, get the design team to do designs (or at least wireframes) for different breakpoints (even if it's just a homepage & one content page). You should also consider educating the client a little on what to expect from responsive design too - it's part of the documentation we supply to clients (although admittedly they don't all get it!)

If the design team insists on doing one design only make sure it's for a more standard screen resolution than 1920x1080 - maybe mention whilst they're all on 1080p Cinema displays or whatever the average screen size (let alone viewport size) is 1366x786.

Kobayashi
Aug 13, 2004

by Nyc_Tattoo

gmq posted:

I kinda suspect this but the current reasoning (from one of the founders, developer) is "Well, most of them started working here fresh from college so we should teach them".

It's a pain point in the industry right now. None of our tools are really designed to accommodate the kind of workflows that are necessary these days, especially for designers who don't code at all. At the very least, your organization should pick a few representative breakpoints and say that you need those to be part of the standard deliverables. Better still (and this will be difficult to say without coming off like you're trying to tell people how to do their jobs) they should probably be designing for mobile first, illustrating how the design expands to take advantage of larger screen sizes, rather than blue sky design for $1,000 monitors that no normal person uses.

E: Beaten.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

gmq posted:

If any of you work in a web shop / agency, how do you deal with responsive design?

We are still having problems with that in my job, our designers design for a 1080p screen and then it's our job to make it work for everything else (which sucks, because then we get complaints from our clients that it looks different from the comps they looked at full screen).

There's a dev team and a design team so any 'design in the browser' plan would be doomed from the start.

What's your workflow? Do the designers hand you PSD files and then you guys do the rest, or are they giving you relatively complete static HTML/CSS/JS? If the latter then you can at least get basic responsive/viewport stuff done by them in the CSS with not too much extra training/braining.

lunar detritus
May 6, 2009


Kobayashi posted:

your organization should pick a few representative breakpoints and say that you need those to be part of the standard deliverables.

We tried to do this (it was mostly a mobile view and a desktop one, but it was more than the current standard) but all those designers left and the current excuse is "We don't have time!". Which sucks considering we have the same time constraints and we are still expected to deliver responsive sites.


quote:

If the design team insists on doing one design only make sure it's for a more standard screen resolution than 1920x1080 - maybe mention whilst they're all on 1080p Cinema displays or whatever the average screen size (let alone viewport size) is 1366x786.

We were able to achieve this, they still make their sites at 1080p buy at least they are using a grid for the content.


I'm mostly worried because we have been using Bootstrap lately and it seems the current thinking by the design team and even our boss is "well, let Bootstrap make it responsive".

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.

The Dave posted:

I mean in that situation you need to tell your designers about the issue and that they need to document or mock up how the site will react to smaller break points. Also the designers and developers should have ongoing communication while comps are being coded out, it's never healthy to hand a design off and then it's just in the hands of the developers.

This absolutely. Our agency process usually went:
1. Developer talks to client and figures out what they want, from a functional standpoint.
2. Designer creates mood boards with client, gets list of sites that have aspects they like, or provide features they want
3. Developer and Designer have a quick wireframe session (whiteboard, paper, whatever) to get the functional aspect of the design out the way, without making the design impossible. This usually includes the mobile (sometimes tablet) version, too.
4. Designer creates wireframes (balsamiq, gliffy, whatever) which outlines the expected structure on all devices/breakpoints. This gives rough impression of layout and function.
5. Developer signs off on wireframes, or raises any functional issues "what happens when x"
6. Client signs off on wireframes, or requests modifications and this whole thing goes back to step 4.
7. Designer creates full mock up (photoshop, indesign, whatever) of one busy page, to get the "look and feel" right for the client. This design is for theme purposes, and has nothing to do with function.
8. Client signs off on overall design mock, or goes back to step 7 with feedback.
9. Designs creates full mock up of every page, at every breakpoint. Also following a checklist of crap they have to include in the design (form validation errors, for instance)
10. Developer signs off on each page mock created by the designer, or gives feedback and has amendments made.
11. Client signs off on each page design or provides feedback and returns to step 9.

Apparently this is unusual, but we also made our designers do the HTML/CSS "cuts". This is mostly because it forced them to have an understanding of web and what they were designing for, rather than palm it off to a developer.
This made our designers more responsible and less likely to build crazy unworkable stuff, and it also evened out our companies workload.

12. Designer develops static (non-functional) HTML and CSS cuts for each page.
13. Developer implements cuts, adding functionality (backend view code, javascript, whatever)

That's quite a long process, but it also reduces risk. The basic workflow of the site and arrangement of elements is figured our in the wireframe process and signed off by the client, meaning they can't "go back" and start changing how stuff is going to work. This also means when you hit the design stage you won't have a client jugging poo poo all over the place, because that was locked down in the wireframes when everything was just squares and circles.

The developer is also responsible for eyeing over the mocks and designs before they go for sign-off, so they can hopefully catch any retarded poo poo or missing elements the designer might have missed. Creating a furniture-design wizard? Developer has to figure out where all his buttons are, how colour selection will work, etc, before the client goes and signs off. There should be almost imperceptible differences between the mock designs and the final product.

Designers also have to rattle off all the different breakpoint wireframes/mocks, and developers get to eye them over before agreeing to them. The dev should also play "user-idiot" and pretend they're touching around the screen, because you quickly realise if an interface element isn't going to work on a touch device when you go to use it, or if you want to get to X item quickly, it requires a lot of loving about, and so you need to rework the wireframe to make that easier for the user.

Reduce risk. Increase responsibility. Review and sign off every stage. Even if it's internal, have a punishment for "going back" on an aspect that was signed off, even if it's just a nerf dart to the back of the head.

v1nce fucked around with this message at 00:25 on Jan 10, 2015

Chris!
Dec 2, 2004

E
We supply designs for the homepage for a desktop screen, tablet and mobile phone, plus a standard page as well (and any other required pages, for example a user dashboard if there is one).

However one of the more senior designers is pretty clueless with regards the newer technology, and even when he supplies those designs it's without a proper understanding of how it's going to be made. This is why I think people designing websites should know at least html, css and the theories of mobile first webdesign.

Kobayashi
Aug 13, 2004

by Nyc_Tattoo

gmq posted:

We tried to do this (it was mostly a mobile view and a desktop one, but it was more than the current standard) but all those designers left and the current excuse is "We don't have time!". Which sucks considering we have the same time constraints and we are still expected to deliver responsive sites.

Sounds like you have organizational problems that go beyond junior designers. Compare your process with what v1nce posted, it's probably not even close.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
v1nce's process is basically it, sounds like there's a few failures in your whole process, not just designers not delivering the right comps.

- The client is signing off on a responsive design without being explained what a responsive design entails, and only being given a single reference point (the big monitor version).
- The designers are not put in a position where they even have to think about document reflow because they only do one composition per view.
- You're relying on Bootstrap to do your websites, yet it sounds like you're delivering custom designs to the client. Designers either need to learn exactly how Bootstrap's responsive grid system works, or they need to establish what would happen themselves. Mashing incompatible designs into base frameworks just drives up the dev budget.

There really needs to be an attitude shift on what 'responsive design' means within the company, and how it gets sold and presented to the company. If the company isn't willing to do extra comps, put extra thought into layout, and allow for the time to do these things, it really shouldn't sell the promise of a responsive website, because you'd get more consistent results just delivering to a fixed width design.

lunar detritus
May 6, 2009


Thanks everyone. I forwarded some of this to my boss and he told me "Yeah, that's basically what I want to implement this year but first we need to push the design team to be better at technical stuff" which I guess it's true, I'd love multiple PSDs for each breakpoint but we are currently having problems because sometimes colours don't match (red button in one page is a different red in the next), or titles are different sizes from one PSD to another (same site), etc. Have to start small I guess.

Chris!
Dec 2, 2004

E

gmq posted:

Thanks everyone. I forwarded some of this to my boss and he told me "Yeah, that's basically what I want to implement this year but first we need to push the design team to be better at technical stuff" which I guess it's true, I'd love multiple PSDs for each breakpoint but we are currently having problems because sometimes colours don't match (red button in one page is a different red in the next), or titles are different sizes from one PSD to another (same site), etc. Have to start small I guess.

Wow. I'd guess your designers are either just bad / inexperienced, or they're being put under unworkable deadlines...

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

gmq posted:

Thanks everyone. I forwarded some of this to my boss and he told me "Yeah, that's basically what I want to implement this year but first we need to push the design team to be better at technical stuff" which I guess it's true, I'd love multiple PSDs for each breakpoint but we are currently having problems because sometimes colours don't match (red button in one page is a different red in the next), or titles are different sizes from one PSD to another (same site), etc. Have to start small I guess.

Get them off photoshop ASAP into something that supports components like sketch or illustrator. Then when they change one button, they all change. Other option: have them design in HTML and CSS.

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

One thing I'm becoming more and more thankful for is that I'm not a "I'm a designer only" person. Those guys are kinda in a lovely situation right now.

Heskie
Aug 10, 2002

caiman posted:

One thing I'm becoming more and more thankful for is that I'm not a "I'm a designer only" person. Those guys are kinda in a lovely situation right now.

While I can sympathise, anyone designing websites needs to recognise the medium is unique, concede that pixel perfection is a pipe-dream and educate themselves in whats possible. Responsive design has been a huge part of this for 3 or 4 years now and shouldn't just be brushed off as the developer's problem, it affects every part of the process nowadays as v1nce's post shows.

The designers at one of my old agencies used to give PSDs in cms and 300dpi while kicking back with requests like "set the text to use 'Crisp' like in the PSD". This was nearly 3 years ago though and thankfully they learnt to adapt.

A technique I quite like is Dan Mall's Element Collages, designing components rather than entire pages suits responsive design quite well.

kedo
Nov 27, 2007

Chris! posted:

Wow. I'd guess your designers are either just bad / inexperienced, or they're being put under unworkable deadlines...

Unworkable deadlines wouldn't prevent you from knowing how to make swatches or character/paragraph styles.

Sorry bout your lovely designers, gmq.

The Dave
Sep 9, 2003

Yeah inconsistency in mocks is just bad designers. Your boss sounds weak too.

ufarn
May 30, 2009

Withnail posted:

Sorry this isn't a technical question, but when did the de facto web re-design turn into massive images that you have to scroll through to get to any actual content? Am I having a senior moment?




Probably around NYT's Snow Fall, where people in media got the idea that having big text and images made you a Very Serious Journalist. It's also where #longform got re-invigorated as a buzzword in techy journo circles.

And now, you've got Medium continuing - and establishing - the trend. I hope it dies off, especially because it usually relies on a lot of JS that breaks my iOS WebViews.

shodanjr_gr
Nov 20, 2007

ufarn posted:

Probably around NYT's Snow Fall, where people in media got the idea that having big text and images made you a Very Serious Journalist. It's also where #longform got re-invigorated as a buzzword in techy journo circles.

And now, you've got Medium continuing - and establishing - the trend. I hope it dies off, especially because it usually relies on a lot of JS that breaks my iOS WebViews.

I blame Microsoft and the Metro/Modern design for this.

The Dave
Sep 9, 2003

ufarn posted:


And now, you've got Medium continuing - and establishing - the trend. I hope it dies off, especially because it usually relies on a lot of JS that breaks my iOS WebViews.

I couldn't disagree more. When done right it makes the whole experience better.

chami
Mar 28, 2011

Keep it classy, boys~
Fun Shoe

The Dave posted:

I couldn't disagree more. When done right it makes the whole experience better.

It can be used incredibly well when it supports and enhances the content of the article.

edit: LOL I never noticed they put a "We're hiring developers!" ad in Dev Tool's console if you're viewing the site with it.

chami fucked around with this message at 01:37 on Jan 11, 2015

vOv
Feb 8, 2014

chami posted:

It can be used incredibly well when it supports and enhances the content of the article.

edit: LOL I never noticed they put a "We're hiring developers!" ad in Dev Tool's console if you're viewing the site with it.

Ok, that's super cool.

NovemberMike
Dec 28, 2008

gmq posted:

Thanks everyone. I forwarded some of this to my boss and he told me "Yeah, that's basically what I want to implement this year but first we need to push the design team to be better at technical stuff" which I guess it's true, I'd love multiple PSDs for each breakpoint but we are currently having problems because sometimes colours don't match (red button in one page is a different red in the next), or titles are different sizes from one PSD to another (same site), etc. Have to start small I guess.

If your designers are using Photoshop that's a bad sign. It's a tool that doesn't lend itself to web design and it tends to get people focused on pixel perfect designs that just don't work with the way things work in the browsers people use. I personally like to have a page's look and feel defined by an interactive style guide that you can open up in a browser and demonstrates how the elements of the page look and behave and then a less detailed mockup that shows how the page will be laid out.

Here's something similar to the style guide we use (I think ours is a little nicer, not sure where they got it from) http://demo.patternlab.io/

The Dave
Sep 9, 2003

NovemberMike posted:

If your designers are using Photoshop that's a bad sign.

No. Just no. Yes some awesome tools have come out but if Photoshop is the problem it's bad designers. Photoshop has also evolved and has added more helpful web development tools in the last two version.

NovemberMike
Dec 28, 2008

Photoshop can be a part of the process but it's not particularly helpful for most of the work that needs to be done. Basically, there's different phases of a design. You need to figure out the basic layout of the page and how people will move to the other pages, you need to figure out what the stylings should be and then you need to really integrate everything with a few passes where you bring everything together for a page and make any small changes to get things to work together. My experience is that the sooner you bring in Photoshop and mockups that actually look like a web page, the sooner you get people ignoring the process and wondering if that text should be shifted a half pixel to the right or if the font looks a little fuzzy (ignoring the fact that fonts will render differently on mac vs windows and on different browsers). I'd much rather work out the layout with a bunch of lovely drawings on paper (or anything else with a similar lack of detail), do styleguides with html and css and work on the final touches on a mockup in html and css.

pipes!
Jul 10, 2001
Nap Ghost
Photoshop is just a hammer. Some hammers have ergonomic grips, some are painted with bright colors to make them easier to find if you drop them, some have little loops on the end to make them easier to hang up afterwards. It all doesn't change the fact that if you're using that hammer to drive nails in at the wrong end of the piece of wood, you're simply wasting your time.

The Dave
Sep 9, 2003

NovemberMike posted:

Photoshop can be a part of the process but it's not particularly helpful for most of the work that needs to be done. Basically, there's different phases of a design. You need to figure out the basic layout of the page and how people will move to the other pages, you need to figure out what the stylings should be and then you need to really integrate everything with a few passes where you bring everything together for a page and make any small changes to get things to work together. My experience is that the sooner you bring in Photoshop and mockups that actually look like a web page, the sooner you get people ignoring the process and wondering if that text should be shifted a half pixel to the right or if the font looks a little fuzzy (ignoring the fact that fonts will render differently on mac vs windows and on different browsers). I'd much rather work out the layout with a bunch of lovely drawings on paper (or anything else with a similar lack of detail), do styleguides with html and css and work on the final touches on a mockup in html and css.

This is all coming from the original "If your designers are using Photoshop that's a bad sign." which I greatly disagree with. What you're talking about there is just a broken process, regardless if they're using MSPaint or Sketch.

Adbot
ADBOT LOVES YOU

streetlamp
May 7, 2007

Danny likes his party hat
He does not like his banana hat

pipes! posted:

Photoshop is just a hammer. Some hammers have ergonomic grips, some are painted with bright colors to make them easier to find if you drop them, some have little loops on the end to make them easier to hang up afterwards. It all doesn't change the fact that if you're using that hammer to drive nails in at the wrong end of the piece of wood, you're simply wasting your time.

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.

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