Jump to content

Heys guys, 

 

I'm not that new to HTML and CSS but I've been learning PHP and other things recently. I've never actually had any proper feedback though on any of my work. Was wondering if anyone could have a look at them and tell me how it is, any improvements or anything! It'd be greatly appreciated. 

 

The site is Electric Insanity. It's a website for a small games/app development company a couple of my friends and me have created. I am the sole web developer for the company, not that it's too much of a task, I love it to be honest. I have recently tried using HTML5/CSS3 to create a more responsive site here. I am doing this to allow for mobile devices.

 

Any feedback would be helpful, Thanks

 

Kadeem

Build log

 

CPU: FX-6100 @ 3.9 MOBO: GA 990XA-UD3 RAM: Corsair Vengeance 8GB GPU: HD6870 PSU: Corsair GS800 Case: Bitfenix Outlaw SSD: Samsung 840 250GB HDD: Seagate Barracuda 1TB Cooling: Custom Water-Cooling Peripherals: Keyboard: G710+ Mouse: Steelseries Sensei Steering Wheel: Logitech G27 Sound: Speakers: Logitech x530 Headset: Razer Chimaera Monitor: Benq G2450HM, LG 32" TV

Link to comment
https://linustechtips.com/topic/56143-website-advice-stuff/
Share on other sites

Link to post
Share on other sites

Try to add texture to the responsive design. (I like that one better, all of this advice applies to it)

  • Make the background have a slight noise effect
  • Add some shadows
  • If you're going to use a flat design (no gradients), then you should make the corners a little less rounded.
  • The hover effect on the navbar has rounded corners, so it shouldn't touch the top/bottom of the navbar.
  • The logo is very tall, so possibly move the navigation to be next to it, or add some sort of background

I think you face a problem that took me a very long time to overcome. Your design just feels kind of empty, if that makes sense. It's not that it has very little content, it's just the way you display the content. One thing that can fix this is to add more images and colors. Stick to a simple color scheme, but use colors more, especially on text. (Change the color of headings/subheadings to help differentiate them) Try to broaden your font pallet, too, but make sure it doesn't cause long loading times/bandwidth issues.

 

That's all I can think of right now. You might not like some (or all) of my suggestions, so take it or leave it as necessary. (I'm not your designer :)

Link to comment
https://linustechtips.com/topic/56143-website-advice-stuff/#findComment-758074
Share on other sites

Link to post
Share on other sites

Ok thanks, I've tried to address some of the things you've said, not the best at coming up with designs but I try my best. The logo will be getting replaced at some point in time. I also have a small issue that I could do with some help. On the about page, I want to get it so that it will pull the information from the database and display it will a picture and the information just underneath that, then place the next person along side it. I wanted it to keep doing that till i reached the end of the available space then start again underneath. Before when i had a fixed width for the content space i found a way, most likely over complicated, I'll post what it was.

<?php	$r = mysqli_query($dbc,"SELECT * FROM member_data ORDER BY role1 ASC");	$picturearray = array();	$fnamearray = array();	$lnamearray = array();	$role1array = array();	$role2array = array();	$role3array = array();	$idarray = array();	$k = 0;	while($row = mysqli_fetch_array($r, MYSQLI_ASSOC))	{		if(!empty($row['picture']))		{			$picturearray[$k] = $row['picture'];		}		else		{			$picturearray[$k] = "tmplaceholder.jpg";		}		$fnamearray[$k] = $row['first_name'];		$lnamearray[$k] = $row['last_name'];		$role1array[$k] = $row['role1'];		$role2array[$k] = $row['role2'];		$role3array[$k] = $row['role3'];		$idarray[$k] = $row['id'];		$k++;	}								$k=0;	while(isset($idarray[$k]))	{		echo "<div class='row'>";		echo "<div class='memberc1'>";		echo "<img src='images/members/" . $picturearray[$k] . "' class='member' alt='Team Member " . $fnamearray[$k] . " " . $lnamearray[$k] . "'>";		echo "<p>" . $fnamearray[$k] . " " . $lnamearray[$k] . "</p>";		$roles = "";		$roles .= $role1array[$k];		if(!empty($role2array[$k]))		{			$roles .= "/" . $role2array[$k];			if(!empty($role3array[$k]))			{				$roles.= "/" . $role3array[$k];			}		}		echo "<p>Roles: " . $roles ."</p>";		echo "</div>";		$k++;		if(isset($idarray[$k]))		{			echo "<div class='memberc2'>";			echo "<img src='images/members/" . $picturearray[$k] . "' class='member' alt='Team Member " . $fnamearray[$k] . " " . $lnamearray[$k] . "'>";			echo "<p>" . $fnamearray[$k] . " " . $lnamearray[$k] . "</p>";			$roles = "";			$roles .= $role1array[$k];			if(!empty($role2array[$k]))			{				$roles .= "/" . $role2array[$k];				if(!empty($role3array[$k]))				{					$roles.= "/" . $role3array[$k];				}			}			echo "<p>Roles: " . $roles ."</p>";			echo "</div>";		}		$k++;		if(isset($idarray[$k]))		{			echo "<div class='memberc3'>"			echo "<img src='images/members/" . $picturearray[$k] . "' class='member' alt='Team Member " . $fnamearray[$k] . " " . $lnamearray[$k] . "'>";			echo "<p>" . $fnamearray[$k] . " " . $lnamearray[$k] . "</p>";			$roles = "";			$roles .= $role1array[$k];			if(!empty($role2array[$k]))			{				$roles .= "/" . $role2array[$k];				if(!empty($role3array[$k]))				{					$roles.= "/" . $role3array[$k];				}			}			echo "<p>Roles: " . $roles ."</p>";			echo "</div>";		}		$k++;		if(isset($idarray[$k]))		{			echo "<div class='memberc4'>";			echo "<img src='images/members/" . $picturearray[$k] . "' class='member' alt='Team Member " . $fnamearray[$k] . " " . $lnamearray[$k] . "'>";			echo "<p>" . $fnamearray[$k] . " " . $lnamearray[$k] . "</p>";			$roles = "";			$roles .= $role1array[$k];			if(!empty($role2array[$k]))			{				$roles .= "/" . $role2array[$k];				if(!empty($role3array[$k]))				{					$roles.= "/" . $role3array[$k];				}			}			echo "<p>Roles: " . $roles ."</p>";			echo "</div>";		}		$k++;		echo "</div> <!-- end of row div -->";	}	mysqli_close($dbc);?>

It might be complicated, but its what my mind (at that time) could come up with, I'm sure there is a lot or redundant things in it. Is there any way i can edit this to make it so that the content is able to be displayed based on the current allowed width for the content? I'm pretty sure its simple but i just cannot think of it.

Build log

 

CPU: FX-6100 @ 3.9 MOBO: GA 990XA-UD3 RAM: Corsair Vengeance 8GB GPU: HD6870 PSU: Corsair GS800 Case: Bitfenix Outlaw SSD: Samsung 840 250GB HDD: Seagate Barracuda 1TB Cooling: Custom Water-Cooling Peripherals: Keyboard: G710+ Mouse: Steelseries Sensei Steering Wheel: Logitech G27 Sound: Speakers: Logitech x530 Headset: Razer Chimaera Monitor: Benq G2450HM, LG 32" TV

Link to comment
https://linustechtips.com/topic/56143-website-advice-stuff/#findComment-762334
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×