Getting Started With Web Design and Dev in 2017?

Dear DP Web Devs and Designers,

I am a long time DP member but have been inactive in recent years. I started out as a content writer and then stopped and moved over to an offline business in media production. I do photography and video production with a small tea, and it has been moderately successful with a good projected growth rate for the future.

In recent times, I and my partner have been planning to take on a long-standing dream of ours to travel around while working remotely. We are a mixed couple and this gives us access to both India and the UK, to begin with.

So I have started thinking about taking up web development as a new direction in my career. In this regard, I would like to provide some background: -

• I have a basic understanding of HTML and CSS.
• I have a good grasp on design and I do some graphic design on the side plus I design things for my own company's requirements.
• As a professional photographer who has been working for over 7 years now, I also have a strong overall visual aesthetic sense. This coupled with my understanding of design and layout, draws people to me for professional and casual consultations for their projects.
• As mentioned earlier, I used to write content and I still am fairly good at it. As you can tell by now, I have native or better fluency in English. This is the same for my spoken abilities. So I communicate well in both.
• Lastly, I learn fast and I am an information sponge and I feel like I can pick up programming languages fairly quickly to get myself to a working understanding and then advance from that point on.

So with these points taken into consideration, I wanted to ask a couple of question to the senior web developers and designers on the forum:-

1. Would you say there's a market for well designed and functional websites made through Adobe Muse and Dreamweaver; given that it's a turnkey service including design, development, content and deployment? I ask this because I can get this going really quickly and would be the ideal starting point for me as I teach myself advance coding.
2. Should I just team up with an agency/individual coders and just do front end design and leave the coding up to them?
3. Since HTML, CSS and Java are practically the foundations of the modern web, what is the next language I should concern myself with? Perhaps Ruby on Rails, PHP or similar? I am looking to build websites mostly for small companies, individuals, etc. within a price range of $500 to $2000 - so not super low end but not super rhigh end either. I have arrived at these figures mainly through guesstimating the kind of projects I would want to do and how much time I would like to spend wrapping each one up.

That about covers everything I wanted to mention and ask. If you have read this far, I do thank you for your patience and if you are about to type out an answer - I am deeply grateful that you are taking time out of your schedule to do so.

Thanks all!

 

A market for duping people with those sleazy scam artist tools DESIGNED to make inaccessible laundry lists of how NOT to code a website? Sure, dirtbags take advantage of ignorant fools with that trash all the time.

Does that mean it's how you should be building websites? Not really.

Remember, HTML is about logical document structure, and semantic markup to say what things ARE, NOT what you want them to look like. A well written well ENGINEERED website should have its primary markup written with ZERO concern for what it looks like, and created WELL BEFORE you even THINK about layout. That's why dicking around in Photoshop sleazing out PSD's is NOT web design, nor is wasting time with WYSIWYG editors. After all, what you see is almost GUARANTEED to NOT be what anyone else gets!!!

Simply put, MOST of what people call "web design" IS NOT DESIGN, it is graphic arts, and the result is broken, slow, inaccessible, poorly coded bloated messes. I've never seen a site built with Muse or Dreamweaver that met even the simplest of accessibility minimums, much less had a code base that wasn't at minimum TWICE the code needed to do the job.

As a dearly departed (and highly respected on these forums) friend of mine used to joke, the only thing about Dreamweaver that can be considered professional grade tools are the people promoting its use!

ACTUAL design involves meeting accessibility minimums, following guidelines, accepting limitations of the medium, understanding specifications... When I say electrical design, or mechanical design, or architectural design, do you picture some hipster art *** sipping their goofy named Starbucks whilst screwing around on a graphics tablet whilst waiting for closing to drive home in their Prius... or do you picture some glasses wearing straight-laced nerd with a trackball, a slide ruler, inhaling coke and crisps, who at end of day drives their 20 year old Saab?

Its the difference between Ralph McQuarrie and Chip Foose -- McQuarries art might look cool, but he has ZERO engineering, mechanical, or structural background so nothing he draws would likely EVER be practical in the real world... Meanwhile if Foose draws a car, you can probably build it and it will go down the road straight.

The "proper" approach to Web DESIGN should be:

1) Content of value arranged in a flat text editor as if HTML didn't even exist.

