add arrow-down arrow-left arrow-right arrow-up authorcheckmark clipboard combo comment delete discord dots drag-handle dropdown-arrow errorfacebook history inbox instagram issuelink lock markup-bbcode markup-html markup-pcpp markup-cyclingbuilder markup-plain-text markup-reddit menu pin radio-button save search settings share star-empty star-full star-half switch successtag twitch twitter user warningwattage weight youtube

Preview the upcoming responsive layout at Cycling Builder

philip

5 months ago

Today we announced the launch of our cycling site Cycling Builder. If you want to get a good preview of what the upcoming responsive layout for PCPartPicker will look like, feel free to check it out and let us know what you think below.

We're finishing up the migration of a few more templates (mainly for completed builds). Once that is done we'll move PCPartPicker over to use the new layout.

https://cyclingbuilder.com

Comments

  • 5 months ago
  • 18 points

Looks like it would be nice on mobile, but it's way too big on desktop. It looks like the new Google products, which are, for some reason, absolutely giant. Please offer an old.pcpartpicker.com, or perhaps a Stylish theme could be made by the community..?

  • 5 months ago
  • 4 points

This pleaseeeee

[comment deleted]
  • 4 months ago
  • 15 points

The theme makes it harder to use on desktop as I have to scroll down more because everything seems bigger and more blank space for stuff while the old layout was more compact.

  • 4 months ago
  • 12 points

Grumble. Another website fixes what isn't broken. This seems to be a trend. Mobile users get an upgrade and desktop users feel the pain.

  • 4 months ago
  • 12 points

Crap change. Maybe works for mobile, but given it's "PC Part Picker", you might consider desktops as your primary customer base.

Dunno what exactly you've done, but the added vertical scrolling required is excessive, especially as I have a 16:10 monitor. On 90% it's slightly better, but anything smaller and the text becomes broken and difficult to read.

Please sort that out, and remember your user base. You're getting pretty much the same feedback from many users. ;)

  • 4 months ago
  • 6 points

Just to add...see the whitespace that's causing some of the issue:

(or red space in this highlighted case) https://ibb.co/w0fHFCT

"Choose A CPU" takes about 8% of the vertical space. Not really crucial, considering the alternative. I appreciate the ends might be a reactive width thing. It would make sense for the account menu options to drop to the same level of the site menu items. It could free up 12-15% of vertical space.

Then there's the item image roll-overs. Given that on roll-over there's a large pop-up, there's little need for the mini-image to be dictating the height of each line. If shrunk to 32 x 32, the 'Add' button would become the line height dictator (34px). This makes sense, as all items should have an add button, but not all will always have an image.

So there's some feedback. Be original and take it on board. :D

  • 4 months ago
  • 11 points

How do I switch back to desktop view? New layout is frustrating. I can't see reviews.

  • 5 months ago
  • 10 points

Im not being toxic, but i do prefer the old design. As some people seem to think, its a bit too zoomed in and zooming out within the browser doesnt seem to scale well. Is there anyway for this to be different?

[comment deleted]
  • 4 months ago
  • 1 point

Nice. 67% did it for me. Pitty is not like it used to be.

  • 4 months ago
  • 9 points

Eh, I appreciate the work it takes to roll out new site designs, but unfortunately this one seems like a miss to me. I'm not seeing anything new that I particularly like, and a lot of stuff (mainly to due with spacing and empty space everywhere) that I don't like.

I would just like to point out that this isn't a magazine or a museum - I use it as a tool to help me build computers, and I value functionality far more than aesthetics. I realize that having lots of white space and gaps is something encouraged by graphic design people - and for good reason in art projects. But the aesthetics shouldn't get in the way of it being a useful tool.

From someone who wanders the web mainly for the purpose of finding information, I value information density. The more empty space, the less information I feel like I am getting. It almost always means less information that is directly available. Both cases discourage me from spending as much time on that site.

  • Firstly, there are basically five bars across the top of the screen: The really dark bar with PCPartPicker and account stuff, the slightly lighter bar with the different page sections, the purple section header, then a big white empty space, then the box with the link, compatibility, and wattage.

Basically, everything takes up far too much vertical space. Those five bars take up about 2/5 of my screen when I load the page, and that means that my whole point of visiting the site (using the parts picker) takes extra actions to get to. It also means that every time I click a link that takes me back to the main pars picking page, I have to scroll down again to see the whole list.

The most obvious offender is the white space between the section header (purple bar) and the link/compatibility box. That white space could be reduced by 90% of its current value and still be just as useful as a separation.

