Site redesign!

There’s one day left to go on our 20% off t-shirt sale: visit the store to order!

As you’ve no doubt noticed, we’ve moved to a new site design, courtesy of Paul Beech. We haven’t been able to test all OSes and all browsers, so, with your help, we’re going to be troubleshooting it over the next week or so.

If you see something that doesn’t look right, please let us know in the comments below. (We’re already aware that some browers are displaying the Twitter widget down at the bottom of the page, and reproducing the bar at the right down there too – we’re fixing it.) A tip: we prefer helpful comments. “I don’t like it” is not a helpful comment. “I don’t like it because I am unable to read black text on a white background/cannot bear soft fruits” is a helpful comment. “I love it” is not necessarily helpful, but it is something we’d like to read!

126 comments

Avatar

the buyapi.png seems to be missing

Avatar

On the “Downloads” page, the sub-headings (>>Soft-float Debian “wheezy”
<<) look a little strange. margin-top could improve things.

Chromium 23, Ubuntu 12.04.

Avatar

Thanks – we’ll get that sorted, but for now I’ve added some extra line breaks in a hacky fashion.

Avatar

Better in a hacky fashion than a hacky-sack fashion, I always say! :D

Avatar

http://www.raspberrypi.org/wp/wp-content/themes/raspite/img/buyapi.png is missing for me too. Lovely otherwise though! Maybe they could take a look at The MagPi too at some point – could do with some design love…

Avatar

Little bug showing in chrome where it says the site is failing to include Jquery.js full error : Failed to load resource: the server responded with a status of 404 (Not Found) http://www.raspberrypi.org/wp-content/themes/raspite/js/jquery.js

Also thanks for the logo link :D

Avatar

I find it impossible to distinguish such dark red links from surrounding text. Terrific otherwise.

Avatar

I really like the site redesign. It is more functional and easy to use.

Avatar

Here’s what a iPad sees (4-5 screenshots):

https://www.dropbox.com/sh/a1n8v0miigd9too/qdKOPHQ6nH

Avatar

Thanks very much, that’s super helpful. The normal site looks mostly useable and as intended. The forum does not. I’m on that next (the links _shall_ be underlined :-)

Avatar

I could be mistaken but the diagram on the Quick Start Page (http://www.raspberrypi.org/quick-start-guide) looks stupidly large on Chrome under Windows 7. Is this intentional? Other than that it looks great, well done everyone involved :-)

Avatar

Paul actually just mailed me to let me know he’s dealing with that!

Avatar

Couple of front page screenshots from a Nexus 7 running Chrome :)

http://raspi.tv/wp-content/uploads/2012/12/Screenshot_2012-12-09-21-39-40.png

and (same url with different filename
Screenshot_2012-12-09-21-39-49.png

Avatar

Excellent! Looks like it should on smaller screens :-)

Responsive FTW. None of that shonky mobile theme stuff :D

Avatar

Oh hold on a minute. This is the front page, the others were this page ;)

http://raspi.tv/wp-content/uploads/2012/12/Screenshot_2012-12-09-21-54-14.png

So it is still a bit mobile themey.

Avatar

Yeah. Need to find that thing and kill it. So 2009…

Avatar

Looks great on a Galaxy S2 with Firefox :) Lots of scrolling, but it’s a small screen and not at all mobile themey.

Avatar

Found it, killed it. :D

Avatar

Good shot Liz! Looks like it should now (I think)…
http://raspi.tv/wp-content/uploads/2012/12/Screenshot_2012-12-09-22-19-30.png

and
Screenshot_2012-12-09-22-19-38.png

Avatar

This is how it looks on the Android browser (not Chrome).

https://dl.dropbox.com/u/21794648/screenshot-1355089532450.png

Avatar

OK. That’s not so nice. Damn :-)

Avatar

Actually it is better than the old design – you couldn’t always read the comments at all before! I can live with a few misaligned bits of text on what is, these days, an aging browser. Newer Android phones going forward use Chrome, and as someone else posted, it looks fine on Chrome. :-)

Avatar

There are some things I like, and there are some things that I don’t like. An example of the things that I like, the new bar at the top of the screen that follows you wherever you go. Nice!
What I don’t like is that the “Leav a Reply” box is now at the bottom of the page, instead of the bottom of the article. Now I have to scroll farther to leave a reply. People like to be lazy on the internet.
Also, I just noticed the HTML tags at the bottom there. Are those all that’s supported, or are there more? Love that, by the way! Kids who come here will see that, and be like, “I didn’t know I could do that!”

Avatar