2) Adding semantic markup to say what things are, NOT what they look like creating a logical document structure with numbered headings and horizontal rules. This allows non-sighted users (and search engines, remember search doesn't have eyeballs) to use the page.

3) Then and ONLY then do you add DIV, SPAN, classes, and create your external CSS to create the layoutS. YES, PLURAL!

4) ONLY once you have working layoutS do you have any business screwing around with colourations, backgrounds, gradients, or presentational images.

5) ONLY once you have the layouts and full page functionality working should you consider adding JavaScript to ENHANCE the functionality; but never use JavaScript in a manner that it is the ONLY means of providing functionality if we're talking about a WEBSITE. Web crApplications are a different story...

Bottom line? Content and logical document structure dictates markup. Content + Markup + device capabilities dictates layout. Anything else isn't design... It's called progressive enhancement, and it is how you build a site that "gracefully degrades" when/if any of the fancy bits along the way don't apply for the users device, the user's personal capabilities, or simply fail, aren't available, or flat out intentionally BLOCKED. ]i](CSS, JavaScript, and Images are all things users facing things like bandwidth caps will and do intentionally block or selectively enable -- PLAN FOR THAT!)[/i]

Dicking around with what it looks like from the start, be it with a paint program like Photoshop or a WYSIWYG like Dreamweaver? Putting the cart before the horse -- it's an utterly back-assward approach that again, I've never seen used to make a website that was worth a damn!

Frankly if you NEED anything more advanced than the typical notepad replacement/equivalent (Win32pad, Notepad++, Crimson Editor, Flo's Notepad2, EditPlus, Notepad++, there's hundreds of them) for your "design" process, you really have no business "designing" websites! Why? Because it means you're NOT a designer, you're an artist as again DESIGN is engineering, with art only being a small subset of the skills involved.

The same goes for the monuments to the stupidity of mankind that are HTML/CSS frameworks. Bootcrap, YUI, Grid960, Blueprint -- mouth-breathing dumbass halfwit rubbish that if ANYONE claims it made things "easier" or "faster", they're an ignorant fool not qualified to flap their gums on the subject of web development! Developers are dumber for that asshattery even EXISTING!

Since PROPER design STARTS WITH CODE -- aka HTML and CSS -- that's not even a valid question.

I would forget 'newer' languages or oddball ones with little traction and/or were never actually designed for web development in the first place. Ruby for example you'll have trouble finding hosts that support it, and the language is such a mess it would have remained stillborn if not for "rails"... Python and Perl are great for command line scripting, but they were never really meant to actually output HTML and do a piss poor job of it. These too you'll have trouble finding hosting support for limiting your target audience. Other technologies like .NET limit you to windows hosts... avoid anything that limits who you can build for. Likewise .NET technologies are a hodge-podge of ugly languages that were never really meant to create markup either.

For all its faults (and damn it has a LOT of them!) PHP is ubiquitous. The only time you might find a web host that doesn't offer it is on bottom end of free hosting -- and in those cases NO server side languages would be allowed anyways. The odds of finding a paid webhost that doesn't offer PHP is effectively zero, making it the ideal choice to target if you want a large audience.

It is also derived from C syntax, meaning a lot of code snippets from other C syntax languages are easy enough to port over -- and it increases the number of people you can turn to for help. There are so many people using PHP that on forums like this, or sites like stackOverflow it will rarely be more than a few minutes before SOMEBODY can point you the right direction if you get stuck.

Other languages like Ruby and Python? Not so much. Half the time you are stuck with beginners who know as little or even less than you do when starting out blindly throwing bad code at it, the rest of the time you get this puzzled "why would you even do that" response to even the most mundane of tasks. Python in particular you get some really useless responses to. Python is to programming languages what an echo chamber is to political extremists; they are in their own little private world of alternative facts and homeopathic cures!

IF you are going to do "design" aka front end DEVELOPMENT -- basically what SHOULD be the same thing -- you should at minimum have a working knowledge of PHP just so you have some idea what the back end guys are even expecting you to hand them! Much less the limitations of certain systems in terms of them vomiting up code you don't want or not wanting to work with sane/rational markup. (yes Turdpress, I'm looking at you!)

