Lynk Former Posted November 21, 2013 Share Posted November 21, 2013 Okie dokie, here it is, consolidation site I've been talking about... JediKnight.net The beta version of the site is located @ http://www.jediknight.net/jknet/ Okay, so I suppose I should go through all of the features of the site so you know what's what and are able to provide specific feedback on stuff. GENERAL - I've tried to make the site look as "magazine-like" and modern looking as possible. Not really sure if I succeeded though since it's really hard to make anything look magazine-like or modern with dark colours. However, I chose dark colours for a reason. - The colours chosen are dark because... Star Wars... and because originally I thought I was going to use white, purple and yellow as the site colours but quickly realised that it was way too similar to mixnmojo so I went for something more... "Star Warsy" *looks around* - Take note that this site will also be the basis of the consolidated forum design, just like how the starwarsmmo.net is used for the LucasForums swtor forum. - Remember, this is a mobile friendly design, (for the site, the forum will not be mobile friendly... at least not at first.) so it'll change depending on which device you use to view the site. Try visiting the site on your mobile or tablet and compare it to the desktop version... or you could just grab the window and reduce its width down below certain levels to adjust the sites width from 960 pixels wide to 640 pixels wide and 320 pixels wide. GENERAL DESIGN ELEMENTS - http://www.jediknight.net/jknet/ - Starting at the very top of the site, there is a large feature box (660x250) and advertisement box (300x250) right next to each other. - The feature box contains images of Star Wars games and links to their specific pages on the site. These can be changed every so often to link to different games whenever we want. - This is a passive feature box and is designed to act like a rad header image a lot of sites like to have, however it only appears on the homepage. You'll see what I mean when you click on to the blog post and site pages. - Don't worry, the feature box resizes in mobile view to a small version so it doesn't take up that much room. - A big reason why the feature box exists is because of the advertisement box right next to it. It's really needed for us to survive... though, because of design limitations, I have to hide the advertisement box in tablet and mobile views. - Next is the black area with the JediKnight.net title and some menu items, social network items and a search bar. These also change on tablet and mobile views. - Jumping down all the way to the footer, we have the LucasArts Fan Network links, the general site links and another advertisement box. - Unlike the advertisement box in the header, this one at the bottom can still be seen in tablet and mobile views. - I need to do something to make the footer section look a little less plain but I haven't figured it out yet. HOME PAGE - http://www.jediknight.net/jknet/ - So here's that "magazine-like" design I've been talking about... - The first post is bigger than the others and goes over two columns. It has larger text, however when viewed in tablet and mobile views, it changes to a smaller box like the other posts on the page. - Next to the large first post is a forum activity box linking to the 10 most recent posts on LucasForums. With this beta site, I have it linked to the most recent posts from Ahto. I also have plans for a poll box and maybe something else displayed in that third column. The forum activity box disappears in tablet and mobile views. - Then under that is a 3x3 grid of entries with the same style. A featured image, a blue category box (there are several categories, news, articles, modding, fanworks, etc, but each post can only belong to a single category), a gray comment counter and the date posted. Under that is a short description of the post content which is different from what actually appears in the post itself. - Just before the header, a page number list to flip through previous posts. HOME SECOND PAGE - http://www.jediknight.net/jknet/page/2/ - The second page is exactly like the first page, I just wanted to show how it also has a large first post on that page as well as the forum activity. BLOG POST - http://www.jediknight.net/jknet/2013/11/the-force-is-with-you-young-skywalker-but-you-are-not-a-jedi-yet/ - Notice how the featured box at the very top is gone and the advertiment box is moved into the gray content area. Unfortunately, the advertisement disappears in tablet and mobile view, but I have no choice but to do that since I don't want people to scroll down to view content on mobile and tablet views. - This is a test blog post so it has a lot of random stuff on it to show you certain formatting, etc. - Every post will have a featured image (660x250), we'll make some generic jknet related ones for the site since it's impossible for EVERY post to have them, of course. - We have the social network buttons under the post title, right now we have facebook, google+, reddit and twitter listed. We also have the option of adding digg, linkedin, pinterest, stumbleupon and tumblr buttons as well, but we've chosen to stick with the 4 listed right now to make things simple. If you think any of the other options should REALLY be listed, let me know and I'll consider it. - inside the post area, we have a bunch of test, unordered lists, ordered lists, blockquotes, different formatted text and a link. h2 - h5 are headings. - The page also has a bunch of left and right floated images of different types. An image by itself, an image with a caption, an image that links to a larger image and an image with a caption that links to a larger image. - There is also a gallery there with a 4 column gallery. - All of the images on the post content area open up a lightbox image viewer. You can also flip through the gallery images by using the buttons on the bottom right or by pressing the left and right buttons. The coolest part is that if you're viewing this on a touch enabled device, you can swipe left and right to flip through the images and they also shrink down to fit the size of the device screen. - At the bottom of the post are a collection of links marked by some blue boxes. The first one is VIA and the second is SOURCE. Naturally, if a news post comes from some other site, we'll use these to point out where we got our source from. SOURCE will naturally be the primary source of the news story and VIA relates to a secondary source we've referred to that we've mentioned in the post. - Under that is the tags associated with that post. Pretty simple and useful once we've collected a large number of posts that relate to each other. - Next we have the author box. This box displays a link to other posts the author has written as well as a description about the author. - Finally, at the bottom we have a disqus powered comment box. As with everything else on the site, it also changes size in mobile view. - On the right bar, which disappears in tablet and mobile view, we have the 10 most recent jknet posts and 10 most recent forum posts. SITE PAGES - http://www.jediknight.net/jknet/games/ - Pages also have the social network buttons. - Intead of a blue category box on posts, the pages has a "back to" link box. - The Games page has a whole bunch of links. Most are inactive except for the ones listed under "Complete List" which actually link to stuff. But yeah, just wanted to show off the rad links. - http://www.jediknight.net/jknet/games/rogue-squadron/ - On the Rogue Squadron page, you can see that there's a navigation box on the side bar. Now, in tablet and mobile views, this side bar along with those navigation items in that bar disappear, HOWEVER some navigation items will actually APPEAR on tablet and mobile view on the page content area. Notice the "Jump to Navigation" link under the main heading and the navigation items under the game description on that page. - http://www.jediknight.net/jknet/games/rogue-squadron/passcodes/ - Finally on the Rogue Squadron passodes page... well I just wanted to show you some formatting in action. - http://www.jediknight.net/jknet/games/rogue-squadron/system-requirements/ - Check out this page too for some more formatting. - Naturally other pages will contain more in the way of images and all that kinda jazz. FEEDBACK So that's about it... for now. It's in its beta stage so there's still plenty of things that could change until the final site is finally opened. This is the point in the development cycle where I need feedback and people to go in and test a bunch of stuff. Just note that any comments you make will end up being deleted along with all of the random posts I made for this beta. What do you like, what don't you like? Suggestions? Comments? Other stuff? I need all of the feedback and suggestions I can get. And yes, point out all of the bugs and stuff too... naturally. For folks with development experience, you can look through muh codes and stuff in case you spot some mistakes. Also here's a link to the css: http://www.jediknight.net/jknet/wp-content/themes/jknet/style.css Also, on a final note: for the people who PMed me with their interest to become staff members of the site, I've viewed all of your messages, I've just been busy getting this stuff done to reply. Also, I need to go and play some video games *crosses arms* Link to comment Share on other sites More sharing options...
Boba Rhett Posted November 21, 2013 Share Posted November 21, 2013 Hmmm, I can't seem to view this at work but expect my lengthy list of grievances this evening. Just kidding Lynk, I'm sure it's awesome and I can't wait to see it! Link to comment Share on other sites More sharing options...
Lynk Former Posted November 21, 2013 Author Share Posted November 21, 2013 Try viewing it on your phone Link to comment Share on other sites More sharing options...
Tommycat Posted November 21, 2013 Share Posted November 21, 2013 Kinda reminds me of the old layout of IGN... It's okay, because I LIKED that old layout. Link to comment Share on other sites More sharing options...
Rogue15 Posted November 21, 2013 Share Posted November 21, 2013 nostalgia from seeing the rogue squadron box art....... Link to comment Share on other sites More sharing options...
Lynk Former Posted November 21, 2013 Author Share Posted November 21, 2013 You know what... I just realised, after all this time of assuming it'd be "JediKnight.net"... it could also be... Star Wars Knights Made that really quickly, even has a awesome potential stylised title. Link to comment Share on other sites More sharing options...
The Doctor Posted November 21, 2013 Share Posted November 21, 2013 I like it, both on my desktop and on my phone. It feels very natural and organic - you can see where everything is, and get where you want to go easily. Definitely an improvement. Question though: when commenting on an article, will the registration there be entirely separate from the forums, or will a forum account be usable as well? Link to comment Share on other sites More sharing options...
Lynk Former Posted November 21, 2013 Author Share Posted November 21, 2013 Yeah, it's separate from the forum. You'll need either a Disqus, Facebook, Google+ or Twitter account to use that comment system. However, we'll make it so that when we post up new entries onto the site, a forum thread will be posted in a special news forum on LF which you can use to comment locally on the forum. We have this system set up for starwarsmmo.net and it works pretty well. Link to comment Share on other sites More sharing options...
igyman Posted November 21, 2013 Share Posted November 21, 2013 Went through it on my desktop (Firefox), so far so good. I'm liking the colors, font and general formatting. The gallery image transition seems to work well, both by clicking the buttons, or using the arrow keys. A couple of design suggestions: - On the home page move the menu bar above the feature box. This will make the site design more unified between pages (it's on top on all the other pages) and faster to navigate. - Consider converting the "Games" page into a mouse-over menu on the menu bar that will be shown once a user moves the mouse over the "Games" category. If there's going to be a huge number of games, they can be grouped by their genres (or series, as you already did on the page), so the menu structure would be Games>Game genre>Game title (for example Games>RPG>Star Wars Knights of the Old Republic) Other observations: - The section on the right titled "10 recent forum posts" doesn't actually link to the latest post, but always to the first page of the topic. This isn't bad, or a bug, but I think the section is simply mislabeled, consider changing it simply to "latest forum activity", or "latest forum topics", or something like that. If you do change the title, make sure to change the news section title to match (i.e "latest site news"), unified design and all that. - Make sure to test the site in various web browsers, not just on various platforms (tablet/desktop), because each of them has its own way of interpreting your CSS, not to mention AJAX issues (if you're using AJAX, haven't looked through your code). This is also a note to anyone who finds a bug - make sure to specify the platform and the browser you noticed the bug in. Link to comment Share on other sites More sharing options...
Lynk Former Posted November 21, 2013 Author Share Posted November 21, 2013 Feature box On the issue of the feature box being above the site title, this was done on purpose to deunify the site design... because that's just boring. Most sites go for the direction that EVERYTHING must be exactly the same, but that's so common that it's become a boring standard. Plus, if you had the feature box under the site title, it would be a much more jarring change. With the way it is now, it just looks like when you get to a post or a page, the content moves up to hide the featured box. With the featured box underneath the site title, it looks more like an actual disappearance. Games menu item Yeah, I agree with that, it's kind of what I wanted to do originally but I thought I'd wait for peoples opinions before I made down downs for the menu. Recent posts Yeah, I agree. I'm using a script we've been using for other sites on the network that stoffe made (I think). It was a copy and paste job to insert that one in. I'll update those bits to make it more accurate to what it actually does. Browsers I've been coding html/css for about 15 years now, so browser testing is something I've been doing constantly. However, over the years, I've said "to hell" with older browser compatibility and "to hell" with Internet Explorer. With that said, I know the code works on multiple browsers since I've been testing it constantly with Firefox, Chrome, Opera and IE10 (despite my hate for IE). I've actually caught a few interesting bugs developing the site to this point... though, I haven't gone super obsessive with this site like I have with previous web sites I've created so if there are some really obscure/hidden bugs, I haven't found them yet. Link to comment Share on other sites More sharing options...
igyman Posted November 21, 2013 Share Posted November 21, 2013 OK, tried it out on my phone as well. Again, nothing out of the ordinary spotted. I do like what it looks like on the phone - the home page in particular looks even better than on my desktop, the other pages are pretty similar. I do like that the font is large enough for it to be viewed on a mobile device without needing to zoom in. The gallery seems to work well there, too. The site resizes nicely upon rotating the device/screen. I did find a bug, playing around with the comments on my desktop though: I posted an insanely large comment, but it's not displayed in full, even when I expand it. To be precise, there seems to be a problem with long lines being cut off. When I click the Edit button, everything's there, but when that huge wall of text needs to be displayed the site (comment plugin?) seems to cut off any lines longer than the comment area width. Seems like it's missing a wrap text setting, or something. Platform: PC Browser: Firefox 25.0.1 Link to comment Share on other sites More sharing options...
Pho3nix Posted November 21, 2013 Share Posted November 21, 2013 Lookin' good man! Link to comment Share on other sites More sharing options...
adamqd Posted November 21, 2013 Share Posted November 21, 2013 (This BBCode requires its accompanying plugin to work properly.) Link to comment Share on other sites More sharing options...
Taak Farst Posted November 21, 2013 Share Posted November 21, 2013 This. This is sexy. That is all. Link to comment Share on other sites More sharing options...
Isaac Clarke Posted November 21, 2013 Share Posted November 21, 2013 The desktop version is amazing. The mobile version, well, not so much. Most of the problems I have with the mobile version are with design elements. There's this low-res logo: Show spoiler (hidden content - requires Javascript to show) It's even more apparent zoomed in: Show spoiler (hidden content - requires Javascript to show) No, that's not compression. Try using a higher resolution picture. But I do like that logo a lot. Fits in with the theme well. Link to comment Share on other sites More sharing options...
Alexrd Posted November 21, 2013 Share Posted November 21, 2013 I like the layout a lot, except for one thing: is it possible to move the advertising box at the side of the banner, or change it to a banner? Maybe it's just me, but it seems a bit disjointed from the page's design. Also, I know most of the pictures are just placeholders (at least I assumed as much), but I thought it would be nice to make a better association between the Star Wars thematic and some of the features. For example, a Jedi Council image (representing discussion/debate/etc) for the one featured that links to the forum: Show spoiler (hidden content - requires Javascript to show) Like this: Or this: Or for the search feature, something like the following image saying "Our probes found 0/no results." Show spoiler (hidden content - requires Javascript to show) No, that's not compression. Try using a higher resolution picture. Or just vectorize it. Link to comment Share on other sites More sharing options...
Lynk Former Posted November 22, 2013 Author Share Posted November 22, 2013 @ igyman: I'll look into the options for the comment system to see if I can find an option to prevent that from happening or if there's a css solution for it. If not, I'll try looking into another comment system that doesn't have that issue. @ isaac clarke: Yup, this is a common problem with high pixel density devices and there is a solution to the problem which I haven't implemented yet. Though it's a little more complicated than simply adding a higher res picture because the site title is on a sprite sheet: http://www.jediknight.net/jknet/wp-content/themes/jknet/images/sprites.png ...gotta do a tiny bit of rejiggering to get things to work properly. But I do it this way because if they were separate images, you'd experience a lag effect before the hover image (on desktop mode) displayed instead of it displaying exactly when you move your cursor over the image. Also, the reason why most of the other things on the page don't suffer the same affect is because they're either vectors or purposefully higher resolution than the sizes they're set at when viewed in mobile mode. Unfortunately, when you're using a high pixel density laptop such as a mac book pro, the 660x250 featured images end up suffering from quality loss issues from the renderer stretching the images to higher resolutions than they were meant to be seen. The solution to that problem is simple though, just use images that are a much higher resolution, but that won't be a possibility every time. @ Alexrd: There is a reason why I chose the 300x250 box advertisements for this site design and a lot of it has to do with the fact that I'm making the site mobile friendly. There are very specific sizes for advertisements used on the net and almost every one of them are TERRIBLE to use on a mobile platform. I agree, it does seem a little disjointed, and in a perfect world, I'd have 0 ads on my site (just like I have absolutely no ads on my personal web site). But I had to find a way to fit these advertisements into the design somehow and this was the best way to do it. I did try several other options and the result was a lot worse than this one. This is the lesser evil, I'm afraid. And yeah, many of the images are placeholder... but for the final images, I'm hoping to use more Star Wars video game related material instead of movie material. It is a Star Wars video game site after all. Link to comment Share on other sites More sharing options...
Lynk Former Posted November 22, 2013 Author Share Posted November 22, 2013 Note: Ignore the strange stuff happening with the menu bar right now, I'm screwing around with stuff... EDIT: Okay, replaced the JediKnight.net title with a higher resolution image and got rid of the whole sprite thing and rollover hover just so things are easier to work with. Gonna do the same thing to the LFN bit in the footer. EDIT 2: No wait, still more screwing around... EDIT 3: *shrugs* leave it like that for now, I've made a high res JediKnight.net title image and a high res Star Wars Knights title image as well. Just have the Star Wars Knights one up to see how it looks. Tell me what you think, should the site be JediKnight.net or Star Wars Knights? Link to comment Share on other sites More sharing options...
adamqd Posted November 22, 2013 Share Posted November 22, 2013 JediKnight.net or Star Wars Knights? JediKnight.net, I think its a more universal name even though its is the name of a specific game. whereas Star Wars Knights sounds like a basketball team Link to comment Share on other sites More sharing options...
igyman Posted November 22, 2013 Share Posted November 22, 2013 About the name - Star Wars Knights does sound better in the sense that it doesn't necessarily bring one specific game to mind, but I prefer the logo that went with JediKnight.net. As for referring to one specific game, it can be easily fixed by going plural - JediKnights.net, so you might want to consider that option as well . Otherwise, regarding the logo itself, as Alexrd said, you should use a vector instead of a raster, if at all possible. Link to comment Share on other sites More sharing options...
Lynk Former Posted November 22, 2013 Author Share Posted November 22, 2013 Yeah, alright, sticking with jknet. I was hoping we'd get away from the whole dot net thing since outside of us internet nerds, no one even knows what dot net is these days. We'll just have to make people REALLY remember the site url somehow. I made an svg file, but it's really difficult to get the spacing and size just right so I went the lazy route and just created a x10 png. http://www.jediknight.net/jknet/wp-content/themes/jknet/images/jediknightnet.png If anyone wants to attempt to create an svg file that can match the png perfectly, go ahead and try... http://www.jediknight.net/jknet/wp-content/themes/jknet/images/jediknightnet.svg ...just remember to add the 09c colouring to the .net part (forgot to do that). Also, about the disqus bug... it's not really a bug, it's disqus not putting word-wrap: word-break; into their css. I can't do anything about it on my end since the contents of the comment system is inside an iframe which puts it outside my ability to control. *sigh* Link to comment Share on other sites More sharing options...
supreme kotor Posted November 23, 2013 Share Posted November 23, 2013 I'm going to be honest if there's nothing you can do about the .net then ignore me. For the average Internet user as strange as it may sound .net,.gov,.edu are major turnoffs.... Love the site btw Link to comment Share on other sites More sharing options...
Prime Posted November 23, 2013 Share Posted November 23, 2013 It looks great, Lynk! Link to comment Share on other sites More sharing options...
Shem Posted November 23, 2013 Share Posted November 23, 2013 Knights of the Old Republic III delayed indefinitely due to fears that it may be TOO awesome to handle http://www.jediknight.net/jknet/2013/11/knights-of-the-old-republic-iii-delayed-indefinitely-due-to-fears-that-it-may-be-too-awesome-to-handle/ :rofl: :rofl: Link to comment Share on other sites More sharing options...
Darth Groovy Posted November 23, 2013 Share Posted November 23, 2013 It is good! I like the simplicity and ease of use of the design. I still think it needs a chat room right there in the front where everybody can see it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.