Hmm, I don’t really like the new design.
I don’t care about tweets and just want the news on top of the page.

And I dont Understand the sorting…
There is the headline “Site redesign”
then the line “There’s one day left to go on our 20% off t-shirt sale: visit the
store to order!”
apears and after that there is the article to the headline.

Avatar

The new layout is nice, but the thing I don’t really like are the twitter feed and latest forum posts just after the first article.

Avatar

+1, forum posts and feeds are less interesting than articles, specially if one visits the site for the first time.

Avatar

I don’t care about tweets either. I visit raspberrypi.org with my android phone 90% of the time. There I even get the
“Buy a Pi”,
“Supported by”,
“Friends of Pi”,
“Twitter, Cheep, Chirp” and
“What’s happening in the forums?”
blocks before I can read the second article. I do not like this structure.

What I do like is the navigation bar and the “raspberry red” article headings.

Avatar

Hi,

The embedded YouTube videos won’t play (Firefox on Mac).

When I view source, the iframe tag looks a little upset

iframe src=”http://www.youtube.com/embed/zj9bFgsaBd4″ frameborder=”0″ width=”640″ height=”585″&hd=1

I can also see php code leaking out in the Digg code:

?php the_permalink();?

Avatar

I should have mentioned the affected page:

http://www.raspberrypi.org/archives/2675

Avatar

Fixed! Thanks for the spot.

Avatar

Hi Liz,

Here some (I hope useful) comments:
– On the forum, the top bar stays always at the top, even when scrolling down. The top bar should get out of the screen when scrolling down, because it takes too much space : our screens tends to be larger than taller, so taking so much height (there is already the window frame, the tabs bar and the adress bar…) means there is only 2/3 of the screen height useful for displaying the messages.
– On the FAQ or Quick Start (and some others), only half of the screen width is used. I imagine this is needed to be compatible with all screen sizes, but again, as I have a 16:9 sized screen (1366*768), it seems a lot of space is wasted on the sides, and some small sentences are spread on several lines (I recall however that some studies fixed the optimum number of characters per line around 63, like in books, so maybe the problem is having large screens ;) )
– Also on FAQ, Quick Start, Download and About page (but not on the main one), I can scroll horizontally a bit (about 20% of the screen width) despite there is nothing additional to show on the right side.
– From the store, I didn’t figured how to get back to the main site (from .com to .org).

Otherwise, this seems nice (tested with Fedora/Firefox 17).

Keep up the good work, this is a pleasure to use this amazing piece of hardware and learn from this community (despite not being a child anymore) !
Getting back to testing my fresh kernel with CAN bus support !

Avatar

Site is not rendering very well on iPhone5. Seems like the mobile wp plugin is active in some cases and not others.

Avatar

I’m seeing that too. PITT, I tells ya.

Avatar

Oh – and we know that the Twitter widget isn’t updating. Eben’s fixing it tomorrow (requires a cron job tweak).

Avatar

The responsive design isn’t working at it should, I assume the site is powered by Bootstrap, there are several errors, specially when you resize the page al the navbar collapses into a button, once you click the button the menu entries appear above the Raspberry Pi logo, and without alignment, I think the normal function is to display these just below the brand image, also after doing this and resizing back to fullscreen the Raspberry Pi Logo brokes the navbar style, and the bar doubles it size leaving the logo at the bottom and the menu entries at the top.

I’m using Firefox 17.0.1 and Ubuntu 12.10.

Avatar

Me again. The font of the dropdown menu “About” messes with the bakground of the bar once you have clicked on it, you should change the color for active links from white to another darker one. Also using caret class and arrow is displayed next to the name of the dropdown , helping us to know there is actually a dropdown menu.

Hope this information could be useful to you.
Sorry for my English.

Avatar

Thanks Rekuen, It’s Bootstrap, yes. I’ll look into tidying it so it plays more nicely. If you hadn’t have mentioned I would have assumed you were educated at Eton :-)

Avatar

Yuk! Don’t like the new layout. Like Andre, I do’t care about tweets, otherwise I’d sign up with twitter. If you MUST have them then make them have lower significance than the regular web content.

The previous design was simple & clean. FYI- The logos on the side take up way too much room on Firefox 17.0.1 (running on Ubuntu Linux 12.10).

