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.

Peter Pearson - Web Design Portfolio - Width Issues

Featured Replies

Hi,

 

http://www.peter-pearson.com

 

My redesigned site has been up a month or so now but I think it could do with some tweaking. I should have put more thought into the distance between each item in the portfolio. I'd be interested to hear if it displays ok at high-res (I'm currently limited to a rather lacklustre monitor), perhaps I should increase the spacing so there is only one item on screen at a time? I'd probably be looking at a site in the region of 20000px wide! Surely that's got break something somewhere?!

 

On a side note... I'm job hunting. Anybody know of any digital agencies (or there abouts) looking for a junior designer/developer? Or can you suggest somewhere new I might look?

 

Thanks

 

Pete

Thats a really interesting design.

Ive attached an image displaying your site on a 19inch widescreen monitor at 1440 x 900 res.

 

It would be dificult to get the width between projects right so that each project aligns to the centre of a persons screen because everyone uses a different size monitor set at different resolutions. It might be easier to keep the projects centered on the screen if the contents scrolled side ways onto the screen, instead of the screen scrolling side ways to the projects?

 

This is a personal preference but I don't like the scrolling down thing on the first page. It could be cause its late and im tired but i wanted to get to your content fast and scrolling down to find nothing there was a bit annoying.

 

I appreciate that it's a very unique design, but if you hadn't forwarded me to it Im sure it would of taken me a while to figure out what the site was about. Perhaps put a few lines on the first page to give the viewer an idea of what the sites about?

post-10843-1238626224_thumb.jpg

Very interesting and unique indeed.

 

A great demo of thinking out side the box. Your portfolio of work is impressive also. I had some good thing with the organism thing, actually it's still open in a tab right now. I wanna see how my organisms are interacting with one another. :p

 

In regards to design agencies.

 

That all depends on where you live.

 

Best advice I would give (not employed yet) would be to go out there and visit the agencies in your area.

 

That would be a good start.

Very fresh presentation idea and nice style, only one thing it's hard to find the way back to first screen that have navigation menu for me when I am far away from first screen.

Perhaps some javascript to determine the current screen resolution which sets the distance between depending?

 

Nice site.

very nice design.

Can u tell me how u made those blue lines behind your projects ?

How it works ?

It's very nice, and I like the way you've tried to be different from everyone else. It doesn't display quite right for me tho, but I'm on a widescreen monitor (same as Final above). I also really like the blue lines that appear as it scrolls.

 

One thing I did notice, when you navigate away from the page and then hit "back" it returns you to the first screen. You might want to find a way for it to remember what page the user was last on.

 

Other than that it's really good, well done.

I love JQuery! And I do like your site. I personally wouldn't worry about displaying only one item per page. You can't cater for everyone, and I think it doesn't look too bad when there are more than one on a screen, for example I have dual monitors and it's pretty cool seeing the things slide over.

 

The only thing I'll say is you don't give the user any indication of how long they'll be sliding over for and how many projects you are showcasing and as great as your work might be, I doubt everyone will look at every single project of yours. I'd add a thumbnail navigation for your projects on the page somewhere and this will finish it off I reckon. Good job though, I like!

Use percentage. In that way the site's width will be determened by the user's monitor size.

 

Great design. Because you wrote width issues, I thought your content was all squeezed to the right. I'm watching it at 19" 1620*something...

 

Edit: Just got to say it. I just love the water colors you are using. I've always admired designs like that. How are you doing it? Photoshop, or do I need a new program?

  • Author

Thanks for the feedback guys...

 

 

Use percentage. In that way the site's width will be determened by the user's monitor size.

 

Edit: Just got to say it. I just love the water colors you are using. I've always admired designs like that. How are you doing it? Photoshop, or do I need a new program?

 

Using percentages for the width sounds like a great idea Sono, It's going to take a bit of figuring for the different elements but I think I'll give it a go. I'd quite like to try and get it showing one per screen, it doesn't look so good on higher res monitors and I'm currently getting about 87.5% of users with screens over 1024px wide.

 

The design is not actually done in watercolour. It is purely one one original photo and fun and game with photoshop .

 

 

This is a personal preference but I don't like the scrolling down thing on the first page. It could be cause its late and im tired but i wanted to get to your content fast and scrolling down to find nothing there was a bit annoying.

 

I appreciate that it's a very unique design, but if you hadn't forwarded me to it Im sure it would of taken me a while to figure out what the site was about. Perhaps put a few lines on the first page to give the viewer an idea of what the sites about?

 

Yeah, I've been having a go at fixing the scroll down issue, using height: 100% on the right elements seems to work fine across the different browsers. Can't really remember why I did it in px, there was definately an issue somewhere along the line.

 

A bit more on the initial page is probably a good idea, I really like keeping it clean but it does need to serve a purpose. I've been thinking it needs to do more to tell people to 'give me a web design job please'

 

 

Very fresh presentation idea and nice style, only one thing it's hard to find the way back to first screen that have navigation menu for me when I am far away from first screen.

 

Good thinking, it's another of those things that have passed through my head at some point and promtly been forgotten. A little icon with the text size links might be best.

 

 

One thing I did notice, when you navigate away from the page and then hit "back" it returns you to the first screen. You might want to find a way for it to remember what page the user was last on.

 

Anybody got any suggestions on how to do this? Saving to a cookie everytime the user hits a scroll button seems a bit excessive?!

 

 

very nice design.

Can u tell me how u made those blue lines behind your projects ?

How it works ?

 

 

stripey1.jpg

 

This image is fixed in place on the page, on the body tag:

 

background:#F3F7FF url(../images/stripey1.jpg) no-repeat fixed left 100px;

 

 

post-10987-1238693863_thumb.png

 

A .png with the flowing lines is made the background of a div element wrapping the page content. In this example I've made the parts that would be transparent black so they are easy to see:

 

background:transparent url(../images/flow5.png) repeat-x scroll left 100px;

 

 

As the lines move over the fixed stripey element you get the cool flowing effect. The major drawback is that the background really needs to be one plain colour or you will be able to faintly see the lines before the stripes reach them. In addition textured .png files tend to have monster file sizes.

 

Hopefully that makes some sense, I may do a proper tutorial for it at some point.

 

Have a look at these for some more (slightly buggy) examples. Use the GO buttons to see them flow properly:

 

http://www.peter-pearson.com/newdesigns/portfolio4/

http://www.peter-pearson.com/newdesigns/portfolio3/

http://www.peter-pearson.com/newdesigns/portfolio2/

Anybody got any suggestions on how to do this? Saving to a cookie everytime the user hits a scroll button seems a bit excessive?!

 

Could you add a variable to the URL (?page=portfolio) without physically refreshing the page? I'm pretty new to jQuery/Javascript, not sure if this is possible.

 

I don't see any problems with the cookie method though, it shouldn't affect performance and no-one disables them anymore.

damn, very clever peterpearson !

Thx for this, its good to know how to do something like that.

  • Author

I've just updated the site slightly so you shouldn't be able to scroll down at all once it has loaded (unless have less than 525px of vertical space in the window - Think I can live with this!)

 

Is this not the case for anybody?

 

Cheers

Peter: I don't know how you can do it, but I remember I've seen a site with horisontal scrolling before, and there you could scroll sideways with your mousewheel. You should check for a solution like that.

 

Don't remeber the site's name btw

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.