The second (and probably biggest) offender is the purple section header itself. "System Builder" does not need anywhere close to that much empty space above and below it. Reducing the vertical space by 40% or so would relieve that excess space and correspondingly allow more space for the actual system builder part.

The remaining bars all have varying degrees of excess space, and could stand to lose 10-20% of their space. The exception being the compatibility/wattage section itself. That specific bar is about the right amount of space. Reducing the other bars (including the link/sharing box) to have the same amount of empty space as the compatibility/wattage box would be great.

  • Within the list itself, a fairly minor beneficial space adjustment would be around the "add a part" buttons. Reducing the vertical separation above and below them by about 50% would help keep the list a bit more dense, and thus have more information visible to the end user. Individually it is a minor change, but it would add up quite a bit over the entire list.

  • The green colour is just a bit too bright for me, it is a little hard on the eyes. Darkening it just a bit would be great.

  • If you are going to do a site redesign, how about having a dark theme option? I would love to have something with a really dark gray or black background instead of the white/very light gray it is currently. Much easier on the eyes.

For what it is worth, I use PCPP on desktop and laptop, and these comments apply even moreso on the laptop than the desktop. Scrolling on a touchpad is even more of pain than it is with a mouse. I've used it a few times on mobile, but honestly, I don't like using the web on the mobile at all. Not because of your page, just that I don't like dealing with the web on a postage stamp sized screen.

  • 4 months ago
  • 7 points

I love when websites take a site that looks and works fine and ruins it for no reason. Although I assume the new layout is designed for an insane amount of ad space, based on the empty areas on the wings and top of the site.

  • 4 months ago
  • 6 points

Not sure if you've just rolled out the cycling code onto the PCPP, but either way I can confirm the UI for PCPP is now officially a complete and utter mess! Love you guys, but this is definitely not good. Kinda looks like some primary school kids have had a crack at it

  • 5 months ago
  • 4 points

The new design looks good but i hope the "Detailed List" feature is still kept so the design doesn't look so big. And hopefully the design will be revised by the community at least a bit to be more efficient.

  • 4 months ago
  • 5 points

This. New site is pretty, but I'm not a fan of how large everything is now. Hard to look at your build list without scrolling all the time.

Also having trouble finding the button on part pages to find completed builds with that part.

  • 4 months ago
  • 4 points

I like the old layout more than the new one for many of the same reasons as others have already posted.

  • 4 months ago
  • 4 points

Looks awful. Don't want to use it anymore. Thanks for the work on the previous version. Goodbye.

  • 4 months ago
  • 3 points

The design is alright with it being launched, it's just everything is way too big and forces me to zoom out 80% on my browser just so everything is scaled reasonably, even with a 16:10 monitor it requires tons of scrolling on the site.

Hope an option in "Preferences" would be added and let you be able to scale the layout without scaling the text as well unlike the usual zoom function on a browser. Otherwise the design is pretty well done.

  • 5 months ago
  • 2 points

Works great on mobile, though I hope the current desktop site of PcPartPicker isn't replaced when the layout is finalized

  • 5 months ago
  • 2 points

Can we get an ETA on responsive?

  • 5 months ago
  • 2 points

A week or two.

  • 5 months ago
  • 2 points

woooo!!! cant wait to be able to use mobile again without having to misclick a thousand times on buy instead of the X lol

  • 5 months ago
  • 2 points

Oh man the anticipation is killing me, 10 days later

  • 5 months ago
  • 1 point

Thank you, can’t wait!

  • 4 months ago
  • 2 points

Back off the font sizes, especially in the filter area in the parts selectors. You're not leaving enough room for the important stuff, which is the product list. The new layout wastes a lot of space on the desktop and a lot of it is excessively large font selection.

  • 4 months ago
  • 2 points

New site design feels a bit like change for the sake of change.

Only thing I don't like about the new design is that the "Guidelines/CoC" are to the side rather than below the comment box, which means when I paste a build or type a long paragraph the word wrapping is way more excessive so there is a lot less natural organization to pasted or larger content.

Otherwise, it's fine I suppose... Feels about like the recent changes to Office where they basically brought back font and icons from Apple's 1984 Macintosh and called it "new."

  • 5 months ago
  • 1 point

Looks amazing.

I do notice that many PCPP residents (me included) are now entering the forums.

I'm also wondering, as part of the PCPP network, do you intend in the future for users to use one account across both sites?