I know you can’t please everyone, but I won’t be coming back every day. It’s too cluttered & messy. Sorry! I don’t want to waste my valuable time trying to avoid tweets. A retrograde step :-(

BTW – the site seems to have moved away from highlighting interesting projects that people are undertaking & the is more ‘noise’.

Avatar

You win some, you lose some – for example, the tip of the day is great. I’m planning on using a Chrome add-in to get rid of the stuff I don’t want to see. It’ll be different things for everyone, that’s the trouble.

Avatar

The site doesn’t work very well in a mobile browser. It’s still a good redesign though.

Avatar

Which mobile browser, what device, and what problems are you seeing?

Avatar

Check my comment below, some mobile related issues in it. I’ll see if I can check it on my Android tablet tomorrow as well.

Avatar

It all appears so bland. Flat wave of white and slightly grey. Adding more colour depth would make it more visually attractive. Perhaps darken /img/subtlepatterns/grid_noise.png, and add a right border to .span4 to separate it more obviously from the news feed.

The Tip of the Day is a fun feature, hopefully the community can come up with some good little suggestions to keep it interesting!

The Twitter feed and “What’s happening on the forums” appear side-by-side under the first news post – is this the bug you spoke of in the post? It just seems to artificially finish the page, and discourages scrolling past to see the older news.

Maybe also a slight :hover style for the older post you are hovering over, or alternate some background colours. as again the monotone design blurs them together.

Avatar

Wonderful! When I started browsing the site a couple of weeks back I was wondering why the main page didn’t use the same great design as the forum did.

I’ve noticed a few issue mostly related to the reactive design:
* The “dropdown” menu used in windows with less width than 980px is horrible, I hate how it just extends the site upwards, if possible make it dropdown displaying above whatever is on the page below it, like a dropdown.
* If you load the page with a window with a width below 980px or resize the window after loading, then open the menu and resize the window back the menu will now display on its own row above the site logo rather than on the same row as it should.
* On the iPad many pages on the site don’t use the whole width of the display. The main page does use the whole width for both the logo/navigation row and the content below. The wiki page uses the whole width for the logo/navigation row but not for all the content below. All other pages (except the forum) doesn’t use the whole width for the logo/navigation row and even less of the display width for the content.
* The iPhone has a similar display problem as above, no page on the site uses the whole width of the display but the logo/navigation row and the content are equal in width.
* On the iPhone any page but the main page will trigger a mobile theme (WPtouch) and it won’t stay turned off if disabled by the user. Having the mobile theme activate in the first place is kind of silly when the site is designed to adjust to mobile displays anyway.

Might want to run a HTML validator as well, noticed the one I have installed in Firefox is saying there are some errors.

Avatar

The bar down the side seems to have grown much larger and feels far more “in your face” than it did before. I feel this is likely to be irritating for regulars though it may be better for newcomers.

The comments link is in the wrong place. It should be at the end of thenews item since generally you want to read a news item before reading the comments on it.

There are no borders of any kind to define the edges of different sections making the page feel like a sea of white.

The “friends of Pi” section seems strange in several ways
1: there are six items but rather than being in a 2×3 grid they are in a 2×4 grid with two empty spaces.
2: it’s strange that the pimorini and code club links are going to expired kickstarter/eventbrite pages. In the former case i’d think it should go to their homepage, for the latter i’m not sure maybe a page discribing what happened at the event and if/when there will be another one.

Avatar

oh and another thing after posting a comment your comment doesn’t appear until/unless you reload the page, this is very likely to lead to double posts.

Avatar

Agree – I double posted (5 times) as I could tell if it was submitted.

Avatar

Second this request to have comments link at the bottom, though you can keep the one at the top too.

Avatar

seem fine by me

Avatar

Why is the new split by a twitter and forums updates section? I don’t use twitter and I read all the forums anyway but now I need to scroll past this to see if there’s another news article. I also think the two column banner sidebar distracts from the content column. it has bright contrasting (garish) images that are much bolder than the actual content.

Avatar

No offense but the new site is that nice. It’s very busy and confusing. The old site was better although I would suggest using some colors other than white for everything which might help.

Avatar

Generally like it. Looks more recognizable than the old one (generic WordPress theme, I think).

Bug: Shrink the browser window, open the menu button, then grow the browser window again, and… http://ompldr.org/vZ213cg

Nice-to-have: I’d also like the news to not be below the Twitter and Forum lists; I can get those on their respective pages, but the home page is the only place for news. Maybe put them side-by-side, with the Twitter below the NASCAR logos and the forums below that, and the news beside the now very large sidebar? It could also eliminate the big blank space between the current news item and the rest.

Avatar

Sorry not a fan, I know the old theme was the default WordPress theme but it was far easyer on the eyes, give you what you needed and less of the stuff you don’t need. Twitter and forum things?? As said before if I was interested in twitter I would follow you and I’m signed up to the forum. A bit of a step backwards sadly. :(

Avatar

You could have a much nicer easier and compatible website by just going to wordpress, download it for free. Then get the free html5boilderplate.com template. Then you can do anything you want very easily from the admin page for your site. No html coding, easy management, easy adding features, etc and it’s all free and automatically compatible with mobile and different browsers.

Avatar

i got to admit i think the site at the moment looks unfinished cluttered not well thoght out the site looked exactly right befor they were no changed needed

Avatar

no cont follow this site it just gives me a head ach if anything news should be left of the page the logo to the right below the logos on the right should be the forum and tweets would be much cleaner

Avatar

Liz, are you still running it on a Raspberry Pi? Please say yes!

Avatar

Afraid not! Waaaay too much traffic for that to be an option. Plus, we are bad and do use the occasional Flash video.

Avatar

I liked the other design much better… this new design looks kinda weird and is a little confusing.

Avatar

I’m using Firefox and I cannot see any way to get the forum from the main page – except by clicking on the forum messages. Where’s the navigation bar gone?

Avatar

The RPi image on the Trademark page is way to huge and pushes the text off to its side off the page and adds a scrollbar:
http://www.raspberrypi.org/trademark-rules

Avatar

Would it be possible to enable WordPress’ RSS feeds? Please.

Avatar

Yeah, I would like that, too.

Avatar

Looks good on Android 4.1 jelly bean with the stock browser!

Avatar

On Android 4.0.4 (Ice Cream Sandwich) on a Samsung Galaxy SIII the user name and/or xx minutes/hours since a post was made sometimes leaks over into the post text to their right, depending on the level of indentation (indenting by response level in this context is a mistake IMNSHO – perhaps subtle increasing background shading? ). I would put the user name to the right of the avatar with the posted time ago below that, and then start the post text on the next line, wrapping to the left under the avatar to fill the white space to the left, especially if indenting is retained.

It would be greatly appreciated if we could toggle display of elements like tweets, tips, and earlier Foundation posts via cookies, especially on mobile devices since most data plans are now pay-by-amount-of-data pricing (curse you cell providers who bait with unlimited data then switch to pay-by-amount).

I have no idea why, but none of the RaspberryPi.org pages will load on my iPad 2 in Safari even though every other site loads fine, including the elinux.org wiki pages, Google, etc. The progress bar in the URL field just eventually stalls partway through, without generating a timeout error, which suggests data is trickling in at a low rate. RaspberryPi.org does load fine on my Original Flavor iPad – they’re each running the latest appropriate respective iOS versions – very strange.

Analysis of the new design running on various hardware/OS/browser platform combinations continues …

Avatar

The bleed-over of the name and/or time-since-post into the post text in some cases of indenting also happens on an Original Flavor iPad running the current iOS version.

Avatar

I guess it is an age thing, but I agree with some of the other posters here, if I want to see the Twitter feed, I’ll join Twitter.

I do like the new brighter colors, um colours.

Avatar

Nah, don’t think age has much to do with it. I use twitter daily and I still agree with you, anyone who’s interested in the twitter updates will probably follow on twitter and see them there.

Avatar

If you’re not following us on Twitter, you’re actually missing out on rather a lot. Today, for example, we’ve been showing you where you can win free Pis, how you can run Elite under RISC OS, recommending Python books for beginners, linking to musical instrument/Pi projects for schools, and pointing at a new interview with Linus Torvalds where he talks (briefly) about Pi.

That’s a fairly typical assortment for any given day – I haven’t cherry-picked. And we haven’t mentioned the Ikea monkey once (although he has been much on our minds).

Avatar

How about pushing the What’s Happening in Forums to directly follow Friends of Pi on the right, then move the Twitter feeds underneath that running down the length of the page? Or show a few with a link to see more. Maybe have the whole right column a little narrower. There must be some other viewers here that just are not interested in having to create more accounts to use social media.

That way we could see the older articles directly following the current one.

I don’t know how much work it would be to make the proportions adjustable, and/or adding a hide button.

Avatar

Put that in reverse: if you are putting information only on Twitter you are missing out a substantial number of your users.

Avatar

the pink “BUY A PI” title pic seems really like a button and i press it several times before noticing e14/rs/allied buttons below it……- -!

Avatar

+1

Avatar

I don’t see the “buttons” for Forum, Wiki, etc. unless I’m curious enough to click the button at the top right of the window. The button is labeled with some horizontal lines, so not at all clear what it’s for. Since a lot of comments tell newbies to click on the Wiki or Downloads buttons, it would be nice if they were present by default.

I’m using Firefox 11.0 on Ubuntu.

Avatar

I don’t like it because there is no border between the background in the central column with all the content and the empty space around it on wider monitors. I would suggest the empty space be a light gray.

Avatar

Also, I dont like how the header links are not consistent when one is on the forums page, and that the store does not have the header links.

Avatar

Looks fine the design is much clean , but …probably you need consider to use bold font .

Avatar

I don’t like it because of too large Twitter section.
But tree-way comments are much better.

Avatar

Nice!

Couple of “things” with Firefox on JB on Sammy Tab 2 10.1:

Menu bar works on main page and downloads page, but disappears on Wiki & FAQs pages (reverts to old format)

Mobile theme toggle appears only on wiki page (is this expected?)

“About” doesn’t appear to work – get a dropdown, but none of the items are clickable – also get a huge black bar with the dropdown.

HTH?

Avatar

Oops – wasn’t very thorough at testing :s

Quick start guide is also old format. The mobile theme toggle appears on all the old format pages, but I can’t see one on the new format pages (Main page & Downloads, for me) This mobile theme toggle doesn’t actually appear to change anything – the page refreshes and the toggle is in the same state (On)

Avatar

Blimey – too early in the morning to do something in one go!!

Here’s the black bar that shows under the About link

http://i49.tinypic.com/520una.jpg

Avatar

In Google Chrome v23 on Windows 8, the text on the FAQs page doesn’t use the entire page width: http://puu.sh/1zk12

Avatar

Looks great on Firefox 10 (Windows) for me. Cleaner and more pleasing to the eye, IMO.

BTW commenting on a previous post about FF and forums: Forums are accessibly and seems to work fine for me.

Avatar

I’m afraid I don’t like it either. Like many others I feel the twitter and forum feeds are in the way – They’d fit nicely in the RH column, and not get in the way of the main Blog articles. I often visit the site every day (a great procrastinator!) – but now you can’t tell if you’ve missed an article unless you scroll down. Centering the images, when they’re smaller also leaves a lot of white space – If you left justify the images you can wrap the text on the right and then make more of the screen area. And I know you need the sponsors/friends logos in there, but it doesn’t look right (that’s not very constructive is it!)

Avatar

Less site redesigns, more Picades please Paulo.

Avatar

i don’t like how the twitter and the whats happening sections are displayed under the first article is this how its men’t to be or not. i’m currently using osx 10.6.8 using Safari 5.1.7.

surly the twitter feed and the whats happening would be better on the right side of the page were i’m currently seeing the “Buy a Pi” section is that way the page would flow better. at the moment it’s breaking the page up and some might thing they have reached the bottom of the page and miss vital articals.

Avatar

On the store the customer sizes include XS for children size, but it’s not a selectable option. Any chance of getting this fixed so I can place an order?

Avatar

That’s probably because we’ve run out of that size; let me look into it.

Avatar

When half sizing on windows 7, chrome, 1080×1200 The top bar is missing :( there is a button but I din’t find it :D ^_^

looking kinky thought, gj.

Avatar

I like the top menu but the buy a pi section and the twitter and forum updates on the main page are too large.

Avatar

I think I get the idea for the homepage:
Assuming you visit the site regularly then the top section will show the newest blog post. Then below it you get the Twitter Feed showing what other people are doing with, and saying about the Raspberry Pi and also the latest Forum posts for the more in-depth discussion.
It means from the homepage you get the latest from the Foundation, community news (Twitter) and discussion updates. Putting it all in one place.

Based on this here are a few observations:

On WP7.5 (yes I am the 1 user) the [Follow @Raspberry Pi] button is above WHAT’S HAPPENING IN THE FORUMS?
With the break line between the Tweets and the button it looks like this button is related to the Forum and not Twitter on WP7.5 (HTC HD7)

The grey titles for each section are ‘invisible’ when contrasted with the bright red titles. This meant on first visiting I had to work hard to figure out what was a blog post, tweet, forum post, or something else. Especially with the Tweet/Forum breaking the blog posts flow.

As +1ed somewhere else.
Big Red “BUY A PI” feels like a button.
“Friends of PI” is small and grey by contrast (or lack of contrast)

Other then these minor things I like it. It’s not as intuitive on first visiting but now that I’ve rationalised the layout it works for me.

Avatar

Links in the twitter feed aren’t clickable.

Avatar

The Twitter feed’s supposed to be dynamic, but someone (cough Eben) has to run a cron job, and hasn’t done so yet…I’ll have a play with the links then!

Avatar

Would like comments to appear when submitted or at least provide a refresh to reload the page and # to the post. Otherwise I’m taking it on blind fate that the system worked. As we know that just leads to heartache and confusion.

Avatar

I’m using the latest version of Chrome on Windows XP x64. Is the Twitter feed supposed to be between the latest item and the previous items of news? I think I prefer the Twitter feed to be on the right either above or below the links to other related sites.

Avatar

Not as pretty as the old one, but it’s easier to scroll down looking for past articles, and it loads faster too with not having to download all the images. I should think those using Pis will notice quite a difference!

Avatar

You guys are nuts if you find all this red on white wonderful.

Avatar

I like most of it, however I hate where the twitter feed is. If I wanted to read what was happening on twitter, I’d join twitter. I visit the home page to view interesting news articles about what’s happening with the pi, not what somebody said on twitter!

Avatar

Well, strictly speaking, it’s not “somebody”: it’s me. And a lot of small news tidbits that don’t make it here get put on Twitter, as do lots of useful links and other Pi-related stuff. I’d step back from your dislike of the platform for a moment, and think about content instead.

Avatar

Download page link needs to be at top of site as in old.

Avatar

[ambitious expression] at verifying_an_image.html
drag the image file into the command prompt (Mac instruction -> 3.)
should better read:
drag the downloaded .zip file into the command prompt
This would be more precisely for the beginners / teens, they might download it twice due to different SHA1’s of the unzipped image (Safari unzips it automatically).

Avatar

So much for change management, user testing, QA and useability.

You mean I have scroll down 20 pages to post a comment ???

Sorry guys I don’t like the new site. Yeah, yeah . . . you are going to say it’s a work in progress. The look and feel really sucks. I’m using Firefox 17 and all I see is dense text splattered all over the screen, instead of a web-page/site.

This is almost 2013 and you want me to use tags. Whatever happened to wysiwyg editors that were invented 10 years ago?

Definitely thumbs down for me. Hope it get’s better.

Avatar

Consider ensuring the front page news stories are limited to the first 2 (maybe 3) paragraphs. When they are long like “Of Mohawk Guy and Raspberry Pi” it detracts from the front page.

Having a non related paragraph below the story title such as the “20% of T-Shirts” makes the page look confusing.

Agree with several others about the red on white. Doesn’t do it for me.

Avatar

Looks like the site redesign finially fixed the terrible inability to post comments because the system compltely rejects all my email addresses. Poor show guys, cause now I have a years worth of silenced comments to catch up on :P

Avatar

I miss the pictures to grab my attention. Plus, being older, I notice the new font is a bit thin(or not black enough). If I zoom then the text is too large.

I suppose I’ll get used to it.

WHO MOVED THE COFFEE TABLE !!

Avatar

1. There is too much white, which makes the redesigned site difficult for these old eyes to focus upon.
2. nice job, tho.

Avatar

Other than other opinions I have seen on previous comments, I do miss the “authorship” of each post. Mind you, I could make an educated guess, but still, I found it nice to see the “by Liz”, “by Eben” etc.

Avatar

I hadn’t even noticed it was gone! I’ll get Paul to put that back in. We like you to know who you’re talking to. :)

Avatar

I was very good and scrolled all the way down here to see if it had been mentioned so +1 on that too. Mind you I agree that the inimitable style almost makes it redundant!

Avatar

I don’t like change :-(

Any chance you can limited the amount of the first article that gets on the home page. It rather dominates when its a bi article and makes it difficult to find anything else.

I’m sure I’ll get used to it and then wonder how could ever think of going back to the old design :-)

Avatar

Just a small point but today’s front page looks a little odd, the main story (Mohawk Guy) only fills half the page width (ignoring side margins) as the “Buy A Pi” picture fills the rest of the screen but only for the first couple of dozen lines. After that there is a huge margin on the right until the Twitter and forum latest sections appear at the bottom and then the posts below that are full width.
Couldn’t the Twitter and forum latest sections fill that gap on the right alongside the main article instead of being at the bottom or could the main article spread out to fill the full width just after the “Buy A Pi” picture ends? I hope that makes sense to someone, i’m not sure i’ve described it too well.
To be honest it probably wouldn’t have been so noticeable if it wasn’t for the fact that today’s main post is very long.
Apart from that it all seems fine to me and i love the anchored bar at the top, ideal for jumping between sections quickly.
Keep up the good work, Hiro.

Avatar

Nice redesign!

I’m a Web developer and an interesting conversation came up this week at work regarding mobile design and navigation. You, like us, like the idea of a control element that shows and hides a nav menu; we like it because it means you don’t have to squeeze lots of links into an already small viewport with lots of content. However, some wireframing showed us that positioning the button at the top of the screen makes it quite difficult to reach with a thumb. We found the bottom right to be the best spot, as confirmed by some split testing.

Just my 2p.

Mike Fisher, Geekology Ltd

PS. Probably Chrome on Android but writing this comment was a mare – cursor keeps jumping back to the first line of the textarea!

Avatar

I love the new site design, quite a refreshing feel! However as mentioned by a couple other people on here, adding more colour depth to the site will improve it some more. I feel that the white background strains my eyes a little after reading the various posts for a while, perhaps you could change the background colour with a hint of Raspberry to ease the contrast??

Other than that, the redesign is great. Keep up the good work!

Regards, Mark Johns.

Avatar

Sorry but the new site design doesnt work for me.
It just looks cluttered.
Your eyes arnt drawn anywhere in particular.
The lack of any kind of segregation of information like the twitter posts and buy a pi section and the main text body, just the white space means your eyes wander.
I found it hard to read the latest news article, it just didnt stand out.
and the then had trouble finding the next article.

Sorry to have so many negatives but it is hard on the eyes and Ive not read a news item since it changed.

Gordon

Avatar

Have to agree with those who dislike the tweets. To me Twitter is just noise, which I mostly manage to ignore. To find it so prominent in a page which used to be just interesting news items is irritating. Tweets are short and could be put in a sidebar for those who like that sort of thing.

Avatar

There is something wrong with the comments. Recently I posted a comment which appeared twice (I really only clicked once) and yesterday I posted a reply, got the “thank you for your reply” message, but my reply never showed up.. so here it goes again:

I like the way the site adapts when the browser window is too small (although the way the whole main menu is converted into a popup is weak), but why doesn’t it adapts when the browser window is too big? 800px should be enough for everybody? I think I know best how I would like to read text. Don’t take that control away from the user.
Especially forums are often too small in my opinion. phpbb is perfectly able to scale to the width of the users screen, you broke that.

Line breaks should never be added to code examples because your screen is too small. Line breaks have meaning in some programming languages (shame on those languages). Code examples should have a horizontal scroll bar when they are too wide for the space provided.

Tabbed browsing doesn’t work on the about button (and for webcrawlers and people who don’t allow javascript)

In the header, the current page is indicated by a white background, which is very hard to distinguish from the light blue background.

The header of the forum is strangely different from the header of the rest of the site. ‘news’ is the main page and is equal to the link of the Raspberry Pi logo. this link is only on the forum page. In the forum, the current page (or section) is not highlighted with a white background, but with blue text. ‘about’ doesn’t popup the 3 choices and is colored red, trademarkt rules is mentioned seperately and called ™info, the store isn’t mentioned and items are in a different order. Confusing..

In the forum there are two menu’s in the header (the second line is in blue instead of black) each contain a ‘faq’ item, but these refer to different faq’s. One is the general faq, the other the forum faq.

Links are mostly in red, but sometimes in black (for the menu I understand this, but at other places people will not recognize these as links.)
Also some texts without links is in red (like the html-tags mentioned in the bottom of the ‘leave a reply’ block on this page).
On the forum links are sometimes blue.

Links are blue and underlined by default for a very good reason: so people recognize the links. Sure, for the main menu, (given that it is clearly recognizable as a menu) you may sin against this rule, but not anywhere else. Even not on the index page of the forum.
You should be able to identify links without having to hover you mouse over all items on a page. People with touchscreens can’t hover over a link.

There’s red text with links and red text without, back text with link, black text without, blue text with link, green text with links, grey and purple-ish grey without links, And all without underlines. It’s a big mess.

Underline all links, always and only links, except those of the main menu. If you feel you need to remove the underline of links for ecstatic reasons, don’t! The real problem probably is that you have too many links.

The code examples in the forums are dark grey on a light grey background. That’s not as easy to read as the other texts on the site. instead code could be recognized as such using black on white text with line numbers in front of it. Readable and practical :)

And I guess you have never printed a page? There is loads of wasteful white-space when printing a page, both the main site as well as the forum pages.

Avatar

I would have to say that there are a few changes that appear to break the flow of the page (from the old style), by falling into the old trap of forcing the reader to make additional and yet sometimes unnecessary mouse movements/clicks.

Viewing from the top of the front page, we see the first post on the left and the R-Pi ads/retailers on the right, all very nice and we notice that the are a little larger than before. This is good, people need to know how to get their Pis.

However the problems start when we begin scrolling past the retailers links and we see a large chuck of empty white space on the right and the first post continues down the left hand side of the page. If you take the LHS page margin in to consideration, the viewer is seeing a combined white space that spans 2/3rds of the screen and by leaving the article in such a narrow area in paragraphs of 10-15 words wide, you are forcing the reader to excessively scroll down the page (even more so with an especially long article).

So when we finally get to the bottom of the first post what do we see? Yeah, as many have stated the feeds and recent posts does take up a whole lot of screen real-estate. In fact the feeds on my screen fills the viewing area completely which adds even more scrolling to get to the next post on the front page. Could this not be placed back in to the side area (white spaces) above?

The addition of the “News in Brief” is good as it brings away of keeping older post on the front page for longer but it has also requires the reader to make additional clicks to view the article then to hit the back button again to read the next. This feels as though the flow of the page has been broken when compared to the previous design where you would only need to click on the post if you wanted to leave a comment.

And lastly, we have the placement of the comment box with in articles itself. Thankfully we no longer have to scroll back up the page to leave a comment after reading everyone else’s posts. But in a very lengthy comments section such as this one at 100+, we are now having to scroll yet again to the very end of the page. The comments are displayed much better now though but can we please have a dedicated “Reply to thread” button to jump straight to the comment box?

I feel that the older pages and articles had a simplicity to them that had little to distract you from the awesome posts that were displayed. They were easier to consume information and anyone looking for inspiration with their new R-Pi could quite happily read through the a whole bunch of articles with ease by only having to scroll to read the next line or click next to bring up the next page of older posts. Now they would have to wade through the new page design leaving the opportunity open to over look older posts, which would be a shame if that happened.

Sorry for the wall of text :)

