Responsive Website (Again) (WIP)

[Wafuz]

Ok, this site I'm currently making is not really for the looks- but for how well it responds to different devices. I'm almost done with this simple design. My main challenge is actually coding with using media queries. I made one last time and I posted it here, but it didn't turn out that good.

I'm trying to get better at my css and I also need more experience in being consistent with my design all the way down to mobile platforms.

You must be registered to see links

In browser previews:

You must be registered to see links

You must be registered to see links

You must be registered to see links

 

[Desi37]

This one looks nice, however I should make a better header (home, about us, contact, etc..). Are you going to release this, or you dont know yet?

 

[Wafuz]

It's not actually for releasing. I'm doing this to practice on my css skills and responsive design skills. Sorry. ;s

 

[Blure Shadow]

does it also have some js? since it would look a lot better with bouncing and fading buttons, menus, etc ^^

 

[Matt Clarke]

Design is clean, cut nice and clean. In terms of the responsiveness, it fits nicely because there is not much content for the site to contain. This is not an issue as it's still a very nice responsive site. On the last image (mobile) I'd still have the tweets and blog comments. Overall, very nice!

 

[aw1n]

Consider looking into the html5 boilerplate framework, the media queries are pretty straight forward to pickup. Take a look at

You must be registered to see links

pretty much disects how the wordpress twenty twelve responds with queries. good luck!

 

[Wafuz]

Thanks for the tip. I'm not using Wordpress for this design.

My website is using Wordpress as a foundation, but it doesn't have a responsive design. Also, my wordpress theme is completely custom, so I'm not using twenty twelve theme. It's a blank theme that I built off of it to make my own.

@matt: Thanks, mate.

 

[iPhoenix]

cool. looks nice.

 

[Wafuz]

Thanks, Phoenix.

I haven't had much time to work on the actual coding of it since I'm a little under the weather.. Once I feel a bit better, I'll continue.

 

[iPhoenix]

That's too bad, hope you get better soon. I'm looking forward to seeing the finished product.

 

[FCV2005]

really love it , i love structure !!!

also u can try to red color ?

 

[Wafuz]

Thanks! And I can try other colors, but this design isn't really for the looks- but how it responds to other devices.
I'm probably only going to code the front page. I don't feel like doing the others. xD This cold I've had for a few days has been holding me back from getting any work done on the site. But fortunately I'm basically over it. So I can get back to work.

 

[Gangnam]

Thanks! And I can try other colors, but this design isn't really for the looks- but how it responds to other devices.
I'm probably only going to code the front page. I don't feel like doing the others. xD This cold I've had for a few days has been holding me back from getting any work done on the site. But fortunately I'm basically over it. So I can get back to work.

Why not re-design your existing site to act responsively? Responsive design isn't even technically what you see, but rather, how it behaves. :

 

[Wafuz]

If you're talking about my actual website.. then that would be a pain. It actually wasn't designed to be responsive. Trying to turn it into one wouldn't be easy for me. That's why I'm making this one with just plain HTML5 and css/css3.

My current site is kind of a mess to be honest.

Ok, so I updated the first post with a link to what I've done so far. Not the best coding though! There's no actual mobile or tablet version yet. I've only been working on the desktop version.

 

[jur13n]

responsive ain't working ma nigguh,
Didn't read anyother posts, just tested it with my browser.

==== EDIT ====

Nevermind, Didn't read this post as stated before my edit..

If you're talking about my actual website.. then that would be a pain. It actually wasn't designed to be responsive. Trying to turn it into one wouldn't be easy for me. That's why I'm making this one with just plain HTML5 and css/css3.

My current site is kind of a mess to be honest.

Ok, so I updated the first post with a link to what I've done so far. Not the best coding though! There's no actual mobile or tablet version yet. I've only been working on the desktop version.

 

[Wafuz]

Yeah..

I have the responsive site working now. There's still a few things I don't like about it. There's a preview of how it looks in browsers on the first post.

Also, that horizontal scrollbar is there because the form I made hasn't been optimized for it to be responsive yet.

 

[Detox]

This website looks very appealing, your current one is also very nice. Great job! Just make sure when you add in the functions and actual content, that you make smooth transitions. That's extremely sexy. :

 

[Martinmen]

Responsive web design get benefit for business.

 

[EpicNaga]

If you're talking about my actual website.. then that would be a pain. It actually wasn't designed to be responsive. Trying to turn it into one wouldn't be easy for me. That's why I'm making this one with just plain HTML5 and css/css3.

My current site is kind of a mess to be honest.

Ok, so I updated the first post with a link to what I've done so far. Not the best coding though! There's no actual mobile or tablet version yet. I've only been working on the desktop version.

Cool agreed.

 

[Irahnik]

not much different from your current homepage but this is still pretty hot