New here to the forums, but not to the site or conversations with Kroc. I make websites because it is art to me. I don't know as much as everyone here in the forum, but I do the best I can to create websites with what I know. I find it fun and enjoyable, so I continue on.
1. Bottom up -- work from nothing and add stuff in
2. Top down -- Take what you have and and remove what is not needed
If you're using WordPress then you are kind of inherently stuck with option 2. WordPress is so complicated that it would be very hard to write a new skin from scratch. However, others have done so and you can utilise this work:
The default wordpress templates use the html5shiv script. Is html5boilerplate much different from that?
In response to your question, since it is a wordpress site I would suggest you think about what you are wanting to achieve. If you want a thorough understanding of your own code base and would appreciate the learning experience of thinking through every element and markup decision, then start from scratch and expect to take a few months. If you just want an HTML5 compliant site to experiment with (if you don't need or don't want to do it from scracth) then either of the themes you and Kroc have posted will be fine.
I'm not convinced that wordpress is the best medium to express yourself on a Code as Art front. There are some plugins and custom functions you can use to weed out the overindulgent markup it forces on you, but ultimately you will have to look into the code base and start making your own plugins to get it to do what you truly want. That can be quite a bit of effort, and if it is your own personal site then it might be more effort than you want or need to invest.
And remember that you don’t have to over-engineer everything or use big products to get the job done: even a single static HTML page is a website, and can communicate exactly what it needs!
I personally can never see the need to use WordPress unless the thing you don’t care about the most — is the code.
---
“The default wordpress templates use the html5shiv script. Is html5boilerplate much different from that?”
The HTML5 shiv script adds HTML5 element support to IE6/7/8, HTML5 Boilerplate provides a template for writing sites - it uses HTML5 Shiv (naturally) to support older browsers. So whilst the two are not the same thing, one builds upon the other.
@Kroc and @Ben, thanks for the insights and information. Let me think about exactly it is I want to achieve and look deeper into the links given here. I'll get back to this thread soon.
“The HTML5 shiv script adds HTML5 element support to IE6/7/8, HTML5 Boilerplate provides a template for writing sites”
Interesting. I'll have to look into that.
Nick - one final suggestion I think often gets overlooked when discussing content creation is how big a difference your choice of text editor makes. I know my perspective on content management changed when I started fiddling with the Notepad++ FTP plugin (NppFTP). Software like wordpress is useful for functionality such as tag/category management, but that only needs to be implemented once. I find the most important component is the simplicity of creating your actual content. This is what will affect you day-to-day. If you have a text editor you are happy with, why not make that your publishing medium?
I know Kroc has his own setup with Remarkable that works very well for him too. It really is about making the decision you will find best in six month's time. Wordpress is supposedly simple (5 minute install and all that), but if you want to create a website you love, it might be better to make it all yours.
I look forward to seeing how you take this forward!
Before I explain how I'm moving forward with my website, I'd like to get your input when considering reading layout and grids for the reader.
a. What do you consider in your CSS for making a nice grid and reading layout for the eye? As Kroc stated in his CSS:
“a grid is used throughout, the site is 980px wide divided in 20px wide blocks. every line is 19px or a multiple thereof 19px is used because it also happens to be 5mm on a standard printout, meaning you can print this site on lined paper!”
What determines the 20px wide blocks and every line 19px or a multiple thereof? I have an idea, but would like ``_your_`` thoughts?
b. What about margins and padding? What do you do to determine the margins and patterns of your site? Or, do you go by what looks good?
Whatever suits you is my advice. I favour a 20x20 grid at the moment as it’s less confusing have different multiples for horizontal x vertical padding/margin and that it is easier for mobile as a finger is generally considered a 40x40 square to make it easy to tap (which is what NNF uses throughout for its buttons)
My advice is as always: revise, revise, revise. Choose something, implement it, change it next time if it seems important.
I'm also looking forward to it, especially because you're going for a pixel-based layout, while I tried to use 'em'.
For the backward chain approach, I think it depends on the site you're building. If it will be something simple, a .html page is the best, like Kroc said.
For more complex sites your approach can probably work, stripping away the bloat and keeping the essentials.
I made a final decision on how I'm going to design my new site. Right now, my main business is the Spiritual Avatar and I've been using wordpress for that website for some time. What I'm going to do is create my new website without the thought of wordpress, then once that is functional, I'm going to adapt that into wordpress to the best I can. I already have a following and I don't want to ruin the permalink structure of migrating off of wordpress.
I have three goals for the website: 1) No Ids or Classes, 2) mobile responsive and flexible grid, and 3) design.
1. No Ids or classes. Thank you Kroc for helping us realize this is possible. However, I already know of one class I need for wordpress: the page-title.
2. Mobile responsive design and flexible grid. I'm going to first build the website in a pixel based layout and then convert to em's and percentages from there. I'm going to use a 960 wide container with grids of 20px.
My CSS is going to be nice and simple. I don't have a lot of bells and whistle nor do I want to. I'm going to have the basic header, nav, article, section, footer layout and that's about it.
3. Design. My website is heavy on the information. I love to write and through my writing and teaching I help people integrate wisdom and compassion, so that they live a free functioning life. With that in mind, I want the content to be the main focus. If you go to my website right now http://spiritual-avatar.com/blog you can see how it is designed for the reader, i.e the header to the right of the page and content displayed front and center.
I want to change the design because I don't find it as optimal. The header section gets lost and it's more of a "preference thing" for me . A while ago, I had the idea of displaying the header in the traditional footer area. Unfortunately, I wasn't experienced enough to make that happen. Now, I met Kroc and see that his header is in the footer section. Therefore, I may go that route so my content is displayed as most important.
Challenges:
a. Making the HTML and CSS without any ID's or Classes. There are a lot of selectors that I need to learn, such as >, *, +, etc. , and pseudo elements that need learning, too.
I've been trying to study Kroc's CSS and testing aspects of it for myself. I must say, it is damn challenging to follow :) There is a lot in the CSS that overrides lo-fi browsers and the desktop browsers.
Question: What determines the override?
For example, here is the article section (part of it) for the lo-fi design:
%
/* === all : article ===============================================*/
article {
padding: 18px 19px 19px; border: 1px dotted #333; border-width: 0 1px;
}
/* text and everything gets indented so that blockquotes, figures and block images can overhang nicely */
article>* {
margin-left: 20px; margin-right: 20px;
}
/* the article meta information in the column to the left */
article>header { float: left; width: 120px; margin-left: -140px;
font: 12px/19px "Euphemia UCAS", "Trebuchet MS", sans-serif;
}
article>header>* { display: block; padding: 18px 20px 19px 0; margin: 0;
border-top: 1px dotted #333;
}
article>header>:first-child /* dotted line between blocks (excluding above the first item) */ { border-top: none !important; padding-top: 0 !important;}
%
Now, here is the hi-fi or all desktop section that overrides the lo-fi design:
%
/* override the all-browser’s (lo-fi style) section */
article {border: none; padding: 0 20px 19px;
/* part of the fixed-footer */
min-height: 100%;
}
/* in the link section, the URL underneath the title */
article>h1 {margin-left: 0;}
article>h1+a {margin-left: 0;}
article>h1+a:before {content: '℅ ';}
/* the set of meta information to the left hand side of an article:
(note that most of this is already handled in the all-browser’s section) */
/* the dotted line between items does not connect to the body in the hi-fi design */
article>header {width: 100px; /*margin-left: -140px;*/}
article>header>* {padding-right: 0; border-top: 1px dotted #431;}
%
So, my question is, what gets the over ride and what is built upon the lo-fi design? Does the whole "hi-fi" section override the complete CSS of the "lo-fi" section? As you can see in the example above, there are two conflicting padding and border elements between the lo-fi and hi-fi. Which gets applied to the HTML?
b. Applying all of this to wordpress. I believe I can do this with minimal ID's and classes, but we will see.
Please stop doing this. Your website is not aimed at educating web developers about better code, you are only shooting yourself in the foot. Use what works. NNF uses tons of IDs and classes because that's what makes it best for what it does. (easy to template / theme)
“I'm going to first build the website in a pixel based layout and then convert to em's and percentages from there.”
'A “CSS Framework” is like a set of instructions on how to make a cup of tea.'
Using frameworks, grids and modularised CSS is okay for prototyping (Camen Design was prototyped using Blueprint CSS framework), but it's just clutter in production (Camen design principal II: solve only my problem), so learn the principles being demonstrated and code them yourself specifically for the site you are writing.
Learning CSS3 media queries will be all you need for "responsive design". I would strongly recommend examining the NNF stylesheet because it supports many styles:
1. Desktop browser
2. Mobile (portrait)
3. Mobile (landscape)
4. Opera Speed Dial
5. Printer
Above all, have fun though. Experiment and design in the browser. Make something that works and put it online quickly and then keep polishing and revising it over time. Don't get trapped polishing something forever and then never releasing it!
Reply
Your friendly neighbourhood moderators:
Kroc, Impressed, theraje, Martijn
