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.
- 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
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- Finally on the Rogue Squadron passodes page... well I just wanted to show you some formatting in action.
- 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.
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.
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*
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.
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)
- 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.
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.
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.
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.
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.
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:
Or for the search feature, something like the following image saying "Our probes found 0/no results."
Originally Posted by Isaac Clarke
No, that's not compression. Try using a higher resolution picture.
@ 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-c...es/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.
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?
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.
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.
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*
Interested in hosting a your KOTOR or TSL mod at FileFront? Send your mod HERE and we'll validate it as soon as we can! FileFront is a good way to get publicity for your mod as we get 1000's of visitors everyday. Is my LucasForum PM box full again? If you really need to reach me, PM me at YouTube under the username: Shem L -- Watch my KOTOR videos! Download my mods from FileFront!
I haven't finished the css for the alternate post format so it'll end up looking wrong in tablet and mobile mode at the moment. I'll let you know when I'm finished, but in the meantime it'll look as it should in desktop mode.
Also, on the disqus issue. The whole word-break issue is stupid, but whatever, it's no big deal. It's a bug with disqus, I'll contact them about it and tell them they need to fix it in an update or something.
@ supreme kotor: I totally agree with you. I was saying something similar to someone else about how regular folks are clueless about what a dot net address even is because it's fallen out of fashion in teh 21st century.
@ Groov: Unfortunately, a chatbox is a pretty dangerous thing to have these days since they can be exploited in many different ways. I'm sure if you use your imagination, you can figure out multiple ways in which it could be exploited. Which means we'd have to have round the clock moderation for it... and that takes a lot of effort, more than what I think a chat box would be worth.
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
Well if .gov, .mil, or .edu turn you off it looks like you'll never be able to visit any government, military, or educational websites.
Certain websites only use those USA top-level domains (TLD's) because they have a specific purpose. There are a lot of different generic TLD's, the most common being .com, .net, and .org. Thee TLD's are all open for anyone to use, but they all have an original purpose. .net is originally intended to be use by domains pointing to a distributed network of computers, or "umbrella" sites that act as the portal to a set of smaller websites, which is what LucasForums is. .net is more specific than .com, although .com is more common and people tend to type .com by default.
@ Sith Sizzle: Yup, but despite its original purpose, it is severly out of style and no longer relevant in today's internet. I mean, talk to some kid in high school right now and unless they're Internet geeks themselves, they wouldn't have even heard of .net addresses because everything is .com.
I mean, I purposefully HAVE to put .net in the site title to make JediKnight.net and put emphasis on the .net and its existance because if I called it simply "Jedi Knight" the first thing everyone today assumes is "Jedi Knight.com" when relating a web address to the title. It's very frustrating, but not impossible to market... just more difficult.
So here's some good news for you all. I've contacted the LFN owners about my plans for LFN in the future (the consolidated star wars site and the lucasforums restructuring). I also showed them the dummy jknet site and they're pretty excited about the efforts put into the project so far.
It looks like things are really moving forward, and for those of you who have expressed interest in becoming staff members for jknet, pretty soon I'll be starting a public brainstorm session to try to figure out specific things we can do with this site other than "post articles and news" ...this site has to be special in some way to attract people to it and this forum.
Also, on a final note, the way we're moving ahead with this site is that of a professional publication instead of an amatuer fan site. The reason for this is because we're up against some very powerful gaming web sites that all take the professional route and we need to compete. The other reason why we want to take this mentality is because it can help people who become staff members of the site. If you have interest in writing in a professional setting, perhaps we can be the ones to give you your first experience in the field that you can point to in your resume.
Of course, all of this really hinges on the number of people we manage to get for the staff of jknet, the ideas we come up with and the motivation to continue supporting the site on a long term basis. If we can get enough people with the same or similar commitment I have to this project into the staff, this site can do anything. It will also help us to recruit the talents of those less commited and only want to write an article once in a few months to participate without any pressure of holding the up the entire site on their shoulders with their contributions.
It may be a difficult thing to do, but I want JediKnight.net to become a recognisable name on the net and immediately thought of as the best place to get information and articles about Star Wars gaming.
Don't have any ideas that haven't been mentioned yet at the moment but I just want say: amazing job, Lynk, we're glad to have someone like you who cares so much about this community and has the skill to keep it alive (nicest words you'll ever hear from my end to yours, so enjoy them while they last ).
About the .net thing: okay, it might not be as recognizable, but eurogamer.net does it as well, and it's a damn good gaming site.
A big part of the reason why we chose JediKnight.net is because our current JediKnight.net site is getting the most in the way of advertisement revenue.
Ideally, I'd have liked jediknight.com as our address so we can just call the site "Jedi Knight" however we don't own that domain and whoever does doesn't seem to want to budge from it.
I think the name "Jedi Knight" or "JediKnight.net" as it's turned out with the dot net address, is pretty cool when you think about it. The words "Jedi Knight" sounds pretty powerful in of itself. Actually now that I think about it, the "dot net" part of the site might not be so bad since everyone would refer to it as "Jedi Knight dot net" aloud, thus confirming the web address along with the name.
But the meaning a person associates with something can change over time... as I said before, if we're successful with this site, I hope when people think "Jedi Knight" in the context of the Internet, they think of our site.
Interesting news Lynk. Looking forward to see where all this goes.
About the new design stuff, the only thing that's a bit out of place to me is the blue bar at the bottom of the footer. I think the footer can do without it. Also, I don't know if this is a bug or intentional, but the third news page does not show the forum activity and LFN segments.
About the blue bar, I'm kind of in the middle of testing out different design elements, the blue bar at the bottom of the footer isn't permanent.
As for the last page not showing the lfn segment, that's intentional. It will only show the lucasforums box if there's 3 posts on a page and only show the lfnetwork box if there's 5 posts on a page. If there's 1-2 posts on the page, the lucasforums box won't show and if there's 1-4 posts on the page, the lfnetwork box won't show. This is to ensure that the gold boxes are always on the right hand side of the site and don't end up mixing in with the rest of the content.
I am pretty much done with the site development... all I have left is to finalise the menu bar drop downs and to clean up the html/css and it's pretty much ready to launch... which means I'm going to start to with the official process of staff recruitment so we can get jknet up and running by the end of the year.