Anyways, congrats on the new site launch!

  • 5 months ago
  • 2 points

We don't have any plans to share accounts across sites. We tried that with the PortablePicker site several years ago, but it ends up complicating some things unnecessarily so we decided not to go that route again.

  • 5 months ago
  • 1 point

Sounds sensible.

  • 5 months ago
  • 1 point

Nice.

  • 5 months ago
  • 1 point

i like it

  • 5 months ago
  • 1 point

It looks good. I could not find a SE pk ripper frame but, lol : ) Looks like you did a lot of work there. It did not go to top of page when I went to page 2/next page/etc of parts.

  • 4 months ago
  • 1 point

Well, this totally caught me by surprise...

Might want to document somewhere that the domain cdn.cyclingbuilder.com needs to be whitelisted before posting comments will work.

  • 4 months ago
  • 2 points

That's a bug - we'll get that fixed.

EDIT - should be fixed now.

  • 4 months ago
  • 1 point

I do like the change

  • 4 months ago
  • 1 point

Love the new layout, both on PC and phone, but I liked being able to see the star ratings of parts when they are listed. Any plans of bringing this feature back?

  • 4 months ago
  • 2 points

The rating stars should be visible on desktop unless the window is really skinny. On mobile it should be visible in landscape mode (but likely not portrait mode). Does that match up with what you're seeing?

  • 4 months ago
  • 1 point

Unfortunately it does match up, but I understand why now. Thanks for explaining!

  • 4 months ago
  • 2 points

I'll see what we can do about squeezing ratings in while in the portrait mode.

  • 4 months ago
  • 1 point

Awesome!!

  • 4 months ago
  • 1 point

Please at least offer a dark theme. Really am not a fan of non dark theme websites let alone the new lay out.

  • 4 months ago
  • 1 point

Hey Philip, can you stick the featured build at the very top, followed by the build guides then the most recent completed builds? Right now the featured kinda feels underwhelming, especially on mobile. Also, I’m sure it’s been brought up but improving the resolution on thumbnail for the completed builds. Thanks, appreciate all you guys do!

  • 4 months ago
  • 1 point

Thought i'd allow 24-48 hours before commenting. First impressions weren't great as the previous version was AWESOME! Or not, maybe just a dose of matured familiarity. As with most things new it takes a little warm-up time for some comfy - i'm getting there! I don't see much issue with object/text enlargement on my 1440p res daily driver but I can see what others are referring to when running the same on 1080p.

  • font size in comment/reply fields could be a tad smaller

  • not a fan of the grid lines in threads which envelope follow-up comments/replies.

  • exported part lists in threads could be more kinder to the eye, maybe some greater resemblance to the previous colour scheme. The funny thing is, i can't even recall the comparison but just like higher refresh rate GSYNC, perceptive disparity manifests.

Kudos for mobile responsiveness. Although i'm a desktop jock, it's nice to see a more reassuring portable version of the site - something that will definitely see better use from me. Tried it out on both my 10" tablet + mobile - looks great!

  • 4 months ago
  • 1 point

Overall I like it. Having done web development myself, I think I can understand some part of what it must have been like to roll this out. Here is some feedback I have:

  • Font size on forums should be smaller on desktop, as many have said. In this text field, the font size is larger than the "leave a comment" heading above it (1.25rem vs 1.125rem according to dev tools).
  • Some text renders in a different font. For me, it's shown in Roboto (which I have installed) instead of TeX Gyre Heros (Helvetica lookalike). So far, I've noticed this on the heading for forum posts and on the tagline in the footer ("pick parts / build your pc / compare and share").
  • I don't think forum comments need a horizontal line between them. It should at least be thinner (probably only 1px).

Again, good work overall.

  • 4 months ago
  • 1 point

[consider this an edit]

Another reason not to have horizontal lines between comments is that it's a little vague, since users can put horizontal lines in their own comments.

  • 4 months ago
  • 1 point

Like with so many 'responsive' pages, there needs to be a limit to how much it expands.

I'd say the new site makes more use of the space given but is far less information efficient with that space.

  • 4 months ago
  • 1 point

This design is frightening, simple, square and too spacious. The other version had soft colors that didn't hurt my eyes, this is all white as if it were an office program. Also now I have to lower the wheel of the mouse to see all the parts that I have put to my system. Look at the Build Guides page, it looks HORRIBLE. Look at the Completed Builds page, it's not bad but it's too big and that white background still makes my eyes burn. Look at the Browse Products page, the same thing I said before, it's too big. The previous design is perfect, I don't see why this change is unnecessary.

  • 4 months ago
  • 1 point

