• 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

Z

Zombie James

Banned
Anyone know what tool Paul Irish uses for his slides? Was watching one of his talks and he edited one of the slides using Markdown, but I'm not sure what it was. Have a presentation coming up in a few weeks and I wouldn't mind something that doesn't depend on PowerPoint.
 
U

usea

Member
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

article said:
I have always said that 10% of programming is writing code and the other 90% is choosing and learning the tools used in writing said code.

If you think about it. I am correct.
Click to expand...
#dead

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

How Node.js is Going to Replace JavaScript
 
Tathanen

Tathanen

Get Inside Her!
DFkHu9p.png
 
C

cartoon_soldier

Member
usea said:
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
Click to expand...

Err...If I don't use text editors and IDEs do I just write my code directly on the server hard drive? I mean how is that supposed to work.

I assume I am missing the point completely...
 
S

Somnid

Member
cartoon_soldier said:
Err...If I don't use text editors and IDEs do I just write my code directly on the server hard drive? I mean how is that supposed to work.

I assume I am missing the point completely...
Click to expand...

It's parody, but it's hard to tell because it doesn't seem to have a point and thus the punchline isn't obvious. Making fun of hipsters and gym bros works because we understand these groups conceptually but I'm not aware of a conceptual group of developer bloggers who fundamentally misunderstand things in quite this way.
 
C

Cromat

Member
Are all of the WYSIWYG editors crap? I'm trying to create a Web app and I would rather focus on the backend stuff (written in Python) while just have an easy and workable way of creating UI. Learning HTML5, JavaScript and CSS properly would be best but honestly that's too daunting for now.
 
C

cartoon_soldier

Member
Somnid said:
It's parody, but it's hard to tell because it doesn't seem to have a point and thus the punchline isn't obvious. Making fun of hipsters and gym bros works because we understand these groups conceptually but I'm not aware of a conceptual group of developer bloggers who fundamentally misunderstand things in quite this way.
Click to expand...

Oh whew, that makes sense.
 
G

gutshot

Member
Cromat said:
Are all of the WYSIWYG editors crap? I'm trying to create a Web app and I would rather focus on the backend stuff (written in Python) while just have an easy and workable way of creating UI. Learning HTML5, JavaScript and CSS properly would be best but honestly that's too daunting for now.
Click to expand...

Most are, yeah. This one sounds promising though.

http://macaw.co/
 
A

APF

Member
Cromat said:
Are all of the WYSIWYG editors crap?
Click to expand...
Yes, especially if you don't really know what's going on underneath the hood (but if you did you probably wouldn't need to use one). I suggest using an HTML/CSS framework like Bootstrap http://getbootstrap.com/ if you're not particularly interested in learning frontend technology but want to present something that has a solid and consistant look and feel.
 
S

Somnid

Member
Cromat said:
Are all of the WYSIWYG editors crap? I'm trying to create a Web app and I would rather focus on the backend stuff (written in Python) while just have an easy and workable way of creating UI. Learning HTML5, JavaScript and CSS properly would be best but honestly that's too daunting for now.
Click to expand...

Always and it's unfixable, nobody will get it right. Part of it is because CSS sucks and has a lot of limitations (especially when you aren't on latest and greatest browsers). You need to implement hacks or use more HTML than is necessary a lot of times but it's totally situation dependant, there's no generalized way to do it. The other is that it interacts with code and should be semantic which is impossible for something to generate appropriately because you have to know the underlying document structure to do that.
 
t-storm

t-storm

Member
Dear expert web developers and site owners, what are some of the most effective ways to make revenue from a web site? I hope to launch my own web site geared toward a particular large but specific audience in the coming weeks and I think I'll secure the domain, build it and have it hosted it on Godaddy. I was looking at their cash parking option. I was also going to reach out to stakeholders/interested parties and let them be featured/have temporary real estate on my web site. However, I have no idea what the standard is on this in terms of pricing and what would be realistic in charging them. Anyone knowledgeable in this area that can help me out?
 
G

Ghost

