|
I post this poo poo in here every once in awhile because I'm always amazed at how uncreative I am. http://tympanus.net/Development/RainEffect/ No, that's not a video.
|
#
?
Nov 5, 2015 19:23
|
|
|
|
| # ? May 16, 2024 11:44 |
|
|
Thermopyle posted:I post this poo poo in here every once in awhile because I'm always amazed at how uncreative I am. That's really amazing. It looks a lot better more towards the bottom where it's transforming the image in the background where it's more complex than a gradient.
|
|
#
?
Nov 5, 2015 19:53
|
|
|
Lumpy posted:How many icons? Why not use SVGs? etc. I've seen client sites where they included two full typefaces for a grand total of three icons.... CSS code:HTML code:Dominoes fucked around with this message at 20:25 on Nov 5, 2015 |
|
#
?
Nov 5, 2015 19:55
|
|
|
I'm currently working on a project that involves showing the occassional modal with some data in it, and I need to lay the data out nicely. I'm struggling a bit for inspiration on ways to improve the layout, here's what it looks like now: As you can see, stuff is kind of all over the place, I don't feel like I've got a very consistent design "language" for laying out these things. There are loads of similar modals all displaying different details about various domain entities. I suppose what I'm hoping for is some suggestions on places to look for inspiration - is there a site that has some examples of common interfaces, or a site that deals with similar amounts of data like this that I can look at? putin is a cunt fucked around with this message at 22:38 on Nov 5, 2015 |
|
#
?
Nov 5, 2015 22:33
|
|
|
The Wizard of Poz posted:I'm currently working on a project that involves showing the occassional modal with some data in it, and I need to lay the data out nicely. I'm struggling a bit for inspiration on ways to improve the layout, here's what it looks like now: Dribbble has lots of interesting stuff. I would start with their tags page: https://dribbble.com/tags I followed this for a while, as well: http://www.100daysui.com/
|
|
#
?
Nov 5, 2015 22:42
|
|
|
The Wizard of Poz posted:I'm currently working on a project that involves showing the occassional modal with some data in it, and I need to lay the data out nicely. I'm struggling a bit for inspiration on ways to improve the layout, here's what it looks like now: This would be very much improved by simply making the elements line up. Why doesn't the "SITE VISIT" stuff at the top line up with the content underneath? Why doesn't "COMPLETE" line up with "STUDENT", and "STAFF MEMBER" with "MILESTONE", etc? These are simple changes which would make a big difference 
|
|
#
?
Nov 5, 2015 22:47
|
|
|
Something that came to mind is replacing the "Go to student" button with an <a> element around the student's name and ID. The underline will help people understand that they can click it for additional information about that student, and the button that doesn't really seem to fit in can be done away with completely. Edit: And what about moving the "Edit event" button to the bottom left, opposite the Close button in the modal footer? IAmKale fucked around with this message at 22:52 on Nov 5, 2015 |
|
#
?
Nov 5, 2015 22:50
|
|
|
Chris! posted:This would be very much improved by simply making the elements line up. Why doesn't the "SITE VISIT" stuff at the top line up with the content underneath? Why doesn't "COMPLETE" line up with "STUDENT", and "STAFF MEMBER" with "MILESTONE", etc? These are simple changes which would make a big difference Yeah I agree, the problem is that the date/time field can hold a number of combinations, the longest of which being a start date and time and an end date and time (for example: "Sat 07/11/2015 8:00AM - Sun 08/11/2015 9:00PM"). So it needs a lot of room. Karthe posted:Something that came to mind is replacing the "Go to student" button with an <a> element around the student's name and ID. The underline will help people understand that they can click it for additional information about that student, and the button that doesn't really seem to fit in can be done away with completely. Both of those are great suggestions, thanks! In particular the idea to move the edit button to the bottom left seems like a good idea, as it's a common button in these modals so having a dedicated spot for it would be good.
|
|
#
?
Nov 5, 2015 22:58
|
|
|
Add some hierarchy in there as well. Some of that content has to be more important than other content, but everything below the headline looks exactly the same so it ends up looking like a bunch of boring gray text. My eye doesn't know where to land. Also you're repeating a lot of information unnecessarily. Right off the bat you say it's a site visit by John Doe, but then you say "event type: site visit" and "student: doe, john." If your design is successful you shouldn't need to specifically state what the event type is because your UI should and is already providing that information. e: You could also consider using something other than text for the "complete" and "milestone" items. If those are booleans you could use a big red X and a big green check instead of yes and no. If your goal is to give people a quick overview of this event, use design elements to make it easier to parse the data. kedo fucked around with this message at 23:23 on Nov 5, 2015 |
|
#
?
Nov 5, 2015 23:18
|
|
|
Thanks guys, I'm loving all of these suggestions. This is a product that has been in use for a while and we're now working on a significant update, so it's a great time to change the things you have all brought up. Keep the advice coming!
|
|
#
?
Nov 5, 2015 23:39
|
|
|
kedo posted:e: You could also consider using something other than text for the "complete" and "milestone" items. If those are booleans you could use a big red X and a big green check instead of yes and no. If your goal is to give people a quick overview of this event, use design elements to make it easier to parse the data. I thought about mentioning the same for the edit/goto buttons. Could use a magnifying glass to the left/right of the student's name (or the little jump arrow dealy). Do the same for editing. Everyone knows a "pencil" icon means edit, so you could put the edit icon next to the event name and make it fairly large/colorful maybe? Iono 
|
|
#
?
Nov 6, 2015 00:52
|
|
|
kloa posted:I thought about mentioning the same for the edit/goto buttons. I think using more icons with appropriate tooltips is a good idea in general, for the entire web application, so I'll keep that in mind, thanks! Our target is desktop users and perhaps tablet users, so I'm wary of relying on tooltips to convey information but simple icons like that are hopefully understood well enough that it won't be a problem.
|
|
#
?
Nov 6, 2015 02:12
|
|
|
The Wizard of Poz posted:I think using more icons with appropriate tooltips is a good idea in general, for the entire web application, so I'll keep that in mind, thanks! Our target is desktop users and perhaps tablet users, so I'm wary of relying on tooltips to convey information but simple icons like that are hopefully understood well enough that it won't be a problem. As an aside: Icons are very difficult to do right. As a rule of thumb, prefer labels. Labels are harder for designers but better for users. That's not to say there aren't common icons that are easy to use like the pencil icon, magnifying glass, etc.
|
|
#
?
Nov 6, 2015 17:24
|
|
|
The Wizard of Poz posted:I think using more icons with appropriate tooltips is a good idea in general, for the entire web application, so I'll keep that in mind, thanks! Our target is desktop users and perhaps tablet users, so I'm wary of relying on tooltips to convey information but simple icons like that are hopefully understood well enough that it won't be a problem. The combination of icons plus text labels are the strongest. Icons are great, but you have to learn their meaning first, but when you do, you can more quickly recognize it than text alone. The combination of icons plus labels gives everyone the advantage by giving direct meaning of the icon. Facebook for iPhone is the perfect example:  *Note I didn't blur out the person's name because it's an example on some design site. LP0 ON FIRE fucked around with this message at 17:40 on Nov 6, 2015 |
|
#
?
Nov 6, 2015 17:37
|
|
|
revmoo posted:Has the Famous JS framework improved since its stillborn release last year? I've got someone wanting me to work with it but I remember it being a hot mess at release. I noticed scrolling works now so there's evidently been some work done on it. Is it worth using these days? http://techcrunch.com/2015/11/06/nopen-source/
|
|
#
?
Nov 6, 2015 19:16
|
|
|
Should Bootstrap .row be defined for every 12 columns worth of children elements, or is it okay for a single .row to contain more than 12 columns defined? For example, should I do this... code:code:
|
|
#
?
Nov 6, 2015 19:25
|
|
|
Sedro posted:There's your answer haha yeah I actually saw that about an hour ago. Funny. Are there any decent WebGL-based frameworks that abstract away some of the complexity so you don't have to have a senior engineer at EA Games to be able to build stuff?
|
|
#
?
Nov 6, 2015 19:42
|
|
|
revmoo posted:haha yeah I actually saw that about an hour ago. Funny. three.js is fun / easy for tinkering. The examples can get you a long way.
|
|
#
?
Nov 6, 2015 19:54
|
|
|
Karthe posted:Should Bootstrap .row be defined for every 12 columns worth of children elements, or is it okay for a single .row to contain more than 12 columns defined? No there's no real need for a second row unless you don't use up all 12 columns and need to start a new row. It's probably best practice to seperate each row into it's own section though.
|
|
#
?
Nov 6, 2015 20:25
|
|
|
Is there some sort of voodoo that is required to get Facebook's page plugin to work on a website? I've gone here: https://developers.facebook.com/docs/plugins/page-plugin entered my information, copied their code, and created a web page that only contained their code: http://www.cldavis.org/newsite/MJD/fb.html All I ever get is a link to the Facebook page and no feed. I've tried other examples that people have posted with similar results. I'm not getting any errors in the Javascript console. I feel like I'm missing something blindingly obvious but I can't find it for the life of me.
|
|
#
?
Nov 8, 2015 06:00
|
|
|
Works for me. Does the page visitor have to be logged in to Facebook for it to work?
|
|
#
?
Nov 8, 2015 06:03
|
|
|
Worked for me, once I turned off some browser plugins that were blocking it. Have you tried it in a clean browser profile?
|
|
#
?
Nov 8, 2015 09:45
|
|
|
Jabor posted:Worked for me, once I turned off some browser plugins that were blocking it. That was it - I had a plugin blocking requests to FB. Thanks, that was driving me crazy!
|
|
#
?
Nov 8, 2015 11:39
|
|
|
Khelmar posted:That was it - I had a plugin blocking requests to FB. Thanks, that was driving me crazy! Generally recommendation is if something isn't working check with the browsers Private mode, or an alternative browsers private mode. Unless you've gone out of your way, addons/etc won't be loaded.
|
|
#
?
Nov 8, 2015 15:19
|
|
|
Looking for some advice on how to best structure a project I'm working on. It's fairly simple, a collection of pages with a side nav, no CMS. I'm trying to replicate a lot of the functionality of something like this, mainly: - Content as separate pages (not a SPA) - Side nav, header and footer reflects current page - Each page's content doesn't necessarily follow the same pattern so might not be easy to templatize I'm thinking maybe a Handlebars template, precompiled into separate pages? I've not used Handlebars before, but it seems roughly what I need. Ideally what I'd like is to write a master template with header, side nav, styling and logic, and then separately write each page's content as a basic HTML file, then somehow process it to plug each page's content into the template as its own page. The thing I'm not sure of is if Handlebars strongly prefers to use JSON, in which case maybe each page is just a JSON object with {data: '<lots of pure html'>} to pull from? One thing I notice from the Google page I linked is that on every pageload, the sidenav seems to flicker. My guess is it loads the page, then retroactively opens up the nav appropriately based on whatever page it is. I've thought about just AJAX loading each page's content, sort of SPA style, except I want to retain the ability to link directly to individual pages via URL. Anony Mouse fucked around with this message at 21:06 on Nov 10, 2015 |
|
#
?
Nov 10, 2015 21:02
|
|
|
This is a little terse because I'm on my phone, but your best bet is probably: Use whatever templating system you like to render the pages as static HTML (that could function with JavaScript). That'll give you the basics, with templates as includes/extends & whatever. After you've written that and it all works, add a JavaScript file which watches for clicks on A tags to local hrefs, and instead of following the link (use event.preventDefault() ) fetch the href page with AJAX and do a replace on the relevant content sections, which will likely be your main block and nav block. If there's additional JavaScript that needs to run on the replaced elements, either use delegation to keep the events in place, or have a function which reapplies JavaScript to the newly introduced elements. This method keeps poo poo simple, and will be fast if the server is configged correctly, hell you could host it on Neocities and itd be fine.
|
|
#
?
Nov 10, 2015 21:17
|
|
|
Avoid client side rendering, it'll probably just slow you down IMO. You can always change your mind if you use JavaScript based templating Languages.
|
|
#
?
Nov 10, 2015 21:19
|
|
|
Maluco Marinero posted:Avoid client side rendering, it'll probably just slow you down IMO. You can always change your mind if you use JavaScript based templating Languages. For mobile-facing websites, or in general? I figured it'd be beneficial (ie: less costly) to have everything render on their computer, and not the server.
|
|
#
?
Nov 10, 2015 21:32
|
|
|
More for this style of project, where there's no CMS or dynamic data. You'll have an incredibly reliable and fast loading website if you treat JavaScript as a 'net' you lay over the top. Then there's absolutely no render overhead at runtime, no client rendering issues to deal with, and the size difference between the client downloading HTML or JSON stuffed with the main block is negligible at best with a properly configured server (gzip and caching).
|
|
#
?
Nov 10, 2015 21:37
|
|
|
Maluco Marinero posted:This is a little terse because I'm on my phone, but your best bet is probably: This is pretty much what I'm doing now, but it has two drawbacks: 1) Harder to link to pages from the outside since there are no URLs 2) I'd have to implement pushing and popping browser history states The two problems are linked, and I figured I could kill two birds with one stone by precompiling everything somehow. Using AJAX, there are no terribly elegant solutions, but then again this is web development so :shrugs: Maybe I'll use GET in the URL to pass metadata about the desired page to load, which also makes it easier to push states into the browser history stack and keeps it all pretty stateless.
|
|
#
?
Nov 10, 2015 22:10
|
|
|
It's 2015, you can absolutely give each page a unique URL and update the location the browser displays without actually reloading the page.
|
|
#
?
Nov 10, 2015 22:39
|
|
|
Anony Mouse posted:This is pretty much what I'm doing now, but it has two drawbacks: https://github.com/defunkt/jquery-pjax I've been using this in combination with django-easy-pjax, and it's generally completely transparent until I no longer want it to be. It's awesome.
|
|
#
?
Nov 10, 2015 22:58
|
|
|
Jabor posted:It's 2015, you can absolutely give each page a unique URL and update the location the browser displays without actually reloading the page. Yeah. Pushstate is trivial to implement with a little research, just delegate an event handler to catch any time an a tag is clicked, check if its onsite or off, and use pushstate plus AJAX if its onsite. No need for anything else, if the browser doesn't support pushstate don't hook the handler, and it'll fallback with no dramas.
|
|
#
?
Nov 11, 2015 02:18
|
|
|
Anony Mouse posted:Looking for some advice on how to best structure a project I'm working on. It's fairly simple, a collection of pages with a side nav, no CMS. For something like this I'd use http://assemble.io/ to precompile everything before uploading.
|
|
#
?
Nov 11, 2015 15:02
|
|
|
Is there a service that'll check the HTTP return code of a URL (a whole path, not just the domain) that's free? Either this doesn't exist or I'm not coming up with the right search terms
|
|
#
?
Nov 11, 2015 16:52
|
|
|
Munkeymon posted:Is there a service that'll check the HTTP return code of a URL (a whole path, not just the domain) that's free? Either this doesn't exist or I'm not coming up with the right search terms curl
|
|
#
?
Nov 11, 2015 18:16
|
|
|
Lumpy posted:curl Microsoft Shop 
|
|
#
?
Nov 11, 2015 18:23
|
|
|
Munkeymon posted:Microsoft Shop I use curl on windows all the time
|
|
#
?
Nov 11, 2015 18:29
|
|
|
Munkeymon posted:Microsoft Shop telnet 
|
|
#
?
Nov 11, 2015 18:34
|
|
|
|
| # ? May 16, 2024 11:44 |
|
|
Lumpy posted:telnet haha good point. I should have specified I'd need to use it from the client side JS
|
|
#
?
Nov 11, 2015 18:38
|
|