Anyone here web designers/webmasters?

[Kaneki 1,073]

I design a bit in HTML5 and CSS3 myself. In fact, I am ordering a dedicated server in New Jersey for a project I am working on, but not until tommorow when I get money for it.

 

Here's the specs of it:

[Betez 1,735]

Not a webmaster, but I know how to use HTML. I honestly don't like CSS, but I know it's necessary if you want a website, a good one at least.

 

Also, I don't know PHP, so really the only websites I can make are static ones with a few pages.

 

And, I have no money, and most free hosting services are terrible, and I don't really want a subdomian anyway.

 

But one day, I'll make a real website, when I can afford it, and when I feel like learning PHP and mastering CSS and JavaScript.

Edited May 16, 2013 by Betez

[Evilshy 5,093]

Only site I have right now is a student website... so I'm sort of a webmaster.

 

Know HTML, CSS, and am learning PHP and MySQL at the moment.

[GeneralDirection 1,064]

Yea, I guess I still sort of am. Don't really have much time for it now between school and work and writing lol. xD I used to know HTML and CSS like the back of my hand. I used to know some JavaScript, PHP, and MySQL/phpMyAdmin, but I never did fully understand them. Also wanted to learn XML. But my webmaster days are over for now, maybe I'll pick it back up as a hobby in a few years when I'm not so busy. I do continue to pay for my web space, I still have a few uses for it. I did build a few things that I thought were cool at one point in time...

[SasQ 1,379]

I do programming and webmastering, but... man, I hate this job... :-P

In programming at least, when I write an erroneous program, my compiler will tell me. But it's not the case with HTML, CSS & stuff. When I make an error in my HTML or CSS, there will be no error message. What's worse, web browser can silently "fix" the error, so my code may work nevertheless. Or not. Or work somewhat differently to what I supposed it to do. "That's just it, Spike: I can't tell!", as Twilight would say. The unpredictability of what I can get in different browsers, what parts of HTML & CSS "standards" are supported and how, are what makes me too nervous lately to do this job and keep my mental sanity :-/ I can still somewhat do it, but I can pretty much feel that I'm getting behind the ever-complicating technology too quickly.

 

Once I loved programming and webmastering, because I love when machines do what I tell them to do in a predictable manner. But these days it seems as if Discord put his hands/hoofs/claws/paws/whatever on it, turning the whole industry into a nightmare of Chaos and confusion. And if someone won't do something to stop it and bring back Harmony soon, it will all crumble as a house of cards. (Yeah, you've probably guessed already that I ain't gonna wait with my hands crossed. I'm thinking on some little tools in my secret place to at least try to turn the tide, but hshshsh... ;-J )

 

