• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

So I recenrly quit my development job and am looking to get back into design again. I'm redoing my resume and have been looking around at some sites with example resume designs to get some ideas.I'm a much more minimal designer and apart from a small handful these look awful to me:

http://theultralinx.com/2013/08/20-cool-resume-cv-designs.html

Everything is so overdone and gaudy anymore, is this was people are expecting these days or are these just the extreme

Those resumes would get ignored by me. Too much going on. I read a resume for information, not to be impressed by design. Portfolio on the other hand can be all decked out.
 

Dopus

Banned
I'd love to get some feedback for a personal project that I'm working on.

Here are some of the mockups I've done so far.






And I've just started on the 'Feeds' page. This of course needs a lot of work, but I think it's a little too much like Facebook right now. I don't know.

 

Tathanen

Get Inside Her!
What I'm assuming is that the value of select is determined by the OPTION value of whatever is chosen in the dropdown menu. If that's true then what I need to make happen those is to execute the JS function in <SELECT> but I'm not sure on how to add the function to it.

The select event you're looking for is "change," or "onChange." Test for the value of the select element when that event fires.
 
I absolutely love these blog posts by Jenn Schiffer. Here's a new one (I think it's new. I can't find a date):

Eschew IDEs and Text Editors for Pure Close-to-the-Metal Web Development


#dead

Here's an older one that made the rounds a little while back:

How Node.js is Going to Replace JavaScript

Shes hilarious on Twitter. I remember when the "deprecate your CSS" post dropped and a lot of devs and designers who had no clue it was all a joke started bashing her and just totally flipping out. Shes great
 

Divius

Member
Do you guys have any go-to contact/mailforms that you use? It's something that gives me headaches from time to time, with stuff ending up in gmail spamfilters etc.
 

Tathanen

Get Inside Her!
I became self employed recently and just launched my website.

http://kubrick.be/

Comments/improvements are definitely welcome!

I like this a lot, some slick and quick animation, I might put a little more work into the responsive design bits though. In particular just actually resizing your main logo when at iOS resolution, and reducing the size of some of the body text. Right now a phone visitor would land on the site with it looking a bit broken, with the big logo cut off part-way.
 

smuf

Member
I like this a lot, some slick and quick animation, I might put a little more work into the responsive design bits though. In particular just actually resizing your main logo when at iOS resolution, and reducing the size of some of the body text. Right now a phone visitor would land on the site with it looking a bit broken, with the big logo cut off part-way.

Thanks for the comments! It looks fine on my iPhone, logo scales down nicely. What did you try it on? I'll decrease the font sizes on smaller screens.
 
anyone have any recommendations for sites to find freelance work?

Theres oDesk, Freelancer.com, https://juiiicy.com/ as well. But honestly, unless you can get into Juiiicy, the first two will be full of shit work.

Do you have a portfolio up? One thing I did when I used to freelance was hit up agencies and small studios and ask if they needed any freelance help. This has proven to be very successful for me and I found 2 clients this way that gave me about 6 months worth of work. You dont have anything to lose. Just make sure your work is as good as, if not better than the agencies you contact.
 

kodecraft

Member
Theres oDesk, Freelancer.com, https://juiiicy.com/ as well. But honestly, unless you can get into Juiiicy, the first two will be full of shit work.

Do you have a portfolio up? One thing I did when I used to freelance was hit up agencies and small studios and ask if they needed any freelance help. This has proven to be very successful for me and I found 2 clients this way that gave me about 6 months worth of work. You dont have anything to lose. Just make sure your work is as good as, if not better than the agencies you contact.

Truth.
 

Tathanen

Get Inside Her!
Thanks for the comments! It looks fine on my iPhone, logo scales down nicely. What did you try it on? I'll decrease the font sizes on smaller screens.

Hm, that's interesting. It scales down correctly on my phone (Galaxy Nexus), I was checking it before using Firefox's responsive design view, which is basically just shrinking down the browser window. I just checked in Chrome, it resizes correctly there as well. Guess it's just a Firefox thing!
 

smuf

Member
Hm, that's interesting. It scales down correctly on my phone (Galaxy Nexus), I was checking it before using Firefox's responsive design view, which is basically just shrinking down the browser window. I just checked in Chrome, it resizes correctly there as well. Guess it's just a Firefox thing!

I managed to fix the Firefox issue with some css hackery. Seems like Firefox handles scaling inline SVG's differently. Thanks for noticing!
 
Quick question, do professional developers consider it cheating to use wordpress and a dynamic theme for smaller sites? If it's not cheating, at what point does the site get complex enough that you have to learn real site building techniques?
 

