1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Learning in depth of webdsign to near professional level, need advice.

Discussion in 'HTML & Website Design' started by jcarney1987, Nov 17, 2019.

  1. #1
    I've been running a small web hosting business for years, mostly as a hobby. When my full time work took hold of my life lets say about 3 years ago, I stopped any study I had on HTML, CSS.

    So now with that being said, I still do know some of the raw basics, but with all the information out there I'm a little overwhelmed.

    • So to start off I'm going to state my hardships, to give people and idea where I stand. Being a single father of 2 working full time has added a lot of stress in my life, which I think destroyed my creative thinking. So this weekend I decided to go out and buy some art supplies and practice drawing, relearning on how to visualize shapes and shades. This will be my hardest task, but I think it will help inspire creative thinking.
    • I have very little knowledge on Photoshop or illustrator.
    • Renewing my education on CSS/HTML won't be to hard, just apply the creative layout is my toughest challenge.
    This is my understanding on how things should flow
    • Photoshop used for mockups or creating simple graphics.
    • Illustrator should be used for logos or graphics that require vector.
    • HTML/CSS to finish
    So here are my questions
    1. What is your typical work flow on design a website.
    2. What types of tools do you deploy and why to get the job done?
    3. Do you have any additional advice or idea's that will get me going a little faster?

    SEMrush
     
    jcarney1987, Nov 17, 2019 IP
    SEMrush
  2. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,424
    Likes Received:
    370
    Best Answers:
    6
    Trophy Points:
    290
    #2
    Build the skeleton first, then dress it up with art. One NEVER dresses a building with art UNTIL the building is FINISHED.
     
    mmerlinn, Nov 17, 2019 IP
    JEET likes this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    25,778
    Likes Received:
    3,651
    Best Answers:
    103
    Trophy Points:
    665
    #3
    I start with getting the "client" to find websites they like the look of
    Define the information that needs to be on the site - if they've got little to say there will be a different design to a site that has lots of products and lots of technical detail.
    Look at the end-user
    Think about how the contents of the site are accessed - anyone? require login? require subscription?
    What's the call to action? pick up the phone? email? contact form? register? shopping cart?

    I have a client's site that gets rebuilt every year with a different group of enthusiastic volunteers in charge of the site. Because I know what the content will be I can give them examples of design to look for and send them off. After years of painful coaxing... 2 years ago I ended up choosing for them, 1 year ago I put up a temp design just to get them going but it was never replaced, this year's crowd won't even have the conversation so they're getting last year's design with a few changes. Ultimately it's the content that matters.
     
    sarahk, Nov 17, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,171
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #4
    Utterly and totally back-assward. Why? Because

    !) Websites are about delivering content to users
    2) Websites are about MORE than what it looks like.

    HTML exists not to say what things look like. It exists to say what things ARE or WOULD BE in a professionally written document. There are grammatical reasons headings exists, why they have levels, what consititutes a paragraph, even reasons why text MIGHT be bold, and how that bold could be something like a proper name in a legal document <b> or recieve "more emphasis" such as <strong>Do not steal this work!</strong>.

    As such the correct approach should be one of content FIRST, then semantically marking up that content to say what things ARE or WOULD BE in a professionally written document, then and only then creating the layout with CSS, then layering more CSS atop it to give it the window dressing.

    Starting out dicking around in a paint program worrying about appearance starts the process from the wrong end. That's why the artsy-fartsy types who lack the basic understanding of ACTUAL design who sit around spanking it on the graphics tablet in Photoshop and illustrator are NOT designers. They're just artists under the DELUSION they know what design is.

    Design is engineering that incorporates art, where things like accessibility, usability, and so forth are AS important as your "gee ain't that purty" art. I'm not saying you can't tart it up all pretty, but you have to draw the line if it compromises accessibility at any level.

    Which is why I've never seen a website that started life as a PSD or in a WYSIWYG editor that was worth a flying purple fish.

    Progressive enhancement :

    1) Start out with your content or a reasonable facsimile of future content in a flat text editor as if HTML and CSS don't even exist.

    2) Mark it up semantically saying what things are, NOT what you want them to look like, if you choose ANY of your HTML tags based on the default appearance, you're choosing all the wrong tags for all the wrong reasons! As this is the semantic step, neutral / meaningless tags like DIV/SPAN don't go in yet.

    3) Then using CSS create your first (of many) layouts for screen media. NOW you can add DIV, SPAN, classes, and ID's to hook for presentation, but do NOT use classes to say what things are going to look like as that too has ZERO damned business in the HTML. Say what things ARE or WHY it MIGHT receive a style. This is why frameworks like bootcrap are mentally enfeebled rubbish that make you work harder, not smarter!

    I suggest starting with the desktop layout so that:

    4) You can narrow the window, figure out where it breaks, and use media queries to re-arrange the layout.

    5) Lather, rinse, repeat step 4 until satisfied you have all reasonable screen sizes supported.

    6) Then AND ONLY THEN ENHANCE the already fully working page with JavaScript.

    That way should any part of the equation -- JS, media queries, screen layout, even HTML itself -- be broken, blocked, or not apply to the end user, the page will "gracefully degrade".

    That's the fastest way to build professional accessible websites. Anyone telling you to start out dicking around with appearance is talking out their arse.

    -- edit --

    Oh, as to tools, any flat text editor will do for the development side. I like Flo's Notepad 2, but notepad++, win32pad, editplus, MS Visual Code, Atom, Sublime -- there are hundreds of perfectly good free editors out there.

    For testing, it's called BROWSERS. Most of them are free... download them, install them, test in them.

    ... and test as you go, not "oh I completed the whole thing in one browser" then hacking for the others. It's too easy to paint yourself into a corner wasting long hours of research and hacking that could have been avoided if you just used techniques that work in ALL browsers from the start. Hence alt-tab and F5 should be your new best buddies. You write a major section, you check it in ALL browsers, then move on to the next section. It might seem like more work during the process, but in reality it saves you time and headaches by the time all is said and done.

    Server-side code you can usually get away with testing environments like WAMP/XAMPP (I prefer the latter) though installing a proper VM with a regular server installation on it can give you a better "real world" approximate of how things are going to work.

    Case in point, I have a VirtualBox install of Debian that's a 1:1 of my primary hosting VPS' install. Both basically just being HowToForge's "Perfect install" of debian/apache/mariadb/ispConfig with some of the config variables tweaked to better leverage caching to match my traffic loads.
     
    Last edited: Nov 17, 2019
    deathshadow, Nov 17, 2019 IP
    JEET likes this.
  5. JEET

    JEET Notable Member

    Messages:
    2,900
    Likes Received:
    245
    Best Answers:
    9
    Trophy Points:
    215
    #5
    I'll go with @deathshadow about "notepad 2" for coding. One of the simplest and easiest tools out there to code up something without hassel.
    It was one of his post where I came to know about this tool first. Never used anything else since then.

    I'm not much of a image designing person, I mostly outsource that work, but I believe that the tools you have mentioned should be enough.

    There is a lot new in HTML and CSS, and a lot more devices to optimize your website for, like laptops, iPads, phones, different browsers, different fontsizes and screensizes etc...
     
    JEET, Nov 19, 2019 IP
  6. nshep

    nshep Greenhorn

    Messages:
    67
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    13
    #6
    Quick tip: If you are looking to learn more HTML, CSS (and possibly JavaScript), a good place is https://www.freecodecamp.org/. As the name suggests, it doesn't cost anything, you can get certifications, and the user base seems really happy with what it offers.
     
    nshep, Nov 20, 2019 IP
  7. jcarney1987

    jcarney1987 Active Member

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #7
    nshep Thanks for the freecodecamp, I'll check that out. It looks like it has alot of refresher info and more.

    So its my understanding, don't worry so much about Photoshop/illustrator, but focus more on the skeleton design. Then use basic CSS to move things where I want them, then add the beautification. So anotherwords, I need to thing of webdesign kinda like procedural programing, because that is how the user flows to content.
     
    jcarney1987, Nov 23, 2019 IP
  8. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,424
    Likes Received:
    370
    Best Answers:
    6
    Trophy Points:
    290
    #8
    Yep, paint the house after it is built.
     
    mmerlinn, Nov 23, 2019 IP