Avatar

I must admit I rather preferred the old layout, the new one is a bit too cluttered for my taste – more difficult to find what you’re looking for directly. The old one also emphasized the articles more, they’re lost under everything that comes first up top now.

Already removing the separate background for the top bar (make it white like the rest of the page) and moving the “supported by” links to the bottom would make it much better… In my opinion, of course. :)

Avatar

Hi Liz,

Overall, I like the redesign but have an issue with actually reading the actual articles. Having worked with readability issues over the decades, I have found that reading san serif type faces is more difficult than reading faces with serifs. The serifs provide hints to the brain as the eye scans the text that makes reading and comprehension easier.

I won’t suppose to suggest a particular serif font to try (type face choices can be yet another religious battlefield like editors, OS distributions, beer, football club, etc.) but I’d encourage you to try a serif face for the body of your site.

Cheers,
Dan

Avatar

The twitter bootstrap auto-menu-resizing thing seems to screw up on small windows (eg. resize to narrow toggle the menu button thing then go back to wide and see what I mean).
Also there’s a lot of white in the background and the menu background is also very clashing with the white and clean and tidy everything else. I think a solid colour with border or a gradient would work a lot better.

Avatar

I personally think

.navbar {
background: whiteSmoke;
border-bottom: 1px solid #DDD;
}

