Amassment Message Board

So, I have a few design questions and I'm hoping you guys can help me.

First, HTML5. Do you have any sites coded in HTML5? Have you coded in HTML5 before, or have you converted any of your sites to this new language? I looked up what was new with it, and except for a few new tags, I can't find anything "revolutionary", so to speak. I've heard some people say on their fanlistings/sites that they have been "converted" to HTML5 - what exactly do they mean by that? That they're using the new tags?

Second, responsive designs. I've seen some shrines from Amassment members that have a responsive design and I want my sites to have that, too, and to finally learn how to do it. So... how exactly do you create a responsive design? Is it difficult or incredibly time-consuming? I've never done a website with a responsive design, but I'm eager to learn! If you have any tutorials on the subject, feel free to redirect me to those.

That's all the questions I have at the moment. XD Any help will be greatly appreciated!

I'll be happy to help, Chibi!

First off, I do have some sites in HTML5! Paper Scraps, Sacred Vessels, DILF, So Scandalous!, this page here and Nyx's Lounge demo. It's much more of a change if, like me, you start off from XHTML, where everything needed a closing slash/tag. There are some deprecated tags and some new ones, and now you can't write tags in all caps (I remember when I used to do this, ouch).

The biggest change, and I think that's what people mean when they say they converted to HTML5, is actually CSS3, which opens up a whole new world of possibilities. The progress bar on Paper Scraps and the one pager shrines page? All CSS3. The responsiveness? CSS3. Rounded corners, embedded fonts, the imageless gradient background on DILF? CSS3. Even the menu on the demo is mostly CSS with a tiny bit of JS thrown in.

As for responsiveness, it can be hard to wrap your head around it and time consuming to code. This is why I use the built-in responsiveness from Bootstrap! Bootstrap is a framework that uses HTML5, CSS3 and jQuery to make it easy and fast to build a basic website with a grid and responsive. I know I just said a lot of scary buzzword, but don't worry, if you understand CSS classes it's pretty simple. You download the Bootstrap kit and start a new HTML file with this:
and you insert whatever you want between the body tag and the jQuery! (The jQuery has to stay at the end of the page for performance reasons.)

Bootstrap is built with a grid of 12 columns, meaning that the width of your columns for your layout have to add up to 12. For example, for a three column layout, you write this:
where "container" is the container of your site, "row" is a row of columns, and "col-md-4" is a column (col-) measuring 4/12 columns (-4) wide in the grid for a medium-sized screen (md) (the responsive part). 4+4+4=12! You can have 6 columns each 2/12 wide, or 2 columns 6/12 wide, or you can even have just 1 column 12/12 wide, it's up to you! It just has to add up to 12. You can have more than one row as well, of course.

I hope this was helpful! If you have questions about all this, don't hesitate to ask!

HTML5: There are new tags such as section, article, aside, header, footer...I recommend reading this for everything you need to know about that.
The REAL revolution is in the <canvas> element...but you aren't gonna see a lot of that in fansites.

Responsiveness: Everything Nyx said, and if you prefer to hand-code things personally, this is your best friend:
You can have as many of these queries as you want in your CSS and each one contains a different set of rules to be activated at different sizes.

Your other best friend are ways to display your site on common resolutions for mobile devices. I'm using the Web Developer Toolbar addon for Firefox which has an option to view how a certain site looks at such sizes.

Hehe, I've been working behind the scenes to adapt some older designs to responsive in the last few days actually. It's easy, don't worry.

Thank you so much, guys! I'm not so worried about HTML5 now, I'll just check dubious's link the new things with CSS3. I didn't use XHTML much (I always hated having to close tags each time, haha).

As for responsive design, I'll definitely check out Bootstrap. So can I still make any kind of layout while using Bootstrap, like I would normally do? Or are my designs limited with this framework?

Chibi wrote:Thank you so much, guys! I'm not so worried about HTML5 now, I'll just check dubious's link the new things with CSS3. I didn't use XHTML much (I always hated having to close tags each time, haha).

As for responsive design, I'll definitely check out Bootstrap. So can I still make any kind of layout while using Bootstrap, like I would normally do? Or are my designs limited with this framework?

You can make anything you want with the framework! In fact you don't have to use the columns at all! You can just built your layout inside the container if you want. For responsiveness, though, you can build your site inside one single 12/12 column and things will squish pretty well. You can even make a layout in which some parts will only display on large or small screen just with the addition of a class, and the navigation given in the examples can be modified at will and it will all collapse on small screens. If you have any questions, don't be afraid to ask

nyxmidnight wrote:

Chibi wrote:Thank you so much, guys! I'm not so worried about HTML5 now, I'll just check dubious's link the new things with CSS3. I didn't use XHTML much (I always hated having to close tags each time, haha).

As for responsive design, I'll definitely check out Bootstrap. So can I still make any kind of layout while using Bootstrap, like I would normally do? Or are my designs limited with this framework?

You can make anything you want with the framework! In fact you don't have to use the columns at all! You can just built your layout inside the container if you want. For responsiveness, though, you can build your site inside one single 12/12 column and things will squish pretty well. You can even make a layout in which some parts will only display on large or small screen just with the addition of a class, and the navigation given in the examples can be modified at will and it will all collapse on small screens. If you have any questions, don't be afraid to ask

Thank you! I'll try it out in my next layout and if I have any questions, I'll post here again!