pxleyes

Banned
Quick question, do professional developers consider it cheating to use wordpress and a dynamic theme for smaller sites? If it's not cheating, at what point does the site get complex enough that you have to learn real site building techniques?

Define cheating? I would consider using a template cheating, but a platform in general? Hell no. Use what you want. If it gets the job done, who is anyone to judge? Now if you pawn off a theme/template's HTML/CSS as your own, then you are are cheating.
 
Define cheating? I would consider using a template cheating, but a platform in general? Hell no. Use what you want. If it gets the job done, who is anyone to judge? Now if you pawn off a theme/template's HTML/CSS as your own, then you are are cheating.

I've been looking, and can't find what I had used years ago... There was a WP theme that basically had a stupid easy GUI that let you build a very customized site based on using WP for your CMS. I always felt that there must be some security loophole or something scary since it was so easy. The guy charged like $20 to be able to remove his branding and call it your own.
 

Ecto311

Member
I am in need of a form that allows me to check a few things and write some notes then below that there is an output box that allows you to copy and paste the info from above.

So it would look something like this
[X] 1
[X] 2
[] 3
--------------------------------------------
Notes here in a box

--------------------------------------------
________________________________
Output:

1 - yes
2 - yes
3 - NO

Notes written above
__________________________________

Everything in the "output" area would be selectable and copied from there and pasted from the clipboard.



I am lost on how to even start here - it would be in a sharepoint page and used for repetitive notation over time. So click a few different options and notate in a box with output that can be pasted elsewhere showing all that info.


I dont need a button to activate the output but its ok if its needed. Ideally there would be a lower box that changes as notes are put in and allows me to copy from there with no other buttons being clicked.


Thanks for any places to get more info or even a skeleton outline of what would work.
 
I think you mean free, but you pay for the quality of the fonts. *shrug*

Well I already pay for Creative Cloud so I get TK for free. But I find Google fonts much quicker to implement, especially for working locally. TK obviously has a much better catalogue.
 

JuxJuxJux

Member
I became self employed recently and just launched my website.

http://kubrick.be/

Comments/improvements are definitely welcome!

Your header bar is massive. I like negative space, but you might want to consider collapsing it once a user starts scrolling. Once I hit the 'About Us' section, I feel overwhelmed with text. Be concise. People will reach out if interested. The section between 'About Us' and 'What We Do' (paginated image gallery) doesn't tell me anything about you or your company. Combine it with 'What We Do' if you want to keep it.

There are also no examples or social proof of your work. I recommend adding that if you want a steady stream of clients. Speaking from experience, people will want to see your work so they can imagine their brand or company in your style.

Best of luck.
 

Somnid

Member
I am in need of a form that allows me to check a few things and write some notes then below that there is an output box that allows you to copy and paste the info from above.

So it would look something like this
[X] 1
[X] 2
[] 3
--------------------------------------------
Notes here in a box

--------------------------------------------
________________________________
Output:

1 - yes
2 - yes
3 - NO

Notes written above
__________________________________

Everything in the "output" area would be selectable and copied from there and pasted from the clipboard.



I am lost on how to even start here - it would be in a sharepoint page and used for repetitive notation over time. So click a few different options and notate in a box with output that can be pasted elsewhere showing all that info.


I dont need a button to activate the output but its ok if its needed. Ideally there would be a lower box that changes as notes are put in and allows me to copy from there with no other buttons being clicked.


Thanks for any places to get more info or even a skeleton outline of what would work.

You can't manipulate the clipboard without a plugin, at least anytime soon. The best you can do is append text to a textarea as things are clicked/typed. You can also select all if they click the textarea, but that's as far as web native will go.
 

Ecto311

Member
You can't manipulate the clipboard without a plugin, at least anytime soon. The best you can do is append text to a textarea as things are clicked/typed. You can also select all if they click the textarea, but that's as far as web native will go.
Code:
<!DOCTYPE html>
<!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1212126#post1212126 -->

<html>
<body>

<form>
<input onclick="clickCh(this)" type="checkbox" value="10"> $10.00<br>
<input onclick="clickCh(this)" type="checkbox" value="12"> $12.00<br>
<br>
<input id="totalValue" type="hidden" value="0">
<div id="totalDisplay"></div>
</form>

<script type="text/javascript">
function clickCh(caller) {
  var total = document.getElementById("totalValue").value*1;
  if(caller.checked){ total += caller.value*1; }
               else { total -= caller.value*1; }
  document.getElementById('totalValue').value = total;
  document.getElementById('totalDisplay').innerHTML
    = 'Total: $'+total.toFixed(2)+'<p>6% = $'+(total*.06).toFixed(2);
}
</script>

