Designing a website

snamakool123 · December 22, 2015

So guys I have my php code and all the buttons and stuff. But it is just black text on white website so I want to make it more interactive and stuffs. Would I go around doing this in php are there better ways to do this. I have the functionality now I want to make it user friendly and look good. Things such as hovering over buttons. An animation that choses things random. How would I do this?

LtStaffel · December 22, 2015

I see the keyword animations so I'll say JavaScript and jQuery. Making the site look better in general I'll say CSS if you haven't done that already, it should help a lot.

mikat · December 22, 2015

So guys I have my php code and all the buttons and stuff. But it is just black text on white website so I want to make it more interactive and stuffs. Would I go around doing this in php are there better ways to do this. I have the functionality now I want to make it user friendly and look good. Things such as hovering over buttons. An animation that choses things random. How would I do this?

can you show us some of the code?

btw use:

[spoiler][code]your code here[/code][/spoiler]

Brenz · December 22, 2015

PHP is a server-side language. For the front-end you will want to use CSS for styling the page and for more advanced front-end interaction Javascript is useful as well as jQuery

Xploda · January 1, 2016

As the others have stated, you need to include some CSS in the <head> of your HTML code. As far as I know, you can put the ".php" extension on your file, write HTML in the file and use <? include> wherever a call to your PHP script is necessary. I'm not sure if this is the proper way to do it, because I'm not that familiar with PHP development.

However, whichever server side platform you use, the story for your HTML code remains the same. There is no reason to reinvent the wheel, you can use some existing frameworks for this.

These frameworks generally include some CSS and JavaScript (JQuery) files, and they offer you a set of custom made UI elements which require almost no effort to include in your website. They often make your pages mobile friendly without you having to do all of the heavy lifting as well. You can also add some custom CSS that overrides the CSS from the frameworks, by defining your own CSS file. I would strongly advise not to edit the CSS of the framework itself, because you will run into issues when trying to update it to a newer version.

You can usually download themes for these frameworks as well (free and paid ones).

A couple of frameworks I have personally used in projects of mine:

Bootstrap: as far as I know, this is the most popular one. Very stable and widely adopted, lots of tutorials, forum posts and stackoverflow posts to help you out.
Foundation: I have worked with Foundation once, but to me it felt a little more unfinished than Bootstrap (still good though). I've only had a short introduction to this framework, so there's not much I can say about it.
Materialize: personally a huge fan of this framework. It's still a bit experimental, but it tries to mimic the "material design" which is being used by Google these days in the Android OS. It includes some pretty cool stuff such as the Google cards, date pickers, dropdowns, ...

All of these frameworks have one thing in common: the documentation is very good, and includes a lot of usable examples. I'm sure you will easily find your way in them. The only thing I always find tricky, is knowing which JavaScript files to include and where to include them, but that's just a bit of trial and error imo. These are also not the only frameworks around. I'm sure you will find a lot more on Google (and possibly even forks of the above frameworks).

Good luck with your project!

mathijs727 · January 3, 2016

I see the keyword animations so I'll say JavaScript and jQuery. Making the site look better in general I'll say CSS if you haven't done that already, it should help a lot.

Use CSS 3 for animations too unless you want the 5fps animations (especially on mobile).

Only use jQuery/javascript to trigger animations.

Note that some CSS 3 animations are slow too because they change layout properties.

A good starting list for css3 animations is this:

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/