So ASSUMING you have a PROPER command of semantic markup, accessibility minimums, and progressive enhancement I would most certainly say that PHP -- possibly with a smattering of SQL -- is your next logical step... even while honing your HTML skills you should probably AT LEAST learn how to use variables and the include/require functions so you have some clue how to build a static site that's pasted together from multiple files. That way any redundant parts (like the header/menu that's the same on every page) can be mixed in realtime. (Instead of asinine halfwit rubbish like DW's "template" shitstorm)

I know this might come across as a bit harsh, but I see FAR too many "art" people coming into the field who can't let go of the fact their artsy fartsy BS is the opposite of accessibility and usability, and most of the 'instincts' you THINK you have about design are in fact completely worthless when it comes to building a website. Doesn't matter how pretty it is, if it gets in the way of delivering content to users, it's WORTHLESS.

Faygelahs?!?

No, just merry.

 

Hi DeathShadow! Thanks a bunch for the nuanced response. I was starting to think I wouldn't get any. Well, I do understand where you are coming from and your logic is spot on. I personally am a strong believer of the form follows function dictate, so I agree that visual design is secondary to the actual intended functionality of the website. To that end, i have since shelved this idea and moved on to others because i would need to spend a couple of years at least to get up to speed. But thank you kindly for taking the time to write this post. I hope others who are in my situation will find it and as a result have an easier time deciding.

 

I disagree with deathshadow here, but knowing HTML/CSS is also really important. I think the perspective of design being completely useless is one often held by those who cannot design a beautiful and functional website, so instead they focus purely on functionality and zero on aesthetics.

In my view both are important, but that's not to say that companies don't hire Designers to put out PSD's or AI documents. I know designers who've made it big working with Yahoo and CBS, in both instances the individual only focused only on design and wireframes. So you could get away with only designing in Adobe Photoshop or another leading software if you'd like, but the truth is you need to know some HTML/CSS to understand the limitations of what cannot be translated to the web and what can.. Using Muse or similar software isn't the best idea, it makes the code a lot messy and difficult to edit in the future, so it's almost always best to learn it yourself..

As for deathshadow on the "Artsy Fartsy", to be honest these things are incredibly important as well, companies spend upwards of millions on a logo design, web design etc.. It's not all about aesthetics, but things like brand awareness etc are incredibly important for a business.. When you visit websites like Apple, Microsoft, Cheapflights etc.. You'll see they are beautifully designed, and there is an element and focus on what one could call "Art", it looks beautiful, but it's also functional and easy to navigate, the ultimate goal is call to action, in Apples case it's perhaps getting a person to purchase their products, or learn more about them.. There is no way you could design a website like that purely out of HTML/CSS etc.. unless you're provided the images which are designed through Photoshop or other editing software..

You cannot have one without the other, understanding both is important. Some people choose to do both, and in some instances they try to be the "One man" studio doing everything, and I seldom find this ever works out. You'll rarely find a designer whos amazing in both designing and coding or vise versa, the more areas you attempt to master the harder it will become, and chances are the work will reflect that, since it becomes harder to produce quality when you are focusing on so many things at once..

It also depends on what your goals are as well, I'm a designer who loves and appreciates things like typography, spacing & art. That's the whole reason I got into this field, but designers sometimes fall into the trap that deathshadow mentioned, at the end of the day it's a business that you're designing for and they have a goal in mind, so try to remember that you have to deliver a product that will bring the client closer to their intended goals, and that cannot happen simply by designing something that looks pretty.

Anyway just my thoughts, I think you can have an 'Artsy fartsy' website that doesn't get in the way of usability, and we have clear examples on the web showing precisely that..

 

What are you on about? Apple.com is one of the most simplistic sites out there, and the only "photoshop"-made content are images. The site itself is HTML, CSS and JS. There is absolutely no reason to use anything like photoshop or indesign to create the Apple website - all you would need it for would be the icons used to illustrate the different models, processing of images (which is better done by other software than that from Adobe), and the Apple-logo itself. Everything else is just... code.

 

I think you greatly miscomprehended what I was saying... but in a way that comes down to how one defines "design".

Art is just a small part of ACTUAL design. Sure, it's an important one, and I'm NOT saying "go out and make nothing but ugly websites" -- the two are not mutually exclusive; BUT the majority of people out there calling themselves "web designers" right now aren't designers at all, they're graphic artists for the simple fact that REAL design is ENGINEERING.

When I say electrical design, mechanical design, aeronautical design, automotive design, or architectural design do you picture some hipster *** in skinny jeans sipping on a goofy named Star*ucks bung-water and luke-warm milk spanking it on a graphics tablet whilst deciding between getting the new Chevy Bolt or sticking with their Toyola Pious... or do you picture a dork in horn rim glasses chewing through a pair of 32 ounce Dunkins dark roast cold brew double cream double sweet with a slide rule in their pocket, punching numbers into a TI calculator, whilst trying to figure out where to source a new rear bumper for their Saab 96?

Dunkins or GTFO. Friends don't let friends drink Starbucks.

A comparison I often make is Ralph McQuarrie vs. Chip Foose. McQuarrie is a great artist, having made some of the most iconic designs in sci-fi and fantasy... and not ONE of them are even close to practical to build in the real world, much less expect to function within the laws of physics. There's a reason even when he "designed" for major franchises what the model makers and prop builders end up making from them only vaguely resemble his concepts! Meanwhile Foose can not only draw you a picture of the coolest car ever, it will be something that can be built and driven because he understands the ENGINEERING of automobiles as well as the limitations of mechanical design!

DESIGN is engineering, involving specifications, accessibility, user experience, and guidelines.... Well, we have HTML, CSS, and JavaScript specifications, we have accessibility guidelines to follow like the WCAG. We have UX studies to base conclusions on like those performed by NNGroup.

... and the majority of ignorant fools and outright scam artists calling themselves "designers" right now whilst spanking out PSD's seem to know only two things about all of the above; Jack and shit... and Jack left town. That is why EVERY website I've EVER seen that started out life as a PSD has been an accessibility and usability disaster. Having spent a number of years specializing in helping sites avoid government fines and civil lawsuits for failing to meet WCAG minimums, and bailing out sites that were so bloated they were collapsing under their own girth, I've become FAR too painfully aware of this problem.

That is why REAL DESIGN should start life as content of value or a reasonable facsimile of future content, organized in a logical manner as if HTML, CSS, and graphical layout didn't even exist according to professional writing norms. It is then marked up semantically -- a sick euphemism for "using HTML properly" -- to say what things ARE and NOT what you want them to look like; since what things look like is NOT HTML'S JOB!

That way non-visual users get something meaningful (remember too, search engines don't have eyeballs!) since a proper DESIGN is for all users, not just the magical combination of perfect screen size and physical fortitude you happen to be blessed with. Again as I'm always saying, if you chose your HTML tags, or even your class/id names based on what you want things to look like, you are choosing all the wrong tags for all the wrong reasons -- hence why mouth breathing idiotic halfwit BS "CSS Frameworks" like bootcrap defeat the entire POINT of HTML and CSS by the very manner in which they work!

THEN once the semantics and content is in place it should be bent to your will with CSS to create the layoutS (YES, PLURAL!) -- LONG before you start dicking around with colours, effects, and presentational images (if any, this is 2017 after all). This way you can cross-platform test your layout concepts in a clean simple environment figuring out what the limitations of the medium are going to be for your window dressings.

Then and ONLY then should further enhancements to the page such as colouration, presentational images, scripting enhancements, and so forth be added. This would place involving paint programs like Photoshop at the END of the design process, NOT the start because again, Photoshop is NOT A WEB DESIGN TOOL... and to be frank neither is much of anything else Adobe dupes ignorant nubes and rubes into using -- including the now much hyped and ultimately useless "Muse".

It's called progressive enhancement, and is how you make pages that gracefully degrade in a manner that's useful to as many users as possible.

ANYTHING else isn't DESIGN.

... and yet again I say it loud and proud, if the resultant page is slow loading to the point nobody waits for it to finish, has accessibility failings making it useless to large swaths of users, is hard to maintain and update, fails to meet even the simplest of document structure norms to aid in search indexing, and is so laden with goofy effects and presentation it gets in the way of what's REALLY important -- delivering CONTENT to USERS -- what in the hell good is it?!?

Sadly that describes the majority of what the fools calling themselves "web designers" right now vomit up and have the unmitigated gall to call a website. See 99.99999999% of the snake oil being peddled at the various template whorehouses such as ThemeForest or TemplateMonster -- places that make Mos Eisley spaceport look like grandma's afternoon tea party!

 

Just to add to all above advised, I'd recommend to google this article - '2017 is the year that front-end developers should go back and master the basics'. You'll find it posted on medium. That's a great one, really carefully selected tips.