</body>
</html>

I found this - it does almost everything I need but it does math and I would not need that part of it - so this when checked displays the amount next to the box below it, but when the other things are checked it adds them together. So ideally I would need this kind of a thing but when they are clicked then it spits out the item clicked

[x] thing

output
thing - yes

and then below the buttons a box that when typed into displays below the checked boxes on the output - I understand that the clipboard cannot be used and thats cool it could be just a box with a button that says copy and then dump it? I use a share point at work that does something similar already but I don't have access to the code to strip it down right now.
 

Timan

Developer
Actually have a web html/css question for those who have experience with responsive sites.

So heres what I'm trying to figure out how to do.

I need to code a design that has the following type of content.

boixrEk.png


So here are the problems. How can I float the blockquote style content to where the text wraps around it? I "can not" have the block quote before the paragraph text or inside it. It needs to come after it in the html (so it stacks on the smaller breakpoint pages).

Anyone have any ideas how to do something like this?
 
Soooo, I'm a 3D/Motion Designer. I am thinking of starting giving another go at freelance work, but this time make it much more offical and have company branding. I'd say my actual graphic design skills are at intermediate level? So I could potentially do it myself but I am actually gonna hire a friend who is a amazing graphic designer to help me with the branding and webpage layout. What is the best website service to use? I am assuming its still squarespace and I can easily plug in the designs to make it very customized? Also anyone have experience with the store service?
 

Somnid

Member
Code:
<!DOCTYPE html>
<!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1212126#post1212126 -->

<html>
<body>

<form>
<input onclick="clickCh(this)" type="checkbox" value="10"> $10.00<br>
<input onclick="clickCh(this)" type="checkbox" value="12"> $12.00<br>
<br>
<input id="totalValue" type="hidden" value="0">
<div id="totalDisplay"></div>
</form>

<script type="text/javascript">
function clickCh(caller) {
  var total = document.getElementById("totalValue").value*1;
  if(caller.checked){ total += caller.value*1; }
               else { total -= caller.value*1; }
  document.getElementById('totalValue').value = total;
  document.getElementById('totalDisplay').innerHTML
    = 'Total: $'+total.toFixed(2)+'<p>6% = $'+(total*.06).toFixed(2);
}
</script>

</body>
</html>

I found this - it does almost everything I need but it does math and I would not need that part of it - so this when checked displays the amount next to the box below it, but when the other things are checked it adds them together. So ideally I would need this kind of a thing but when they are clicked then it spits out the item clicked

[x] thing

output
thing - yes

and then below the buttons a box that when typed into displays below the checked boxes on the output - I understand that the clipboard cannot be used and thats cool it could be just a box with a button that says copy and then dump it? I use a share point at work that does something similar already but I don't have access to the code to strip it down right now.

I think you need a function that loops through all inputs, returns a string, and append that to the output box on any input change. Otherwise if they uncheck a box after checking it you're kinda screwed.
 

JuxJuxJux

Member
Soooo, I'm a 3D/Motion Designer. I am thinking of starting giving another go at freelance work, but this time make it much more offical and have company branding. I'd say my actual graphic design skills are at intermediate level? So I could potentially do it myself but I am actually gonna hire a friend who is a amazing graphic designer to help me with the branding and webpage layout. What is the best website service to use? I am assuming its still squarespace and I can easily plug in the designs to make it very customized? Also anyone have experience with the store service?

I've used Squarespace for years, and would recommend their services in a heartbeat. Some of their tools have been dumbed down over the years, but overall, it's an extremely powerful solution. Can't beat getting a responsive site out of the box, either.

Weebly would be a good second option. Their templates have been improving recently, and they do have mobile solutions.

If your friend is experienced with up-to-date web technologies (design and dev), get them to do the whole thing if you can work it out. Nothing beats custom.

This is my new site (as of yesterday) on Squarespace, for reference. Feel free to ask any questions about the service, I'd be happy to answer anything.
 

smuf

Member
I like your style/site man.
Thanks!

Your header bar is massive. I like negative space, but you might want to consider collapsing it once a user starts scrolling. Once I hit the 'About Us' section, I feel overwhelmed with text. Be concise. People will reach out if interested. The section between 'About Us' and 'What We Do' (paginated image gallery) doesn't tell me anything about you or your company. Combine it with 'What We Do' if you want to keep it.

There are also no examples or social proof of your work. I recommend adding that if you want a steady stream of clients. Speaking from experience, people will want to see your work so they can imagine their brand or company in your style.