Chili Con Carnage!
Has anyone made a Web Widget? I've got a service I need to plug in to someone else's website and I'm just trying to decide whether to use iframes or to write into the DOM, any experiences either way?
 
M

Mysterious

Banned
Hi guys! I've been wanting to expand outside the basic HTML, CSS and PHP skill set.

If I am wanting to create the fancy "animated" single paged scrolling websites, which framework would you recommend and why: Angular or jQuery? I am really new to this stuff, so if my question is a poor question, I offer my apologies.

Looking forward to being a part of this community! :)
 
H

Hop

That girl in the bunny hat
Mysterious said:
Hi guys! I've been wanting to expand outside the basic HTML, CSS and PHP skill set.

If I am wanting to create the fancy "animated" single paged scrolling websites, which framework would you recommend and why: Angular or jQuery? I am really new to this stuff, so if my question is a poor question, I offer my apologies.

Looking forward to being a part of this community! :)
Click to expand...

My opinion: AngularJS is probably better, since it works well specifically for fancy single-page application site styles. But, jQuery tends to be more "intuitive" for people, it seems, so that might be good for where you're at.
 
Tathanen

Tathanen

Get Inside Her!
Mysterious said:
Hi guys! I've been wanting to expand outside the basic HTML, CSS and PHP skill set.

If I am wanting to create the fancy "animated" single paged scrolling websites, which framework would you recommend and why: Angular or jQuery? I am really new to this stuff, so if my question is a poor question, I offer my apologies.

Looking forward to being a part of this community! :)
Click to expand...

jQuery is about a million times easier to wrap your head around conceptually, and potentially better for websites where you're just trying to make some fancy animations around largely static content. Where Angular really shines is in building a fully-fledged web "application," where you're doing a lot of AJAX navigation and significant data binding/manipulation via API endpoints. Huge learning curve, but once you know it you'll want to use it for everything.

I'd probably recommend jQuery for what I imagine your particular usecase and experience-level is.
 
R

Ruud_Luiten

Member
Ghost said:
Has anyone made a Web Widget? I've got a service I need to plug in to someone else's website and I'm just trying to decide whether to use iframes or to write into the DOM, any experiences either way?
Click to expand...
WCAG2 would like DOM as a solution.

question, if 11px is the default gont-size (100%), what would be best for tables and smartphones??
 
S

Somnid

Member
Ghost said:
Has anyone made a Web Widget? I've got a service I need to plug in to someone else's website and I'm just trying to decide whether to use iframes or to write into the DOM, any experiences either way?
Click to expand...

iframes are sandboxed and a bitch for anyone to style so keep that in mind. Most things tend to use a short script tag that loads in a bigger script which then hunts for the first script tag and replaces/inserts next to the DOM for the widget. Honestly both ways suck and are messy but the second is the most flexible.

Testicular Sound Express said:
wouldn't you still need some onload jquery to get it to trigger though?
Click to expand...

To get the initial trigger do your loading logic and then when it's done change the class on the parent element to something like "loaded" and tie your transition to that.
 
A

ab.aeterno

Member
Would it be feasible to create a client-side only webapp that can store information using a completely dynamic, user-defined schema?

I like to make a small project that uses Javascript only to allow CRUD on objects whose schema is defined by the user. Like, if I want to store "tasks," and have a field of "bananas" because why the fuck not, being able to store, retrieve, and make editable a field for "bananas."

I've got a lot of the front-end and middle logic sort of pseudocoded in my mind of how it fits together, but actually storing and retrieving the data seems like one of the harder tasks. I'm thinking a type of NoSQL that works like SQLite would work best, but if it would work well, and integrate well with something like Angular, remains the question.
 
H

Hellix

Member
Has anyone had experience implementing a SAML SP-initiated SSO in .NET? Being new to the whole process, it is a bit confusing for me. I haven't really found any good sources online. It seems like ComponentSpace simplifies the process for you, but I may have to go with the IdentityModel namespace in .NET. I haven't really found a good source I could go off of using .NET's library outside of Microsoft's own documentation, but the opposite seems true for ComponentSpace. Not sure if it would be easier/faster to go with that.
 
S

smuf

