Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Band Website - Thoughts and Improvement

Featured Replies

Hi all!

 

I'm new here so if you haven't seen me around before then hello!

 

I've taught myself web design, I mostly make sites for friends and family. I have made a site for my band, what are your thoughts?:

 

http://www.devilinsideuk.co.uk

 

 

Be as honest as you like :p

 

Thanks very much,

Storm08

Edited by Storm08

Good looking site :) I would say it gives a very accurate impression of the band.

I like your attention to small details - the mouse pointer for example :)

 

Only one thing - on the Bio page you need to give your first paragraph some more padding.

Other than that, I think it looks great.

overall impression is good, but I personally think that the website looks a little dark. I'm aware it's a rock band website and such kind of websites are usually black styled, yet the choice of colors might be in favour of more pleasing hues. Also, I'd like to read some extra information about the band members, but there were no any in the about us page.

  • Author

Thanks very much for your replies :)

 

teodora: Now you mention it, the padding does seem a little on the thin side, I'll change that now.

 

EvaBrown: I agree, I was going to try putting some lighter elements in the page, like maybe making a few graphical aspects a bit more colourful (still going with the general theme though). As for the content, that'll be work in progress, just concentrating on music atm, otherwise there's nothing to advertise and talk about. :)

 

What res screens are you using?? and I take it, it looks alright on them?? The only trouble I have had is that the background doesn't cover the whole page on my phone browser (android).

What res screens are you using?? and I take it, it looks alright on them?? The only trouble I have had is that the background doesn't cover the whole page on my phone browser (android).

 

If you use background-size:cover; the background will fit :)

  • Author

I have done and it worked, but now when the slideshow animates, the background goes white on some parts. Only on my phone though, not too sure why.

  • Author

Hello again,

 

I have been fiddling around with a few things, if I changed the font colour to something more prominent, what do you think of this?:

 

screenie.png

 

EDIT: And looking at that, maybe change the menu bar colour also?

 

EDIT 2! : Like this?:

 

screenie-1.png

Edited by Storm08

  • Author

Quick question (sorry about double posting), but how do you get a background image to fill the visible area of the screen but still have it scrolling with the page if you scrolled down?

 

http://www.devilinsideuk.co.uk

 

Thanks,

Storm08

Edited by Storm08

Quick question (sorry about double posting), but how do you get a background image to fill the visible area of the screen but still have it scrolling with the page if you scrolled down?

 

http://www.devilinsideuk.co.uk

 

Thanks,

Storm08

 

 

Off the top of my head I think you want to use...

 

background-attachment: scroll;

Here we go replace...

html {
width:100%;
background:url(../images/background2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
}

with...

html {
width:100%;
background:url(../images/background2.jpg) no-repeat;
background-attachment:scroll;;
min-width: 1024px;
}
  • Author

 

Here we go replace...

html {
width:100%;
background:url(../images/background2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
}

with...

html {
width:100%;
background:url(../images/background2.jpg) no-repeat;
background-attachment:scroll;;
min-width: 1024px;
}

 

Brilliant! That was simple (thought it might be).

 

Thanks very much!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.