The new PCPP version is pretty great so far.

Is there a chance that the "Remove custom prices" option in lists will be coming back? While it's not a huge deal to spend a few minutes removing custom prices, the ability to remove all custom prices was a nice quality of life addition.

  • 4 months ago
  • 1 point

Thanks for bringing that up - I totally missed that feature when we migrated things over. I'll make sure it gets added back.

  • 4 months ago
  • 1 point

Thank you Phil!

  • 4 months ago
  • 1 point

I love the new layout. I noticed a lot of people are complaining about it being to large on desktop. However I use a 43" 4k monitor and it seems fine to me, quite comfortable in fact. Maybe just a problem on smaller monitors? I really like the new(?) part History feature. Or was it always there and I never noticed it lol?

  • 4 months ago
  • 1 point

it was there before

  • 4 months ago
  • 1 point

Guess I missed that lol

  • 4 months ago
  • 1 point

its ok

  • 4 months ago
  • 1 point

I like the new style and layout, althought I must admit, it'a a tad more confusing. Separations and categories are not a clear and clean as the previous iteration, and the sorting takes a bit of getting used to.

Regardless, the time and effort put into it is noticeable and, for something I don't pay for, this is as good as it gets.

Thanks Philip.

  • 4 months ago
  • 1 point

i dont like how the message button is a dark orange, it looks wrong

  • 4 months ago
  • 1 point

That indicates you have new comment replies or unread private messages.

  • 4 months ago
  • 1 point

i know but i just dont like how the orange goes with the black

  • 4 months ago
  • 1 point

What happened with the drop down list with the selection for lowest price, highest price, and etc. It was very useful and was something that I think didn't need to be removed.

  • 5 months ago
  • 0 points

Okay, this is epic.

  • 4 months ago
  • 0 points

Good work guys, I think looks pretty good. better than the previous site imo, but the scaling could be better on desktop. it kind of feels like a mobile game ported to PC, with all of the big buttons and stuff. and just like another poster said, something like an old.pcpartpicker.com would be nice.

  • 4 months ago
  • -1 points

Love the new format! Finally can browse on mobile without frustration!

[comment deleted]
  • 4 months ago
  • 1 point

That's coming back soon. Was not left out on purpose.

  • 4 months ago
  • 1 point

I like the new design, and while I have not tried it on my phone yet I look forward to doing that.

How do I use the Create Folder option? I understand how to create a folder but how do I use it now?

I would like to create a folder which I have done, and then move my older PC designs into it.

Also It would be nice if there was a feature that would show the best place to buy completed systems, especially Laptops. It should work like any other computer part.

  • 4 months ago
  • 1 point

We’ve talked about listing completed (desktop) systems, but I’m not sure if that’s something we’ll add. Laptops might make a comeback though.

On saved part list folders, to populate them just use the drag handles on the saved part lists to drag and drop them into the folder. When you drag it near the folder you’ll see a drag target highlight.

  • 4 months ago
  • 1 point

I have 133 computer designs on pcpartpicker, I created folders to store them in based on the processor code name or similar depending on the number of a particular type.

It took nearly 3 hours to do this because I had to drag and drop each individual design to the correct folder. It would be nice if I could select more then one item at a time and then drag all of the selected builds to a folder with one action.

Clicking the drag handles and getting the desired results almost always requires an excessive amount of attempts, 90% of the time it takes 4 - 10 tries to get the drag handle to respond properly. I tested this in Fire Fox, Chrome and Edge (Not the Chrom Edge, but the old Edge).

It does look very nice now that everything is categorized well.

When saving a design it would be nice if a date could be placed automatically on the build description somewhere.

On the part selection screen for example a list of motherboards, it would be nice if there was a little caution icon or similar that the end user could hover over to see that the part could cause compatibility issues. Right now the only way to get a compatibility error or warning is to actually select the part. This would save some time for the end user and likely result in slightly lower web server and database overhead.

Sort

add arrow-down arrow-left arrow-right arrow-up authorcheckmark clipboard combo comment delete discord dots drag-handle dropdown-arrow errorfacebook history inbox instagram issuelink lock markup-bbcode markup-html markup-pcpp markup-cyclingbuilder markup-plain-text markup-reddit menu pin radio-button save search settings share star-empty star-full star-half switch successtag twitch twitter user warningwattage weight youtube