Member
Somnid said:
iframes are sandboxed and a bitch for anyone to style so keep that in mind. Most things tend to use a short script tag that loads in a bigger script which then hunts for the first script tag and replaces/inserts next to the DOM for the widget. Honestly both ways suck and are messy but the second is the most flexible.



To get the initial trigger do your loading logic and then when it's done change the class on the parent element to something like "loaded" and tie your transition to that.
Click to expand...

Better to assign a loading class to the body through JS. (With body.loading elements set to opacity: 0 in css). Then once it's loaded remove the loading class. That way your site won't end up invisible for whatever tiny percentage of users has JS disabled.
 
S

smuf

Member
What do you guys think about ditching Photoshop for design?

I'm kind of considering dropping it for my next client project in favour of just wireframing most of the site and providing style tiles. Since I find it incredibly time consuming to iterate on designs in Photoshop compared to plain SASS/CSS, despite having years of PS experience. Not to mention the lack of a proper way to showcase fluid/responsive designs without having to create multiple PSD's.
 
K

Kinitari

Black Canada Mafia
smuf said:
What do a guys think about ditching Photoshop for design?

I'm kind of considering dropping it for my next client project in favour of just wireframing most of the site and providing style tiles. Since I find it incredibly time consuming to iterate on designs in Photoshop compared to plain SASS/CSS, despite having years of PS experience. Not to mention the lack of a proper way to showcase fluid/responsive designs without having to create multiple PSD's.
Click to expand...

I'm still new to design - but I think there are better tools out there. If you haven't taken a look at it yet, look at Sketch. It's a much better fit for web design, it Makes its case for itself better than I can, check it out.
 
A

Antiwhippy

the holder of the trombone
BTW, what do you guys think of sites like squarespace?

Doing a web coding course now to complement my training in graphic design.
 
P

Prine

Banned
RustyNails said:
What do you guys think of our website www.cloudriftsolutions.com ? Me and my brother designed it. Its based off a template. It's still work in progress but we like the layout and corporate speak.
Click to expand...

Quick thoughts:
- Move JS to bottom of page
- Way too large (1.4mb!) http://cloudriftsolutions.com/wp-content/themes/roots/assets/img/hero.jpg reduce this
- Another large image (almost 1mb) http://cloudriftsolutions.com/wp-content/themes/roots/assets/img/about_bg.jpg this too!

<3 Bootstrap 3
 
I

Im a Manatee

Member
If I want to make a website to host my resume, pdfs / pictures of projects, and a bit of writing about those. should I do bootstrap or just settle for squarespace?
 
K

kodecraft

Member
RustyNails said:
What do you guys think of our website www.cloudriftsolutions.com ? Me and my brother designed it. Its based off a template. It's still work in progress but we like the layout and corporate speak.
Click to expand...

Nice work, I figured it was a template though. I see a lot of corporate designs with this particular set-up. Foundation has some templates like this also, which an instructor of mine is having us utilize.
 
C

ckohler

Member
Im a Manatee said:
If I want to make a website to host my resume, pdfs / pictures of projects, and a bit of writing about those. should I do bootstrap or just settle for squarespace?
Click to expand...

Honestly, if you have little to no web dev experience you should just use Squarespace. No need learning to code websites unless you have to.
 
R

RustyNails

Member
gutshot said:
Looks good, man. Is all the content going to live on the home page or will there be inner pages?
Click to expand...
All on the home page. We figured the website is just an ad, so don't make it too much complicated.
Prine said:
Quick thoughts:
- Move JS to bottom of page
- Way too large (1.4mb!) http://cloudriftsolutions.com/wp-content/themes/roots/assets/img/hero.jpg reduce this
- Another large image (almost 1mb) http://cloudriftsolutions.com/wp-content/themes/roots/assets/img/about_bg.jpg this too!

<3 Bootstrap 3
Click to expand...
Isn't 1mb ok for today's standards? Thanks though I'll work on it.
kodecraft said:
Nice work, I figured it was a template though. I see a lot of corporate designs with this particular set-up. Foundation has some templates like this also, which an instructor of mine is having us utilize.
Click to expand...
Thanks. We were debating weather to put happy smiley people or make it more Chicago centric. Went with the latter.
 
