Free HTML5 website templates

June 30, 2014 4:14 PM

HTML5up.net provides free, Creative Commons licensed, HTML5 website templates you can use to make a modern-looking website.

[h/t - this Metatalk thread]

posted by pombe (26 comments total)

So, they're all that "big photo and then you scroll and there are different photos behind things and stuff that would normally be subpages are just sections on one long page" thing? Because, yeah, no.
posted by Joakim Ziegler at 4:33 PM on June 30, 2014 [15 favorites]

Well, thank you for that helpful information.
posted by Brandon Blatcher at 4:45 PM on June 30, 2014

I looked at these a couple days ago from the other thread. Absolutely great for folks who don't know html or css or who don't want to mess with it much. Some of the best web content comes from those folks. However, I am pretty sick of this thing that has happened where there's just so much visual samey-ness on the webs.
posted by fluffy battle kitten at 4:47 PM on June 30, 2014 [1 favorite]

This looks fairly useful. I went looking for simple modern templates recently and quickly fell into the morass of Bootstrap stuff, way overkill for what I want to do. This contains a lot more Javascript than I'd like too, but it's not awful. PureCSS is a nice alternative but perhaps is a bit too simple a starting point, and the templates I've found online are too limited.
posted by Nelson at 4:57 PM on June 30, 2014 [1 favorite]

If there are other good templates out there that aren't quite so much the same looking I'd be very curious to hear about them. I too am a little tired of the big image and scroll design that has taken over lately, but these still look way nicer than what I would come up with on my own.
posted by pombe at 4:58 PM on June 30, 2014

I understand where y'all are coming from in being sick of the so-called "parallax" fad. Valid criticisms of the design aside, these are extremely useful for the web-challenged because they are single page websites that compose nicely on desktop, tablet, and mobile. The value of that feature cannot be overestimated in the 21st century.

Thanks for posting it, pombe. Since I stay off the gray for the most part, I'd have missed it otherwise.
posted by ob1quixote at 5:04 PM on June 30, 2014 [2 favorites]

Are there Wordpress versions of these somewhere already, or is that left as an exercise for the reader?
posted by RogerB at 5:14 PM on June 30, 2014

The Gapification of the web. Pros and cons.
posted by gwint at 5:15 PM on June 30, 2014 [1 favorite]

Apparently, as we found out from the Google Debacle, whether or not a site has this template is the only way to know if a site is any good, so you would think sites would be required to use this template, not just urged.
posted by bleep at 5:19 PM on June 30, 2014

if there are other good templates out there that aren't quite so much the same looking I'd be very curious to hear about them.

I've actually been spending some time clicking around the Creative Market where a lot of people have low-cost templates and other design-y things including good Wordpress templates at reasonable prices.

I know some HTML and some CSS but I'm not a coder. What I wanted was a website that looked like it was designed in the last year or two, that was responsive for mobile and that was one page, no blogs, no blinky nothing. And that was hosted on my own domain. And the price was right. This not only does the trick but around people who don't live and breathe the web, it looks professional and it's legible. If we could even get most library websites to look this good (yeah even despite the samey-ness) we'd be doing a huge service for most public libraries, rural ones especially.
posted by jessamyn at 5:41 PM on June 30, 2014 [17 favorites]

These are awesome, thanks for posting. I think there's clearly room for websites that are easy to work with, especially for people who are more interested in content than coding.
posted by elwoodwiles at 5:57 PM on June 30, 2014

As I mentioned in the metatalk thread, I made a site from one of these templates on Sunday. After doing everything in Wordpress for a few years it was pretty fun to make something just by editing the HTML and CSS (plus the php to send mail from the contact form). My site has three pages, so I got to do stuff like edit the header in one page and then cut and paste it into the other two files to update those pages. I can't remember the last time I did that. It was like building a site in 1999 and having it look like today.