Best of luck.
Thanks for the feedback!

The header bar should collapse when scrolling - what browser are you using? I tried replicating the problem but couldn't.

I'm well aware of the lack of examples, it's something I will definitely be adding over time as my portfolio expands.
 

Tathanen

Get Inside Her!
Actually have a web html/css question for those who have experience with responsive sites.

So heres what I'm trying to figure out how to do.

I need to code a design that has the following type of content.

boixrEk.png


So here are the problems. How can I float the blockquote style content to where the text wraps around it? I "can not" have the block quote before the paragraph text or inside it. It needs to come after it in the html (so it stacks on the smaller breakpoint pages).

Anyone have any ideas how to do something like this?

One thing you could consider is indeed putting the blockquote before or inside the paragraph for your normal float usecase, and then when you want it to stack responsively, do so with something like this:

Code:
<style>
     article { position: relative; padding-bottom: 200px; }
     blockquote { position: absolute; bottom: 0px; height: 200px; }
</style>

<article>
     <p>blah blah <blockquote>quote quote quote</blockquote> blah</p>
     <p>blah blah blah</p>
</article>

Where the bottom padding on the article matches the height of your blockquote. Effectively puts it pinned to the bottom of the article tag, no matter where it lives within the HTML.

I can think of a million reasons this wouldn't actually work for you, like needing CSS that applies to blockquotes of any height, but it might be a good start.
 

JuxJuxJux

Member
Thanks for the feedback!

The header bar should collapse when scrolling - what browser are you using? I tried replicating the problem but couldn't.

I'm well aware of the lack of examples, it's something I will definitely be adding over time as my portfolio expands.

I'm using Chrome. I should've been more descriptive. The bar does collapse from it's initial state once I start scrolling, but the collapsed version still makes me feel confined.

I understand the content part, my site is near empty right now. I assumed you were interested in getting clients right away, so that's why I brought it up.

You definitely have graphic design chops (I like your mark and icons a bunch). Do you have any UX experience?
 

smuf

Member
I'm using Chrome. I should've been more descriptive. The bar does collapse from it's initial state once I start scrolling, but the collapsed version still makes me feel confined.

I understand the content part, my site is near empty right now. I assumed you were interested in getting clients right away, so that's why I brought it up.

You definitely have graphic design chops (I like your mark and icons a bunch). Do you have any UX experience?

I've got no specific UX experience or training. I see myself as a front-end developer foremost but I dabble in a bit of everything since I do most projects all by myself.
 
I'm using it right now, and quite like it but I'm only doing the simple stuff at the moment.

Well worth giving it a shot as they have a two week trial period.

Also, get Silver, not Gold to begin with. The extra videos you get as a gold member seem to be better for people who have a little more experience.
 

Rubbish King

The gift that keeps on giving
Hey guys, newbie here looking to get into the field. Going to university to study Engineering & Tech and I'm planning to learn more about Web Development on the side, over the summer I'm doing some research and experimenting with a few programs I've seen in here and well I just thought I'd make myself known before I start relentlessly lurking ^_^

Also from what I've seen so far.. you guys know your shit!

Tash
 
Has anyone give Treehouse a shot? I'm curious about going all in and I was wondering if anyone had any impressions.

Treehouse videos are good but they severely lack actual problems to do. Whereas CodeSchool has a lot of problems to solve but you'll need some prior exposure to the material otherwise you might struggle a bit.
 

kodecraft

Member
Treehouse videos are good but they severely lack actual problems to do. Whereas CodeSchool has a lot of problems to solve but you'll need some prior exposure to the material otherwise you might struggle a bit.

I agree with this. Out of the CodeSchools, Treehouses, Udemy's of the world, there isn't a one stop shop to getting 'deep' in web design/dev. I learn by looking at something on the web I would love to re-create, then I find out HOW to do it.
 

jdavid459

Member
Hey guys -

I'd like to create a website geared towards hip hop/music similar to http://www.rapradar.com with more long-form pieces and possible added features to keep a playlist/store of favorite tracks and artists that have been posted.

Is this a big undertaken? How should I get started? Would a simple WordPress style website be able to do this?

thanks!
 

smuf

Member
Any thoughts on CMS systems? Is Wordpress still king? Any better alternatives? Preferably more secure.

I've been using Drupal 7 for the last 2+ years. Out of the box it has a lot of shortcomings but modules fix most of the annoyances (my main pet peeve being the godawful markup it spits out by default). Definitely like it better than my brief strokes with Wordpress and Joomla.
 
Top Bottom