G

goodfella

Member
I've nearly finished my first year uni course in computing, and I have a good understanding of html and css, with a bit of jquery.

Over the past few days however, I have come to realise how far the rabbit hole of web development goes. I'm excited to get into it, but I can't help but wish I started at a younger age.

Hell, I know someone who has a better understanding of coding for web than I do, and he doesn't study anything to do with computing. It just seems like there is so much to learn, and as much as I want to blaze ahead of the course, with all the other modules such as programming, it just doesn't seem feasible.

Not sure what the point of my post was, I guess I'm just excited to get to where you guys are at!
 
D

diaspora

Member
Cross-posting from the programming thread but I've hit a bit of a roadblock.

I have a somewhat rudimentary problem right now with HTML and JS. While I know how to disable a button, I'm not sure on how to make it conditional.

Right now I've got a form.

Code: 
<FORM>
    <input type="text" id="realtxt"/>
    <SELECT id="realitems">
        <OPTION value="1">
        <OPTION value="max">Enter the highest number
        <OPTION value="min">Enter the lowest number
        <OPTION value="guess">Guess a number
    </SELECT>
    <button accesskey="v" id="btnVerify" onclick="result()"> Result </button>
</FORM>

Disabling the button in JS:

Code: 
function disable()
	{
		if(document.getElementById("realitems").value === "1")
			document.getElementById("btnVerify").disabled = true;

		else
			document.getElementById("btnVerify").disabled = false;
	};

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.
 
T

Testicular Sound Express

Member
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
 
B

Bots are better than you

Banned
diaspora said:
Cross-posting from the programming thread but I've hit a bit of a roadblock.

I have a somewhat rudimentary problem right now with HTML and JS. While I know how to disable a button, I'm not sure on how to make it conditional.

Right now I've got a form.

Code: 
<FORM>
    <input type="text" id="realtxt"/>
    <SELECT id="realitems">
        <OPTION value="1">
        <OPTION value="max">Enter the highest number
        <OPTION value="min">Enter the lowest number
        <OPTION value="guess">Guess a number
    </SELECT>
    <button accesskey="v" id="btnVerify" onclick="result()"> Result </button>
</FORM>

Disabling the button in JS:

Code: 
function disable()
	{
		if(document.getElementById("realitems").value === "1")
			document.getElementById("btnVerify").disabled = true;

		else
			document.getElementById("btnVerify").disabled = false;
	};

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.
Click to expand...

Maybe i missed it, but where are you calling the function? Are you calling it when the document/window has loaded? And i think for it to work as intended, you need to call it everytime the select is updated (by selecting values).

I assume you use plain JavaScript, or do you use jQuery too?
 
K

kodecraft

Member
Testicular Sound Express said:
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
Click to expand...

IMO, as a designer you should just keep working on your craft.

You stated being a 'minimal designer' I'm not sure if there is such a thing, there are minimal designs out there yes, but it's because that's the trend now.

Flat designs are in until that changes when minimal design isn't the rave anymore and you are JUST a minimal designer, where does that leave you?
 
P

phillipgessert

Member
Testicular Sound Express said:
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
Click to expand...

Never do a resume like this, unless your objective is getting bounced around on shitty design 'inspiration' sites rather than actually finding work.
 
You must log in or register to reply here.

Similar threads

Do game developers still want to publish on Xbox? A survey of independents and small studios
39
4K
SNG32 replied
The State of Xbox Game Studios and Bethesda Softworks: A breakdown of all the Confirmed Projects, Leaks, and Rumors
Opinion News Rumor 2
84
12K
Ozriel replied
As translation technology improves, game localizations are getting worse
2
65
7K
Cyberpunkd replied
An Introduction To Japanese Adventure Games pt.1 - What They Are and The Different Types
Analysis
47
14K
SlimeGooGoo replied
GAFs big house of Linux |OT| for gamers, ricers, newbs and greybeards - because it's free as in freedom!
|OT| 2 3 4 5
201
18K
Bitmap Frogs replied
Top Bottom