works rather well.

Avatar

It would be great if the twitter widget had hyperlinks that you could click on rather than having to copy and paste them.

Avatar

Agree – I’ll talk to Paul.

Avatar

Seems OK once you get past the first post. The top of the page is too cluttered though with all the Tweeting under the posts and the adverts are shifting the post over to the left so you only see a half width first post.

I think the Twitter bit should be a collapsible section and the ads would be better being single column, maybe both sides of the main post so as not to hinder viewing of the first posts on larger monitors.

Avatar

I’m sorry but I really don’t like the new layout.
Especially that beneath the top news post comes the Twitter-cr*p and forums activities. Why not put that kind of info to the right where ppl are use to finding it?

Also only showing two “expanded” posts beneath Twitter/Forums and the rest compacted sux. I drop by here a once every second week and usually I read everything since my last visit. Now you’ve made it much more complicated to do that since i need to click on a whole lot of links to view the whole post.

Avatar

Hey there,
first of all I have to state that I like the new design ;) But my browser has difficulties to display the title. I attached a screenshot. I’m using Firefox on Arch Linux (but it’s the same for Epiphany). In the screenshot I scrolled to the very top ;)

http://dl.dropbox.com/u/2896846/pi.png

I have to mention that I didn’t read all of the 125 comments in here so I’m sorry if the bug was already reported…

Greets!

Leave a Comment

Comments are closed