Anyhow, not terribly useful for most needs, but the template files are very clean and easy to understand. You could totally teach someone the basics of HTML by having them mess with one of these templates to create a site.
posted by snofoam at 6:40 PM on June 30, 2014 [1 favorite]

Resizing browser windows breaks this stuff (I smell fixed widths). These are not responsive.
posted by whozyerdaddy at 7:09 PM on June 30, 2014 [1 favorite]

Check that: They are pure CSS with no scripting library help.
posted by whozyerdaddy at 7:14 PM on June 30, 2014

So, they're all that "big photo and then you scroll and there are different photos behind things and stuff that would normally be subpages are just sections on one long page" thing?

I think the point is to customize them. If you don't want a long page, you could have the site be just a big photo and a link to your Facebook profile.
posted by snofoam at 7:16 PM on June 30, 2014

Has anybody compiled a site of top templates over the years? It would be a neat way to see how tastes have changed over time.
posted by rouftop at 7:27 PM on June 30, 2014 [2 favorites]

I selected one of these templates to use for site a few months ago. The skel.js approach to responsive design uses client-side JS to dynamically swap stylesheets, which for me ended up with some jank during initial load when the size-specific stylesheet loaded, definitely visible with a fairly large page on a high-latency network (3G) - you can see the unstyled content if you resize quickly as well. I ended up reimplementing the design with media queries (sorry, IE8 users). That said, these look really sharp, and the clean HTML made refactoring the styling fairly straightforward.
posted by lantius at 7:34 PM on June 30, 2014

I tried using those, and they kind of gave me hives. There was so much extra stuff in there that if I wanted to change it, or - heavens forfend - clean it out, I would be in there with a flamethrower until the Device Wars died out.

I prefer os-templates. The RS- series (responsive templates) all have the same "back pages", but they've got several examples of page layouts and widgets. Templates from that site also tend to work in IE8, which too many people still use. (Dammit.) The downside...is that if you want a superquick put-it-in-place template that will look super unique with minimal customization, you're kind of up a creek.
posted by Tailkinker to-Ennien at 8:19 PM on June 30, 2014 [2 favorites]

(plus the php to send mail from the contact form)

Send mail from php on a website? As in sendmail? That is not for amateurs, it's a security risk.
posted by charlie don't surf at 8:27 PM on June 30, 2014 [1 favorite]

If it's so responsive then WHY AM I LOOKING AT A HORIZONTAL SCROLLBAR (╯°□°）╯︵ ┻━┻)
posted by beukeboom at 9:31 PM on June 30, 2014 [1 favorite]

Hey now, there are no tables here. It's all CSS.
posted by me3dia at 10:11 PM on June 30, 2014 [5 favorites]

Thanks for the tip, Charlie. My php file uses mail, and I wasn't sanitizing or validating the email address input. I think it is okay now. The recipient is always me (not an input) so it seems like the main risk would be injecting line break to add Cc:s, but even then I think I would be getting the emails and see something was wrong.
posted by snofoam at 3:32 AM on July 1, 2014

Has anybody compiled a site of top templates over the years? It would be a neat way to see how tastes have changed over time.

If they were all still online, I could see how my tastes have changed over the years, and I think I would find that amusing. I may have copies somewhere. Does anyone have a Zip drive I can borrow?
posted by snofoam at 3:36 AM on July 1, 2014 [1 favorite]

Ugly as fuck. Might as well go back to my old anglefire site. In Comic Sans even!
posted by ZeroAmbition at 3:42 AM on July 1, 2014

What's an example of a site that you like, ZeroAmbition?
posted by jessamyn at 8:23 AM on July 1, 2014 [2 favorites]

My php file uses mail, and I wasn't sanitizing or validating the email address input.

Yes that is exactly the problem. There was a time long ago, when I was in the nanae "Lumber Cartel" (there is no cartel) when we would track down exploited web mail forms that didn't validate inputs. I was astonished how much spam was sent that way.
posted by charlie don't surf at 11:02 AM on July 3, 2014