|
ddiddles posted:In that case, drop this code into a text editor and save it as index.html This is exactly what I came looking for. Thank you! 
|
#
?
Feb 2, 2016 00:06
|
|
|
|
| # ? May 10, 2024 21:41 |
|
|
PirateBob posted:This is exactly what I came looking for. Thank you! Skandranon had a good point, if it's not to skeevy looking, you could email that index.html as an attachment to everyone and have them open it and it would work the same.
|
|
#
?
Feb 2, 2016 02:37
|
|
|
Note: If you're randomly redirecting people to different varieties of a survey, check on whether it is important that you end up with a (roughly) equal amount of each survey. The above solution is truly random, and may have you end up with 80% going to survey variant 1, 15% to survey variant 2 and 5% to survey variant 3, which could invalidate your survey results. Building in something to equalize it is much more complex, in which case you might be better off setting up a survey with LimeSurvey or some such.
|
|
#
?
Feb 2, 2016 09:42
|
|
|
Lazy route: Set up your URL redirects through a split testing service like Optimizely. You can have variants just go to a new url.
|
|
#
?
Feb 2, 2016 13:17
|
|
|
Leshy posted:Note: If you're randomly redirecting people to different varieties of a survey, check on whether it is important that you end up with a (roughly) equal amount of each survey. The above solution is truly random, and may have you end up with 80% going to survey variant 1, 15% to survey variant 2 and 5% to survey variant 3, which could invalidate your survey results. Over a small sample size, sure, but 'truly random' is going to be evenly distributed over a large sample. To have 800 people out of 1000 go to site A would indicate something definitely NOT random.
|
|
#
?
Feb 2, 2016 16:23
|
|
|
Skandranon posted:Over a small sample size, sure, but 'truly random' is going to be evenly distributed over a large sample. To have 800 people out of 1000 go to site A would indicate something definitely NOT random. But if his sample population is ~20 people he could easily get that distribution out of a JS random implementation. Also, IIRC you're big on Angular so maybe you're the right one to ask: it looks like I might have to actually learn Angular 1.x - what's a good resource for someone who's already done complicated stuff with jQuery, KO and even Scriptaculous back in the day? I don't need 'here is how closure is formed and now we will make request with great and mighty AJAX' hand-holding - I just want to know best practices and common patterns. Munkeymon fucked around with this message at 16:55 on Feb 2, 2016 |
|
#
?
Feb 2, 2016 16:50
|
|
|
So I will finally be implementing a form of User login for one of my sites. In the past I have actually created this myself, I work in the security industry so I am pretty good about using KDF's for password hashing, salting, minimum requirements etc. However I was wondering if there is some form of standard login approach people like to use and recommend. Something with email verification and the works, as that is a frontier I am not familiar with?
|
|
#
?
Feb 2, 2016 17:03
|
|
|
Knifegrab posted:So I will finally be implementing a form of User login for one of my sites. In the past I have actually created this myself, I work in the security industry so I am pretty good about using KDF's for password hashing, salting, minimum requirements etc. However I was wondering if there is some form of standard login approach people like to use and recommend. Something with email verification and the works, as that is a frontier I am not familiar with? What's your backend?
|
|
#
?
Feb 2, 2016 17:08
|
|
|
Thermopyle posted:What's your backend? Node.js and postgres (yes I am the worst).
|
|
#
?
Feb 2, 2016 17:11
|
|
|
Knifegrab posted:Node.js and postgres (yes I am the worst). No, you'd be using Node.js and Mongo then. 
|
|
#
?
Feb 2, 2016 17:26
|
|
|
Munkeymon posted:But if his sample population is ~20 people he could easily get that distribution out of a JS random implementation. You're going to have a tough time then... an important part of using Angular and not hating it is to forget jQuery exists. I am a big fan of ng-book (https://www.ng-book.com/), it does a pretty good job of explaining how things work in Angular, but also explains why things are and why you should do things in certain ways. If you have the option, I'd also look at TypeScript and how it works with Angular, as TypeScript really smooths out some of the warts in Angular 1.x. Angular 1.x with good TypeScript integration is pretty much what Angular2 is, minus some performance improvements.
|
|
#
?
Feb 2, 2016 17:28
|
|
|
Lumpy posted:No, you'd be using Node.js and Mongo then. Fair enough.
|
|
#
?
Feb 2, 2016 17:57
|
|
|
Skandranon posted:You're going to have a tough time then... an important part of using Angular and not hating it is to forget jQuery exists. I am a big fan of ng-book (https://www.ng-book.com/), it does a pretty good job of explaining how things work in Angular, but also explains why things are and why you should do things in certain ways. If you have the option, I'd also look at TypeScript and how it works with Angular, as TypeScript really smooths out some of the warts in Angular 1.x. Angular 1.x with good TypeScript integration is pretty much what Angular2 is, minus some performance improvements. I don't think my KO projects had much jQ in them so I'm not really worried about unlearning anything except maybe the warts on jQ's XHR wrappers. All I know so far is it's an existing project using Angular and I'll cross my fingers for TS if it gets that far. Do I really need 600+ pages to go from competent front-end dev to competent Angular dev or is there a bunch of introductory stuff in that book I'll be able to skip?
|
|
#
?
Feb 2, 2016 18:10
|
|
|
Munkeymon posted:I don't think my KO projects had much jQ in them so I'm not really worried about unlearning anything except maybe the warts on jQ's XHR wrappers. All I know so far is it's an existing project using Angular and I'll cross my fingers for TS if it gets that far. Do I really need 600+ pages to go from competent front-end dev to competent Angular dev or is there a bunch of introductory stuff in that book I'll be able to skip? I don't think you'll need the entire book, I didn't. You'll probably be able to breeze through large parts of it if you get what Angular is trying to do for you, which mainly is freeing you from mucking with the DOM. If you are already familiar with client side MVC frameworks you can jump right in at something like ToDoMVC. Ng-book just does a good job of explaining the hows and why of Angular, not just provide examples, which I personally found very helpful. If you try to use Angular as jQuery or KO, you will make your life hard and hate it. If you let Angular help you and work as intended, it will be a much more pleasant experience. edit: feel free to PM me if you have specific Angular questions, I've dealt with most thorny issues Angular usually runs into, as well as integrating it with TypeScript Skandranon fucked around with this message at 18:45 on Feb 2, 2016 |
|
#
?
Feb 2, 2016 18:24
|
|
|
Skandranon posted:I don't think you'll need the entire book, I didn't. You'll probably be able to breeze through large parts of it if you get what Angular is trying to do for you, which mainly is freeing you from mucking with the DOM. If you are already familiar with client side MVC frameworks you can jump right in at something like ToDoMVC. Ng-book just does a good job of explaining the hows and why of Angular, not just provide examples, which I personally found very helpful. If you try to use Angular as jQuery or KO, you will make your life hard and hate it. If you let Angular help you and work as intended, it will be a much more pleasant experience. Oh good - I know my normal pace through a technical book or tutorial is just glacial because I want to stop and tinker with examples constantly so when I saw 600+ pages I got a little worried. I mean I know angular is supposed to be a kitchen sink but yikes, you know? I'll pick that book up if this looks like it's going to happen.
|
|
#
?
Feb 2, 2016 19:08
|
|
|
Is bootstrap 4 just dead in the water? Also I am thinking about switching from bootstrap to materialize. Are there any other CSS frameworks out there of note besides those two?
|
|
#
?
Feb 5, 2016 20:24
|
|
|
Knifegrab posted:Is bootstrap 4 just dead in the water? Also I am thinking about switching from bootstrap to materialize. Are there any other CSS frameworks out there of note besides those two? I'm switching over all my bootstrap stuff to angular-material as well. Looks way better and doesn't cause CSS conflicts nearly as much as bootstrap.
|
|
#
?
Feb 5, 2016 20:30
|
|
|
Knifegrab posted:Is bootstrap 4 just dead in the water? The last blog post was in December, and the one before that was in August. I don't think it's dead in the water, but it's certainly slow going. Knifegrab posted:Are there any other CSS frameworks out there of note besides those two? Plenty, but none have anywhere near the same popularity. Check out Zurb Foundation. I haven't played with version 6, but 5 was pretty nice in my side projects.
|
|
#
?
Feb 5, 2016 20:30
|
|
|
Wow zurb also looks good. I never know what framework to use. Bootstrap 3 is still pretty good. Materialize looks promising and Zurb Foundation also looks awesome! Is there any good metric for determining which one to utilize?
|
|
#
?
Feb 5, 2016 20:45
|
|
|
I really like Skeleton for tiny side projects that I know will never get gigantic. http://getskeleton.com/
|
|
#
?
Feb 5, 2016 21:11
|
|
|
Is there a place online ya'll would recommend for honest design feedback? My usual haunts seem to swing from one end ("Wow that non-responsive page with poo poo-brown background and pea-green text looks AMAZING keep going!") to the other ("Non-websafe color detected. All sites should be free of bells and whistles such as images and links that aren't blue"). I'd prefer something where it's more common to link to an actual build rather than inDesign/Balsalmiq/whatever mockups.
|
|
#
?
Feb 6, 2016 10:03
|
|
|
Kings Of Calabria posted:Is there a place online ya'll would recommend for honest design feedback? My usual haunts seem to swing from one end ("Wow that non-responsive page with poo poo-brown background and pea-green text looks AMAZING keep going!") to the other ("Non-websafe color detected. All sites should be free of bells and whistles such as images and links that aren't blue"). I'd prefer something where it's more common to link to an actual build rather than inDesign/Balsalmiq/whatever mockups. Here?
|
|
#
?
Feb 6, 2016 14:32
|
|
|
Am I right that Safari on iPhone cuts off the top of a web page with its menu bar? Kind of annoying. Is there any way to stop that or to force a site to go fullscreen?
|
|
#
?
Feb 6, 2016 17:19
|
|
|
fuf posted:Am I right that Safari on iPhone cuts off the top of a web page with its menu bar? Kind of annoying. Is there any way to stop that or to force a site to go fullscreen? It does not, and the only way your site can go fullscreen is with a meta tag if your users save it to their homescreen.
|
|
#
?
Feb 6, 2016 18:17
|
|
|
Chenghiz posted:It does not, and the only way your site can go fullscreen is with a meta tag if your users save it to their homescreen. You still have the black bar at the top with the clock though.
|
|
#
?
Feb 6, 2016 19:33
|
|
|
Chenghiz posted:It does not ugh then I guess I just suck at web design
|
|
#
?
Feb 6, 2016 20:03
|
|
|
Lumpy posted:Here? I feel like you all are too good for my poo poo, I just freelance doing friends-of-friends small businesses pages in relatively simple html/css/js. I have this thread bookmarked and whenever I check it yall are talking about crazy stuff that's over my head, like computer science applied to the web. It is actually super helpful to me because I usually dig around trying to figure out what you're talking about and learn a little bit, though with my regular non-technical job I am without time to actually learn it. I was hoping for a forum that's more my speed, that's not as beginner oriented as the webdev/freelance/webdesign subreddits. Any ideas?
|
|
#
?
Feb 6, 2016 22:37
|
|
|
Eh I don't really agree with your answer. It doesn't matter if the level of the people here are above you, that just means they can correctly show you how to grow / learn.
|
|
#
?
Feb 6, 2016 22:53
|
|
|
The Dave posted:Eh I don't really agree with your answer. It doesn't matter if the level of the people here are above you, that just means they can correctly show you how to grow / learn. You're right, and I've never seen anybody here be lovely about someone trying to learn anyway. I'm not exactly a beginner anyway, just stuck in a 2011-ish rut because I never took the time to learn advanced frontend stuff when I should have. I have a few that I'm stuck on right now, I'll write something up when I get home and see what you think.
|
|
#
?
Feb 6, 2016 22:58
|
|
|
I'm right there with you. Mediocre HTML / CSS / JS skills that I never advanced to the modern age with these fancy HTML5s and flexboxes. To be fair I am a designer and rather learn more about research / user studies than code.
|
|
#
?
Feb 6, 2016 23:12
|
|
|
Semantic UI is a good css framework imo. ( to the people who were discussing those. )
|
|
#
?
Feb 6, 2016 23:42
|
|
|
Ok, here's four current sites I'm working on... three of them are ongoing which is garbling my brain and making me completely unable to view them as an outsider, as I have been staring at all of them for hours and hours by this point. Please note that none of these are optimized / minified / whatever so you might have some heavy load times. I'm pretty good at fixing that but I usually save it until the end. Also if there's some hacky poo poo in there (like vertical aligning with a 100% width/height table cell) which I also fix before launch. There's an assload of fontawesome icons too, which I usually replace with illustrations but not until the site is mostly done, cause that takes me a while and I don't like dicking around in illustrator making something we throw out. I use a few from icomoon to keep it light, like the phone icon and raquo but don't think I'm going to end up using every icon FA makes :P None of the copy text in any of these sites is staying, I have a friend write it for me. Everything on these sites now is placeholder text. 1.) Bethany Transportation - http://www.standbyspot.com/bethany having a hard time with this one because the owner is a big fan of "elegant" black/gold sites. He is a bit older and not at all tech savvy so when he sees competitors geocities sites with #000 backgrounds and gold everywhere he thinks it's hot poo poo. I want to honor his wishes but not pour too much time into a design that's going to turn away customers with some 90's looking white-on-black mess. Looking for advice on how to lighten it up but still be true to what I was asked to create. Mobile version is coming along ok, but wondering what thoughts are on the big book/call buttons. 2.) Blue Nile - http://www.standbyspot.com/blue Similar issues from a guy in the same industry. I'm going to rebuild this before launch to make it less clunky, but that's the basic idea you're seeing. I am more interested in what people think I should do about the "services" section - you can see that I just have different pages for each service, with a few changed classes and different copy. I imagine this is a perfect scenario for some sort of front end framework like angular or something. I can replace that content with my own JS as it stands, but it's no more lean or clear than the /services_whatever.php thing I have going on now. Would like to hear how you all would do this section. 3.) Kings of Vapes - http://www.standbyspot.com/vape I actually don't mind this one too much, it's only supposed to be a way for people to get the phone number for his shop. BUT design wise, I'm back and forth on whether the ~rolling vapors~ background looks like a corny flash animation or if it's subtle and cool. It's just a CSS animation so it's one line to remove if I get enough feedback saying it's lame. 4.) Hair Techniques - http://www.standbyspot.com/hair Really really struggling with this one. This guy does a non-medical procedure, but I wanted the site to look as "clinical" as possible without saying that it's a clinic. This led me to some hospital and healthcare sites, where they use a lot of these calming greys and blues. The thing is that they have lots and lots of money for UX, and I'm just one guy. My stuff ends up looking very washed out and dull by using similar colors. I also feel like I might be using too much negative space, and should tighten it up to show more info instead of jerking it to my design. I just started this one today so it's very sparse, but I would like some feedback before I continue. Heavy hat tip to https://www.cera-groupecera.com I coded my version by myself but this is definitely the most blatant "inspiration" I've ever taken. Ok that got super long but I really really would appreciate any and all feedback, no matter how harsh it gets. I don't think I'm terrible but I'm fully aware that my style is a bit outdated. That's never a problem doing these small biz sites but I'm trying to ~*grow as a person*~ and need to know where I'm falling short. Currently on an extended work vacation without friends nearby to critique so you would be helping a dude out. Hope to hear from you, The Dave. Thanks
|
|
#
?
Feb 7, 2016 00:14
|
|
|
Kings Of Calabria posted:Ok, here's four current sites I'm working on... three of them are ongoing which is garbling my brain and making me completely unable to view them as an outsider, as I have been staring at all of them for hours and hours by this point. You have mismatched tags all over the place like <section><a><div></section></a>, multiple <body> elements stacked in each other, <script> outside of <html>, and a lot of duplicate attributes like <div class="" class="">
|
|
#
?
Feb 7, 2016 00:30
|
|
|
Biowarfare posted:You have mismatched tags all over the place like <section><a><div></section></a>, multiple <body> elements stacked in each other, <script> outside of <html>, and a lot of duplicate attributes like <div class="" class=""> :/ is that a back to basics html thing? I never even noticed but ya that seems like something I would do and not notice because it works in my specific browser. What body elements am I using wrong and what should I be doing instead?
|
|
#
?
Feb 7, 2016 00:37
|
|
|
Kings Of Calabria posted::/ is that a back to basics html thing? I never even noticed but ya that seems like something I would do and not notice because it works in my specific browser. What body elements am I using wrong and what should I be doing instead? Yes. I'm surprised your links even go to the proper place when clicked, because this is really really not valid - you don't close links, so if you click the inner one, do you know deterministically which location will go to?  Code-wise your class names and etc are basically meaningless and the equivalent of <div style="width:50;height:50;">. Additionally, you're horrendously abusing tables. Every single link being a table is  Also never use to position content quote:like vertical aligning with a 100% width/height table It would be easier to literally just apply CSS vertical aligns with position/top/transform or display:table/table-cell;vertical-align For things like navbars, have to played with line-height? --- Syntax:  More nested tags that are illegal to nest:  --- I am actually curious as to why you would do this, I want to hear your reasoning on it:   CSS supports letter-spacing. Impotence fucked around with this message at 01:09 on Feb 7, 2016 |
|
#
?
Feb 7, 2016 00:51
|
|
|
The only thing I can really defend is the use of tables, that's just a quick and dirty way I vertically align things in rough drafts. Usually I'll do it the right way in a final version, but I'd be lying if I said I don't sometimes say gently caress it when my go-to display: table-cell; vertical-align: middle; vertical alignment thing don't work as expected. This doesn't come up a lot because I rarely use fixed heights and center things with equal padding. But I hear ya, that's something that works for me but wouldn't fly in any kind of collaborative environment. As for the naming of the classes, what's the standard for people that work at agencies etc? I'm in the habit of calling things left/right/one/two/top/bottom and so on.... I thought I was being all cutting edge by simplifying class names but are you saying I should be more descriptive?
|
|
#
?
Feb 7, 2016 01:04
|
|
|
The last part is just 
|
|
#
?
Feb 7, 2016 01:09
|
|
|
Just saw your editBiowarfare posted:I am actually curious as to why you would do this, I want to hear your reasoning on it: That's related to the CSS animation on load, the effect is staggered from left to right, each span is shown differently. Now that you pointed it out I realize that it makes sense when I'm working locally with instant downloads, but doesn't really serve a purpose when the page is loading from the server and isn't seen anyway. The effect is a text shadow that's the same color as the page background so unless the rest of the page is preloaded it's just grey on grey, and I have the whole thing set so 1s or something so it's a bit useless. Kings Of Calabria fucked around with this message at 01:14 on Feb 7, 2016 |
|
#
?
Feb 7, 2016 01:10
|
|
|
Biowarfare posted:I'm surprised your links even go to the proper place when clicked, because this is really really not valid - you don't close links, so if you click the inner one, do you know deterministically which location will go to? Oh jeez :/ what would be the correct way to have the inset booking button be a link to instantly book, but have the container itself be a link to another page with more info? Typing it out it just sounds like bad UI, which I don't doubt. But my original idea was a link within a link. Kings Of Calabria fucked around with this message at 01:28 on Feb 7, 2016 |
|
#
?
Feb 7, 2016 01:26
|
|
|
|
| # ? May 10, 2024 21:41 |
|
|
Are you using any kind of IDE? Most good editors would throw a complaint about these kinds of things. You can just ram the site through an HTML validator to get some basic warnings about your syntax. 1.) Bethany Transportation - http://www.standbyspot.com/bethany Kings Of Calabria posted:1.) Bethany Transportation - http://www.standbyspot.com/bethany I quite like this design in general. The look and feel is pleasant and modern, and bug buttons don't irritate me because they're so obvious I know exactly what they're going to do. My only gripe is that the "landing page" - the top part of the page - doesn't have any call-to-action. The hero image is literally the business version of "look how big my cock is" and provides absolutely no utility. That little arrow thingie in the right hand side is the bit you have to click on in order to shunt down to something useful, and that's a waste of a click. Instead, I kinda expected the bullshit "24 / 7 SERVICE", "LUXURY VEHICLES" and "DECADES AHEAD" to be where I'd find the CTA, but they don't do anything. I get that it's supposed to be clean and sheen and glimmery, but the homepage - the landing page - is the most important page on the site. The eye-catching are you have now isn't pulling me towards an action, and it's distracting me away from the menu, which is the only thing that performs an action. Now, you don't have to put buttons there. You could just make the whole thing a click-to-scroll so you end up moving down the page. Further to that, when you do scroll, you end up at the "Distinguished Elegance Abounds." section. Frankly as a visitor I don't give a poo poo. I then have to scroll past "Boston's Best for Thirty Years." until I finally get to the "A Full Service Transportation Company." section which has the stuff I want to use. As a quick fix I'd suggest just shunting the buttons section to below the hero image. That'll mean when I click or manually scroll I instantly find the tools I'm looking for. If I want to know more about how many blowjobs the drivers give during the journey, I can keep scrolling down further and look at the pretty design elements. Talking of buttons; I'm conflicted about the hover style. I really like the dull hashing overlay, but it makes them all look so dull and washed out until you mouse over something. I can't help but feel that's detrimental to the shiny design you're going for. Why I'm conflicted, is I think inverting the effect (so the hover causes the dimming) is counter-intuitive. What if instead of a grey stripe on idle, it was a gold (or black) stripe on hover? Also, fix the ugly TITLE tag. Kings Of Calabria posted:2.) Blue Nile - http://www.standbyspot.com/blue See, you know what you're doing. Look at the homepage. That's got the CTA and enough info that I know exactly what's going on. First issue I noticed was clicking "Learn More" scrolls the window down so far that the sticky-nav obscures the title "We're your luxury [...]" The hover on the point-to-point shows that the icon is off-axis, so when it spins it jitters. It's also a bit too fast and doesn't feel luxurious it feels panicked. Quicklinks "Return to Homepage" can just be "Home". I don't think there's any confusion about what that will do, and "homepage" is a horrible word. There's something weird going on with the tail-end of "Get Quotes & Book Online" Contact items could have tel: links, google maps link. Same could be said for everything that's going on in the Contact page. The "Book now" button, or basically anything that opens that booking modal is a little bit annoying. It spends ages with that modal spinner which is ugly as gently caress. You could use something like Ladda to turn the button into a spinner until the content can be dumped in the users lap. Also the close button for the modal is totally non-standard and confusing. Really there should be a tiny X in the top right corner, as well as a red "cancel" button inside the modal. Onto your original question; I have no gripe about the Services section UI as it stands, but the page load does seem a bit unnecessary. On a plus side, you'll get Google indexing and the ability to link to the individual sections really easily, if that's important to you. I'd avoid Angular here as it's total overkill for a site which won't leverage it anywhere else. You can do the same poo poo with Bootstrap tabs which would eliminate the page load, and you can still link by fragment (/services#roadshows). Kings Of Calabria posted:3.) Kings of Vapes - http://www.standbyspot.com/vape I quite liked the clouds. If you think it's too much just slow it down by half and make it even more subtle. It's ever so slightly distracting. What's more distracting is the King logo, which I thought would be clickable somehow, as it's so drat eye catching, in contrast to their phone number which was the last thing I saw. I think your tel: shouldn't have //. [map] really doesn't need to be super-script. It could be reveal on hover? The entirety of the "have a question" could also be the email link. It's weird they both have the same style but only half is a link. Kings Of Calabria posted:4.) Hair Techniques - http://www.standbyspot.com/hair I got nothing. It's fairly unobtrusive and I don't mind it, but I'm not a designer. Kings Of Calabria posted:Oh jeez :/ what would be the correct way to have the inset booking button be a link to instantly book, but have the container itself be a link to another page with more info? Typing it out it just sounds like bad UI, which I don't doubt. But my original idea was a link within a link. You can use absolute/relative positioning to move a button over the top of another link, which fixes the nesting semantics.
|
|
#
?
Feb 7, 2016 01:43
|
|
