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.

Design

Featured Replies

Hoi Netraam (or Alexander?),

Welkom op het forum, uhm ik bedoel: Welcome to the forum.

 

First, the header (picture and the logo text) is to high and provides to little information for its prominence and size. I would at least try to combine the picture and the text by placing the text over the picture and in doing so save, I'd say, at least 100 pixels. Apart from that I will only comment that giving everything rounded corners is a little "last years" fad.

 

The differences between the two images is negligible and I don't think there is a really good reason to choose the one over the other.

...what I want to do is let the top image change using jQuery

You can still do that by placing the image in the background of lets say a header div and putting your logo as a background image in a h2 inside the header div ("removing" the text with a "text-indent: -999em;").

 

Something like so:

CSS:
#header {
width: ...px;
height: ...px;
background: transparent url("iets.jpg") no-repeat left top;}

#logo {
width: ...;
height: ...;
background: transparent url("logo.png") no-repeat left top;
text-indent: -999em;}

HTML:
<div id="header">
<h2 id="logo">Volley Zoersel</h2>
</div>

Looks nice aside from the large header image sticking out. I think it'd look better if you cropped it to fit with the rest of the page instead of sticking out to the edge of the black.

Yes, the large headers are bugging me also ...

 

I'd suggest combining the two so when people visit the site they are not instantly greeted with little content. The idea is to want them to have a look around, and with those headers, they could very well think they're in the wrong place.

 

Not sure about the grey also ... I think I'd probably opt with a traditional white.

 

Hope that helps in some small way.

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.