I know HTML 4 & 5 pretty well, I know CSS 2 and some of 3, and I know some JavaScript. (Actually, I know several more programming languages, but that's another story.) But this is not enough. What's more important is all those little tricks and hacks which are needed to get the job done. Tricks such as how to hack the CSS to center something vertically, or make rounded corners which work properly cross-browser-wise; or how to set the flow of content that all the columns would have the same height, including their backgrounds; or how to make the text adjust to the width of the content box, or the content box to the viewport, to avoid the toilet-paper effect on wider screens, or the text being too wide to read easily. I once knew lots of such tricks, but I don't even know how many of them still work or are still needed. I'm lost ;-/

 

"So why don't you focus on programming for the web? There's PHP, right?"

Right. And that's a whole another horror story :-P  If you're a freshman and you're considering learning PHP, here's my piece of advice: DON'T! Save your sanity. Learn Python or better Ruby. They're gaining popularity very fast, so if you try enough, you'll surely find some hosting servers which already support them. And they're way better designed than this Frankenstein's monster sewed up from corpses of other rotting languages, called PHP.

 

But, if you know some good resources for learning modern-day tricks & techniques of web design, I'll be glad if you share them with me & others (maybe in this topic?). Webmaster friends unite! ;-)

Edited January 6, 2014 by SasQ

[Neon Fire 473]

Not so much as I used to be.  I have my own forum and used to make my own skins for it, and I'd use HTML all the time.  I have a book on CSS which I want to start using, but haven't found the time.

[SasQ 1,379]

For all those of you who want to learn how to make websites, here's how I usually do it:

 

I usually start from the raw content. I just open my notepad (Kate, to be exact) and write all the content text there.

 

Then I use HTML to mark up the content and "explain" what this content means. I mark up headings, hyperlinks, emphasis, paragraphs, lists, sections, etc. HTML5 allows me to mark up which portions of the content are articles, which are navigation etc. Only when there's no dedicated HTML tag for some type of content, I use the general DIV or SPAN elements with the appropriate IDs (for unique elements) or classes (for elements which can appear more than once).

 

When inventing names for IDs and classes, I describe what they mean in the content, not how they look. Because how they look can change with time, but the meaning would stay the same no matter what. For example, don't call something "leftPanel", because it can become right panel in some other graphical layout in the future, and someone will be very surprised seeing the "leftPanel" on the right. But if you call it e.g. "secondaryContent", then this will remain descriptive no matter where you'll place it in your layout.

 

HTML is not for describing how something should look like (that's the CSS for this purpose), but what does it mean. It's all about semantics.

 

Only then, when I have all my HTML template ready, I attach CSS stylesheet to it and try to layout all my little boxes on the screen.

 

In the meantime, I can show the HTML to the graphic designer (which usually means myself) and let him/her pimp up my content. What's most important in graphics is that graphics should facilitate experiencing the content and make it shine, not just to shine on itself. So when the HTML is ready, the graphic designer can look into it to see what the particular content is supposed to mean, so he/she can organize it in the layout to emphasize that meaning with grouping related elements together and separating unrelated things with white space, using the typography, colors, contrasts & graphical backgrounds. Without HTML it could be very hard for the graphic designer to do it. Well, he/she could do it, and it can even look beautiful, but it would usually be too much generic and useless, if you know what I mean. You know, you've probably seen those websites which are cool and dandy, but there's nothing there to actually read, or the navigation is organized in a convoluted manner, or there are some other problems with usability. This is the effect when the graphic designer doesn't know where it should all go, so he/she needs to default to some general design use cases.

 

However, the most atrocious task for me is with the CSS, when I have to take all these graphic designs and convert them into code, because CSS, after all those years of development, is still very retarded for layout purposes, when compared with DTP software & techniques. I understand that the Web is a different medium than paper (in a way that it's more continuous and fluent), but there are some similarities, and it's sad that the CSS standardization committee couldn't adopt them for such a long time. I always have quarrels with my graphic designers about these little details which are still too hard or impossible to achieve in CSS without breaking the semantics (by adding some non-semantic garbage to the HTML, especially that it could sometimes be impossible, e.g. when you don't have control over the HTML templates, you can only style what you get) or using some CSS hacks (that is, using CSS in a way it wasn't designed for), or compensating the lack of support with JavaScript (which isn't guaranteed to work in all browsers; think of cellphones, handhelds, TV browsers etc., or can be simply turned off by the user).

 

I once found a great book called "Bullet Proof Web Design" by Dan Cederholm from SimpleBits. It's a great lecture for all who want to make "bullet proof" websites, that is, flexible and extensible ones, which can adapt to different conditions & screen sizes without breaking. It's a bit outdated for present-day web design, but the general idea is still the same and many of the techniques presented there should still work today.

 

I would be very happy if I could find a book or tutorial website of the same caliber for present day web design. So if you know some, please share the links with me & other webmaster friends ;-)

Edited January 6, 2014 by SasQ

[Revy ~ Two Hands 862]

I can code in HTML5, CSS3, and use responsive design to make sites display optimally on mobile devices. Check my latest Tumblr blog entry for an in-depth preview of the site I've been designing. (tumblr is in my sig)

[Nerdy Luigi 2,065]

I am learning XHTML and CSS now actually. Not difficult really.

Edited January 12, 2014 by Twilight Sniper

[Revy ~ Two Hands 862]

I am learning XHTML and CSS now actually. Not difficult really.

HTML5 and CSS3 presumably? I'm learning those along with php, JavaScript and other stuff that ties in

I completed my first college term in IT software, so It's still new to me. I'm building my first site currently my own site actually. It's coming together slowly but surely. If anyone's interested i have in depth screencaps of the site etc in a relatively recent post on my tumblr (link in sig).

[SasQ 1,379]

 

 

I can code in HTML5, CSS3

 

That's a necessary but not sufficient condition.

 

 

 

and use responsive design

 

Can you explain what does it mean exactly using your website as an example?

(Especially considering those texts that don't fit their containers, or the use of color scheme which makes the content highly unreadable.)

 

 

 

to make sites display optimally on mobile devices.

 

Yeah... My cellphone loves downloading 1 MB background images... ;-/

 

Ah, the newbie syndrome. I've been there too. I was very proud of my first website, with green brick wall repeating texture in the background, silver metal pipes under each heading written in yellow Comic Sans MS font... I learned a lot about web design since then, though, and now I understand why my first website was a total crap.

 

Knowing HTML and CSS is a necessary condition to ever start with webmastering, but it's not sufficient yet. It's actually the first step, the beginning. I see you use lots of professional terminology in what you write, but I cannot see them all reflected in your design. Especially in graphics design.

 

Graphics design is the first thing your users will see, and in many cases it will also be the last thing they see. Your HTML and CSS could be OK, but your graphics design is just plain horrible. (But please keep in mind that I don't write it to blame you or to piss you off, but to help you see what you can improve yet.) The worst thing is the use of colors and their contrasts. Especially the red-yellow saw-teeth background you used, because it makes my eyes hurt and roll randomly over your page. These contrasts make those colors "fight with each other", so it all flashes, and I guess it has a great potential... of inducing seizures :-s  It draws attention outside the main content and distracts too much, instead of facilitating reading it.

There's too much chaos on your website.

Then there's that long thin stripe of text. It's too narrow for some elements which appear to stick out of it.

Typography is lacking. I don't see any headings, which would help me to find the interesting sections of content. I don't know why all the plain text is in boldface. Some sentences are slanted in addition, and I guess they were supposed to be captions for the illustrations, but I cannot see this connection immediately, because there are no visual hints which would connect those texts more with the pictures and separate them from the rest of the text instead.

I cannot tell immediately which elements are clickable/active, and which aren't.

Too long texts from the top navigation are being broken, and then they don't fit their containers, so they are being cut, and I cannot read them. This is against usability and responsiveness, I guess, so I cannot see how your website is "responsive" or "usable" in any manner.

 

So, as you can see, there's a lot of space for improvement.

 

First of all, graphics should be used to help the user in finding and reading the content, and in understanding its organization & layout on the page. Which content is more important? What should he/she read first? Which parts are related and which are separate? Which is the navigation and which is the main content?

 

Contrast of colors and their brightness should be used to help the user, not against him/her. Background should be... in the background: it shouldn't distract the user, and it should lead his/her attention towards the main content, not away from it. More contrasting colors you can use for better separation of different elements. E.g. separating the top or the footer from the content by making one of them bright, and the other dark. Or using very saturated colors for important contents (e.g. some headings), and less saturated colors for less important content (e.g. the plain text).

 

Colors aren't something you choose at random. Nature uses less-saturated colors too, not just a bunch of the most saturated ones. That makes them look more... natural. I often use an interesting trick to choose my colors: I take a photo of some natural scenery (e.g. a beach, a forest, some mountain landscape etc.), which fit my color scheme, and I use the color picker to pick colors from that picture. This way they're more natural and fit together better. There are rules of harmony for colors in the same way as there are in music: some colors harmonize together, others don't. You can use these rules to make different impressions in the viewer.

 

White space and grouping together is the other tool you can use to improve user's experience. You can group similar/related things together, and use more white space to separate elements which are unrelated and shouldn't be confused. But you don't need to use space everywhere, or to separate things with explicit lines. You can also separate these areas by making their colors more contrasting or just a bit different.

 

One more tool is the rhythm. This might sound strange at first: rhythm is something from music, right? What does it have to do with graphics? Well, rhythm is all about repeating patterns. And you can use that in graphics, too. For example, you can repeat the same color scheme and typography for your headings, which will tell your user they're related somehow, even if they're separated with other content. You can use spatial alignment (horizontal, vertical etc.) of elements to make the pattern more evident. This is used for bulleted lists or numbered lists, for example, and for navigation menus. But it also can be used with margins, alignment of text in a container, indents etc. For example, you don't need to make any visual boundaries for your containers if the user can spot that all the text is aligned in a vertical line. Also, you can make the headings indented out a bit, so the user can spot them quicker in a long flow of text. Lots of tools you can use here.

 

And there's typography. The size of text, its weight, the fonts used, their colors, styles, backgrounds, underlines etc.

 

Here are some of my old websites. They're quite old, so they don't necessary use the cutting-edge HTML5 and CSS3, but I guess their graphics design is a bit better and more understandable to the users than yours:

 

http://www.quantummatter.com/what-is-it/

http://science.mistu.info/Physics/Optics/Color_conspiracy.html

http://sasq.programuj.com/pl/

[Kelario 95]

I *can* write HTML, and I *can* use nginx, but I'm at constant war with my parents over the right to actually do anything with them, primarily because my dad is a security hypocrite. (Is OK with running six domains 24/7, but when I go to that computer and play Minecraft it's a "security risk.")

[Clover Heart 978]

I used to do some web design and run my own website (not my own domain) back when I was a teenager. Made my own graphics, too. Which was probably my favorite part. I used mainly HTML with some CSS. Simple sites but nice clean designs. Not that anyone ever visited my websites, but I enjoyed making them.

 

As for now, I still remember some code and I could probably pound out a page or two if I wanted to. But it's become increasingly difficult to do so in the past 5 years. And with all the big-box sites out there, small independent sites have the odds stacked against them in terms of gaining an audience. Especially if you don't wanna pay for a domain. And especially if your site, like mine, is basically just a place to store all your crap that nobody really cares to see. It's possible to build sites, but unless you just like creating pages and layouts, it's kinda not worth your time. Not worth my time, anyway. Can't speak for anyone else.

[Revy ~ Two Hands 862]

That's a necessary but not sufficient condition.

 

 

 

 

Can you explain what does it mean exactly using your website as an example?

(Especially considering those texts that don't fit their containers, or the use of color scheme which makes the content highly unreadable.)

 

 

 

 

Yeah... My cellphone loves downloading 1 MB background images... ;-/

 

Ah, the newbie syndrome. I've been there too. I was very proud of my first website, with green brick wall repeating texture in the background, silver metal pipes under each heading written in yellow Comic Sans MS font... I learned a lot about web design since then, though, and now I understand why my first website was a total crap.

 

Knowing HTML and CSS is a necessary condition to ever start with webmastering, but it's not sufficient yet. It's actually the first step, the beginning. I see you use lots of professional terminology in what you write, but I cannot see them all reflected in your design. Especially in graphics design.

 

Graphics design is the first thing your users will see, and in many cases it will also be the last thing they see. Your HTML and CSS could be OK, but your graphics design is just plain horrible. (But please keep in mind that I don't write it to blame you or to piss you off, but to help you see what you can improve yet.) The worst thing is the use of colors and their contrasts. Especially the red-yellow saw-teeth background you used, because it makes my eyes hurt and roll randomly over your page. These contrasts make those colors "fight with each other", so it all flashes, and I guess it has a great potential... of inducing seizures :-s  It draws attention outside the main content and distracts too much, instead of facilitating reading it.

There's too much chaos on your website.

Then there's that long thin stripe of text. It's too narrow for some elements which appear to stick out of it.

Typography is lacking. I don't see any headings, which would help me to find the interesting sections of content. I don't know why all the plain text is in boldface. Some sentences are slanted in addition, and I guess they were supposed to be captions for the illustrations, but I cannot see this connection immediately, because there are no visual hints which would connect those texts more with the pictures and separate them from the rest of the text instead.

I cannot tell immediately which elements are clickable/active, and which aren't.

Too long texts from the top navigation are being broken, and then they don't fit their containers, so they are being cut, and I cannot read them. This is against usability and responsiveness, I guess, so I cannot see how your website is "responsive" or "usable" in any manner.

 

So, as you can see, there's a lot of space for improvement.

 

First of all, graphics should be used to help the user in finding and reading the content, and in understanding its organization & layout on the page. Which content is more important? What should he/she read first? Which parts are related and which are separate? Which is the navigation and which is the main content?

 

Contrast of colors and their brightness should be used to help the user, not against him/her. Background should be... in the background: it shouldn't distract the user, and it should lead his/her attention towards the main content, not away from it. More contrasting colors you can use for better separation of different elements. E.g. separating the top or the footer from the content by making one of them bright, and the other dark. Or using very saturated colors for important contents (e.g. some headings), and less saturated colors for less important content (e.g. the plain text).

 

Colors aren't something you choose at random. Nature uses less-saturated colors too, not just a bunch of the most saturated ones. That makes them look more... natural. I often use an interesting trick to choose my colors: I take a photo of some natural scenery (e.g. a beach, a forest, some mountain landscape etc.), which fit my color scheme, and I use the color picker to pick colors from that picture. This way they're more natural and fit together better. There are rules of harmony for colors in the same way as there are in music: some colors harmonize together, others don't. You can use these rules to make different impressions in the viewer.

 

White space and grouping together is the other tool you can use to improve user's experience. You can group similar/related things together, and use more white space to separate elements which are unrelated and shouldn't be confused. But you don't need to use space everywhere, or to separate things with explicit lines. You can also separate these areas by making their colors more contrasting or just a bit different.

 

One more tool is the rhythm. This might sound strange at first: rhythm is something from music, right? What does it have to do with graphics? Well, rhythm is all about repeating patterns. And you can use that in graphics, too. For example, you can repeat the same color scheme and typography for your headings, which will tell your user they're related somehow, even if they're separated with other content. You can use spatial alignment (horizontal, vertical etc.) of elements to make the pattern more evident. This is used for bulleted lists or numbered lists, for example, and for navigation menus. But it also can be used with margins, alignment of text in a container, indents etc. For example, you don't need to make any visual boundaries for your containers if the user can spot that all the text is aligned in a vertical line. Also, you can make the headings indented out a bit, so the user can spot them quicker in a long flow of text. Lots of tools you can use here.

 

And there's typography. The size of text, its weight, the fonts used, their colors, styles, backgrounds, underlines etc.

 

Here are some of my old websites. They're quite old, so they don't necessary use the cutting-edge HTML5 and CSS3, but I guess their graphics design is a bit better and more understandable to the users than yours:

 

http://www.quantummatter.com/what-is-it/

http://science.mistu.info/Physics/Optics/Color_conspiracy.html

http://sasq.programuj.com/pl/

You may want to check my recent tumblr entries, if you went to the actual site you'd have seen a broken bunch of unfinished code used for testing.

Also I don't see why you feel the need to compare yourself to me, I set out no competition

 

Since you've set that precedent I will mention some things you need to improve.

 

- CSS style sheets, you only need to use one

- You need to use CSS to make your sites responsive

- Code is technically outdated

- Inconsistencies in design, for instance one corner can be rounded but another isn't it doesn't sit right

- Heading really need a lot more styling in CSS, just using a color isn't enough

- <li> in <ul> same problem, bullet points don't look good on a list unless it actually serves a purpose, you could do with removing the padding for them also

- Not all the nav bar is functional, some links don't have anchors

- All sites lack a header. Could really use one.

The way you write code is a concern, you should be ideally using % values wherever possible, additionally you don't seem to know all that much CSS, your sites are lacking in it. (just going by the number of lines of code I can see from the page source for the 3 sites).

Edited January 17, 2014 by Gamer Twilight

[Splashee 28,593]

I am as far away from a web designer or webmaster as possible.

[ExplosionMare 20,864]

I wish! That sounds cool, but I have no experience with that :/

[The Historian 516]

One of my responsibilities in my previous job was web developer so yes, I am one. Technically, I did full stack since I did front end, backend and database work. Had some fun with it, but man was it a nightmare sometimes. Magento 2 be like... "you did a thing, let me break the site for you." Hell of a learning curve... lol

[Clawdeen 19,724]

I took a web design course at my local skills trade school and got certified a long time ago. I’ve not really done any of that since I took the course.

[Cash In 23,018]

Did a bit of web design for school around the time I joined this forum. Nothing to write home about, but I'm still proud that I managed to do as much as I did.