Ask our Web UI Developer: Zane Bien

  • zanebien

    Developer

    Posted:
    Posted:

    Zane,

    Thanks for the website preview on Wednesday when I visited the Austin office, enjoyed seeing it again on today's W'sH.


    Matthew

    No problem man! Thanks for stopping by and glad you enjoyed your visit. :)
  • zanebien

    Developer

    Posted:
    Posted:
    Hydra9268:

    Zane,

    Much props to you and your team for a FREAKING AWESOME looking website! :)

    So I was wondering how much programming did you know before you were hired by CIG? Did you learn some of it on the job? Also how much programming work did the web team do versus how much you did?

    Edit: thought of more questions. How long did it take to go from scratch to completion? What was some of your inspiration?

    Thanks!

    Thanks :)

    My main focus is visual/UI design, but I have been programming on and off since high school, starting out with ActionScript (back when I still did websites in flash :O), then picked up C in college, which lead me into PHP, JavaScript, and SQL, with SQL being my favorite (weird I know, but for some reason, I just looooove data manipulation and all of the compelling things you can do with good knowledge of SQL), in addition to markup and styling languages - HTML / CSS, etc.

    I'm learning new things every day, even when I'm not working, but the job sure helps out though. :)

    Turbulent, our web team, is handling all of the back-end architecture and development since they have their own custom-rolled frameworks and systems they've specifically built for large-scale sites like ours over time. In addition, they are also doing most of the front-end development, working from my design source files. This helps to parallelize the effort, which drastically shortens the development time. The interactive components you saw on the hangar as well as the base of the RSI site though was developed by me.

    So realize that there are many more hands working on this new site than just I. It is quite a monumental project. :)
  • zanebien

    Developer

    Posted:
    Posted:
    Cabbagehead:

    Man the amount of work ahead is going to be crazy, but the end results is going to blow minds with the new site's support for the community.

    Wow is all i can say, since I've never seen anything like this for any game...ever

    I mean what do you do after finishing this masterpiece?

    Thanks :)

    It's a continual project, so it's never really "finished". But I won't be needing to work on the website as much as I am crunching now... and that means I will be transitioning my main focus towards in-game UI.
  • zanebien

    Developer

    Posted:
    Posted:
    Cabbagehead:

    Awesome!


    Will the process, work the same way or will things be more complex with doing in-game UI? Although I'm betting that once you get to that part it will be. A fun new experience for you to explore and something to learn from and improve if need be later down the line. Just like building up the new site over the past three months or so.

    It will be an interesting transition from the web context to in-game UI. I'm thinking I will be required to revisit flash which I am already familiar working with long ago. Whatever the case, I will have to learn some new things for sure, but it shouldn't be a overly drastic change that I'd be going into it not knowing what the hell I'm doing! Being familiar with programming certainly will help also.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane, superb job you are doing! I'm going to ask probably the simplest question you've been asked so far! When viewing the new site on a mobile device, will there be an easy to find button to force it from mobile app to 'Desktop' mode? (one that isn't buried in font size 2 somewhere right at the bottom of the site somewhere!)

    At first, I didn't think there would be requests for forcing the "non-responsive" mode, but I've heard quite a few people asking for this. Since we separate all of our responsive media queries into a different stylesheet, we could just make it a user-configurable option in your account to load or not load it. This isn't something that's a priority however as we would like to examine user feedback first.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane,
    So the new website is responsive. What would be your best advice for me to learn how to do that? And what language did you use to program it in?

    Code-wise, it's extremely simple if you're already familiar with CSS. All it really involves is applying different sets of style rules at different screen widths (or heights). Take a look at CSS3 media queries.

    The really hard part about responsive design is planning out exactly how your page elements will shift as the user's screen resolution changes. There's generally two approaches you can take:

    One of them is "mobile-first", which basically means you design your site on a constrained resolution (such as a 320px width), then figure out how the layout will scale up as the screen resolution increases. The advantage of approaching it this way is that your layout is pretty much guaranteed to look as good as you can design it on mobile resolutions and it makes working with relative values easier. You also run into a lot less problems scaling content up rather than down. Overall, this is generally the preferred approach to take in responsive design.

    The other approach is the opposite and is the one I have decided to implement in designing the new RSI site: You design your layout with high resolution desktop screens in mind, then figure out how the elements are supposed to scale down to lower resolutions. I've found that this approach is much less limiting on the visual appearance of the site and that it allows for more freedom in creativity since there's more space to work with. It has of course presented great challenges in scaling the content down for mobile. Some parts of the site scale down quite gracefully, but some parts are also a bit weird due to not everything having a relative width or height, but can be ironed out over time.
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane,

    The new website is outstanding. I really dig your clean designs of the site. It will be a place worthy to call home for the up coming game.

    Thank you :)


    I got a quick question for you. Is there a blog function in the new site for registered members? Blogs is a much better tool to use for tutorials, in game diaries, fan fictions, etc. If it's not in the new site yet, are there plans to implement it in the future. Thanks. :)

    No this will not be in the first release of the site. What we're primarily concerned with up until first launch is getting the core foundation implemented which includes the most important parts of the site: The e-commerce and user-account system, content architecture, and back-end infrastructure. We're going to continue integrating new features to the site afterwards such as group & squadron tools and community features.

    One of the things we may do is have a blog for each CIG team member where we can post updates on what we're working on, thoughts, and gather community feedback on certain things. So there could possibly be a 'journal' type of feature for users later on.
  • zanebien

    Developer

    Posted:
    Posted:
    NetAndy:

    Hi Zane!

    Will be the comments under Comm-Link and Spectrum-Dispatch articles transfered to the new site? And will there be an option to highlight those made by the devs? And the most important question, will I be able to display for example Chris Roberts's profile and see all his comments under Comm-Link articles? Will that work also for profiles of regular backers?

    Thank you for the answers.

    -Net

    Everything will be migrated over to the new site including comm-link comments and forum posts. What we're planning to do is actually integrate the functionality of the new forum to serve as the tool for comm-link comments. This will make data more unified across the community, and because of that, you'll be able to easily list all of Chris's comments in both the comm-link and the forums.
  • zanebien

    Developer

    Posted:
    Posted:
    3lK3busK:

    Hello Mr Zane

    The new site looks superb and impressive, but I've got an issue about navigation and the way information is organized. Maybe I'm missing something, but I think we'll end using the search too much over time. An example of what I'm saying:

    Let's say I want to get information about Joker Engineering Laser weapons. As I understood how the new site works, I go to Engineering Area then I select, I assume, Weapons in Series, and then I select the Post Type. The resul will be a page filled with posts of all weapons in the game without any sort (maybe alphabetical by default) so to search for Joker laser, I'll have to type "Joket laser" in the search field to narrow the search to just Joker lasers.

    Another example. Let's say I want to see the specs of RSI only ships. I go to Engineering, then Ships, and then Posts, and again I get a page will all the ships in the game. To narrow the search I'll have to type RSI in the search field.

    Actually this is not a big problem since the data about game items (ships, weapons, systems, etc...) is small, but it'll grow over time and the actual system of Area, Series, type, looks quite inefficient to me, specially when you are looking for specific type of items (by brand, for example).

    Can you explain further the system and if I'm missing something? Because to me find anything with 2 or 3 clicks in a website (is what I had in mind my when I designed the menu of my site (see signature)) it is very important because I think that is what makes friendly a website.

    Salu2 :)

    I think you're mistaking the comm-link for what the Galactapedia is supposed to be for. The Galactapedia will have its own architecture different from what the comm-link is (Channels, Series, Type). In the near future after the new site launch, I hope to propose an information and navigational structure for the Galactapedia, so be on the look out for that. We'll need all the input we can get!
  • zanebien

    Developer

    Posted:
    Posted:
    anuka:

    Hi Zane , im web designer too, i saw everything in the internet but your design i think one of best gamer site designs. I love techno look. Have few questions.
    1. User will have possibility to view in game trade logs and place new products for sale in the site? For example im not gamer nolifer, and cant always connect to game to set new trades. 1.1 It would be nice to have some kind charts, logs, easy share information with guild (for example guild trade manager give reports to leader or other members).

    The features of this on the web-side are to be implemented much later down the road. The design team still has to flesh out how exactly groups and squadrons will work. All I can say for now is that we intend to build sophisticated web applications that tie in-game functions into the website.
    anuka:

    1.2 API. For having same reports in guild sites.

    Again, implemented much later down the road, but as I've said before, we do plan on exposing an API that other sites can use.
    anuka:

    2. Will you provide pro quality fan kits for guild and informational websites?

    Yes, and we actually already have a fan-kit put together, but after the new site launches, the kit will become more comprehensive.
    anuka:

    3. Affiliates? Now i see only referrals contest, but im talking about affiliates like eveonline. They pay money for finding new users and always get % from all payments.

    No, at least not for the first release of the site.
  • zanebien

    Developer

    Posted:
    Posted:
    Eisenlocke1971:

    Hello
    Have you planned an online library for ships, weapons and fittings?
    In the new website look (The new look of the website is quite appealing). Descriptions with 3D images.
    The fan sites have filled this gap so far.
    It would be nice if it's different this time.

    I hope my english is understandable.:o
    Greetings from Berlin Germany.

    This is the purpose that the Galactapedia will serve on the new site. It will not exist at launch, but it is one of the next things on my list to build.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane

    When will older browsers be able to use the new site? At launch? Or sometime later?

    I'm asking because a lot of my time on the site is done from work, and we're sitting on IE8 - with no options to upgrade or install plug-ins. On your first page (post #10) it mentions that you are making the site with the really nice high res desktops in mind first, and then working out how to show that to the mobile and non-HTML5 browsers.

    Thanks!

    Yes, we will have all of the appropriate fallbacks in place for IE8.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane.

    First, sorry for my English. Has the new website a date indicator
    for the Star Citizen Time - Today we have 05/28/2943

    Haven't thought about it initially, but this is a really cool idea.
  • zanebien

    Developer

    Posted:
    Posted:
    raffaello:

    Hi Zane!

    Got a couple of under-the-hood questions if you're at liberty to divulge TOP-SECRET CONFIDENTIAL TRADE-SECRET PATENTED JEDI TRICKS(tm).

    I originally had three but @HermitBoy illustrated the third with a graphic and personal case example. I wanted to ask him something myself but this is discouraged in these forums -- so many front-end web types such as myself (and you, I don't doubt) are seeing IE8 as a big bottleneck right now since it is just refusing to go away. I think it's pretty likely that the major reason for this is that lots and lots of institutions (like schools and corporations) are still on Windows XP and have too much inertia to upgrade, and yet wish for whatever reason to keep their users with IE (perhaps due to incorrect or outdated notions of security). If you're on XP and you must use IE, IE8 is the end of the road. It's really too bad that Microsoft is still continuing to tie IE releases into their Windows releases, because if they made IE 10 available to XP users, and then made it a critical update, we wouldn't be having this conversation (IE 10 is, astonishingly, a great browser). I was wondering if @HermitBoy is allowed to install Google Chrome Frame, which could be a solution in environments like this where upgrading and switching browsers is forbidden, but sadly he seemed to mention that installing plugins is not allowed either.

    I think if we as a web maker community tried to get the word out to these institutions and educate them about the value of moving to newer browsers (perhaps emphasizing security benefits) and how little the move has to disrupt their operations, we might make some inroads.

    Anyway, my proper questions. If your time is scarce or asking two questions is pushing things, please don't feel bad about ignoring the second question!

    1. In your most recent demo of the new site on Wingman's Hangar you mentioned (and demonstrated) that you're using parallax scrolling effects. Parallax is an awesome effect but of course as I know you're aware it can also be really janky. If you're able to talk about it, what technique have you chosen to implement for parallax, and what kind of impact on paint renders are you seeing right now? If you're using a really fancy-pants technique (like canvas backgrounds, say) how are you handling older browsers -- are you just degrading the feature or shimming?

    2. Lately I've been plunging a lot into Node.js for some end-to-end projects where I handle the whole spectrum (no back-end guys). One thing Node is acclaimed for is its scalability, a term which I know has been brought up lots from you guys as a major issue with the RSI site in the past (especially after coping with the trainwreck that is WordPress). You've mentioned in the past that Turbulent is building the back-end MVC in PHP and MySQL, but what server are you using to cope with scaling? Nginx, perhaps? Any server setup info you're allowed to talk about would be really interesting to me!

    Cheers!

    Raphael

    1. The parallax is achieved by shifting the background-position property on the window scroll event. It's a common and simple technique, and appears to be quite smooth on Firefox when using a mousewheel. Other than Firefox, you can't really see the parallax since the mousewheel doesn't ease, but can be if you're using the sidebar. I consider it more of a progressively enhanced effect. It looks just as good if the position were to be simply fixed.

    2. We will actually be using a combination of Apache and Nginx across our infrastructure. Basically we have Nginx set up on our server nodes that serve static content. When there is a request to fetch something dynamic however, then it will hit our Apache nodes. In front of all this exists a giant cache server.
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane,

    first of all: the Website looks gorgeous! It's very comfortable to browse through all the Sites now and is very nice to look at! Love it!

    But are there plans to integrate a 'fixed' menu? You always have to scroll for a few moments, when you have to browse through the Comm-Link or the Forums. Especially when reading larger pages it can become a long journey to the top. (or buttons: "To the Top!")
    Is this on the roadmap in the near future?

    Yes, we'll eventually build in a fixed menu with a "back to top" button as there have been requests for this (and I agree), but it is not a high-priority item at the moment.

  • zanebien

    Developer

    Posted:
    Posted:

    Zane,

    Love the new site! However, since it's launch my RSS feed for the commlink no longer works!! Do you have a new feed link available, or has RSS functionality been removed now? :(

    RSS feed can be found here: https://robertsspaceindustries.com/comm-link/rss

    And we'll be putting in an RSS icon on the comm-link hub so people know about it!
  • zanebien

    Developer

    Posted:
    Posted:

    On the main page you have a pledge counter..any plans for a counter of ships sold by type? would be nice to see a graphic similar to the pledge counter but for number of ships in the verse (both ships from packages and addons)

    Neat idea. We can see this in our backend dashboard, but we do plan on having a more in-depth sort of public RSI statistics page which can include this as well as a pledge graph the goes further back in time than the one on the homepage.
  • zanebien

    Developer

    Posted:
    Edited:
    Posted:
    Edited:

    Hi Zane,

    Great job on the site design! I'm a fellow front end/designer/programmer/developer and this design has to be one of my all time favourites. I know you have limited involvement with the backend framework so I'll keep the feature requests out of this post :)

    Where do you get inspiration for your interfaces? Have you ever used pen based tablets for them? Do you guys ever need freelance work contributed?

    That is it for now!

    Thanks,

    I mainly just develop a concept in the back of my head of what I think would be cool, but it's usually very preliminary / foggy until I actually start to flesh it out. What ends up happening most of the time is I'll flesh out a base UI concept of what I had in mind, then from there the cool intricate design details happen to come out when I'm off on a tangent experimenting with the look. It usually takes roughly three or four iterations of trying different things before I "discover" something I think would be really cool. For really intricate design details, I sometimes scour the internet for futuristic sci-fi FUI interfaces used in movies (iron man, gmunk, mark coleran, etc.) for inspiration like specific shapes and elements.

    I primarily just use a mouse for UI work since I feel I have way more control over it especially when having everything has to line up to the pixel. I use a wacom tablet when I'm painting something more abstract like the star background on the 404 page and homepage carousel.

    In regards to front-end freelance work, if you happen to be a rockstar WebGL developer who works with 3D, perhaps :)
  • zanebien

    Developer

    Posted:
    Posted:

    Hi,

    quick question ... why is there no searchable catalogue with the ship specs ?


    Thanks

    Wiz

    Last week, I finished designing and building a web app that allows you to view, compare, sort, and filter all ships and their stats in a more tabular-like format (instead of having it dumped out as text on a page like the dev doc on the old site). Still some cross browser/version testing to do, but it's coming soon and will be included in the coming major build updates to the site, not to mention the stats themselves are still being finalized by our design team. :)
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane,

    Just noticed the addition of "Next Stretch Goal" and the dollar amount for that on the home page. It would be neat if both of these items linked to the page where the details of that stretch goal were initially outlined or later expanded on so that folks can easily see what meeting the next stretch goal will bring them! What do you think?


    Exactly, and we're working on a dedicated page that will list out all of the stretch goals from the beginning of the campaign. It will even be dynamic and show a progress line of where we're currently at with respect to all stretch goals, as well as future ones. The "$ Amount" on the front page will link to this stretch goal page when we publish it.
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane,

    Thanks for the ship stats update :)

    I admit when watching WMH I was expecting to see the previously demoed interface with ship models etc. Can you please let us know what the situation with that is?

    Is it still being worked on? Was it found to be impossible or impractical to do due to some unforeseen issue? Is it just still-wip-learn-to-be-patient-damn-it?

    Thanks.

    Yes, the interactive ship "turntable" is still in the works because we're now extending it to display individual weapon information, equipped weapons, as well as what weapons will be compatible or incompatible for each hardpoint for each ship. Same thing goes for thrusters I believe as well (have to double check with the design team).

    What you saw in the WH demo only displayed the location of hardpoints and thrusters on the ship, but now it will have that plus all of what I had just described. The actual weapon stats and information are currently being fleshed out, so I can't make any promises on exactly when this will be published (in addition to revamped product page styling).
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane!

    Love what you did with the new forum / community site, especially being able to PM and ignore people is nice.

    Would it be possible however to allow us to minimize / hide the menu on the left, when not needed? It takes rather much space in smaller browser windows with 4:3 ratio...

    72fhzVh.png

    Cheers, Lythe


    I have to second this Zane. Love all the new features but viewing this on an Ipad or a phone, the side menu takes up too much space. If it could collapse down in the future that would be nice. Even if you go to horizontal mode on the Ipad, everything gets proportionally bigger instead on the posts side getting wider.
    Yes, we're aware that the side menu currently does not respond too well for smaller screens. We are working on some formatting improvements:

    On smaller resolutions, we are looking at forcing the sidebar to render as a block on top (containing your profile / notification features) instead of the side, allowing content to be full-width:

    NNwNx1L.jpg

    We are also working on a few optimizations to improve scrolling performance for mobile devices.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane, great work with the site so far.
    I was wondering will there be some additional improvements on pledge counter and related data (like more time intervals, animated counters - like in the beginning, averages and pledge stats)?

    Later down the road, we are planning on having a dedicated page with more in-depth pledging statistics over time. We will probably make it somewhat of a dynamic infograph with things like sliders you can interact with.

    On the frontpage graph, we will be adding in the "week" tab shortly at the request of Wingman =).
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane!

    Great job on the new forums, looking really great!

    I have come however with a request. Would it take long for you guys to set up a community editable wiki? Sort of like Guild Wars 2 has done (wiki.guildwars2.com), so the community will not need to rely on ad-infested sites like wikia (starcitizen.wikia.com) or gamepedia (starcitizen.gamepedia.com/). Would be nice if you'd give it a whirl!

    Regards,
    Chaosteil

    We will be building the "Galactapedia" which will serve as the official in-fiction information hub for everything in the Star Citizen universe: ships, corporations, organizations, planets, locations, etc. you name it. as well as a dynamic timeline of significant in-fiction events, which could be affected by the actions of players and player orgs in the persistent universe.

    Obviously it's going to involve a massive amount of planning and engineering on both the data and UI fronts since this will be a major game feature (but also to be accessible on the web), so this is still quite a ways out.

    As far as I know right now, the plan is to have Galactapedia not be directly user-editable (maybe perhaps limited), but mostly managed by our internal content creation team.
  • zanebien

    Developer

    Posted:
    Posted:

    Hey Zane,

    Question for you about the Ship Stats section of the site. Currently there is no rhyme or reason to the line up, they aren't sorted by weight, length, or cost, so I am curious to know if you will eventually get around to having a default sorting option or implement the ability to sort them by one of those categories.

    Thanks.

    You can sort ships by clicking on the fields in the left bar which have a green triangle in them (mainly numeric fields). Click again to reverse the sort.

  • zanebien

    Developer

    Posted:
    Posted:

    hey Zane i have a question , i have seen resently many really good post on the furom and good coments on those posts, the sad thing is when you agree to something good or interesting, you usualy type something or quote some one and type under ( +1 ) or ( this^ )

    all am asking can the dev put a (thumps up) option that we can add to posts and coments on the furoms, would be grate.

    why not thumbs down , its becose would draw to mutch negetivity on ppls post and coments, just would be cool if the same ppl feel the same about things been sead here on the furoms whit out bomb the heck whit agreements.

    and thannks for reading.

    We will think about implementing this kind of feature in a forum overhaul that will occur in the long-term (as we do not plan on keeping vanilla as our final forum software).
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane,

    Is there a reason that the "userName" textbox does not get the focus event when logging in to the site? I notice the same thing on the Hanger module too. In fact I have noticed that having the cursor in the text box on (document/page/window.load.textbox.focus) is happening less and less. Is there a reason for this? Or is it just being overlooked?

    Yeah, we can do this easily and agree it'd be nice not to have to cursor over it (although currently, you can simply tab into the username field in the launcher).
  • zanebien

    Developer

    Posted:
    Posted:

    Hi isnt the week counter supposed to update each week? Seems like like it has not switched over to showing week 38.

    Should happen Sat. midnight UTC.


    Will it be possible to right click on items in my notification and open that thread or such in a new tab or window?

    Yeah we'll fix that in the next forum update. For now, you can ctrl+click it and it will open in a new tab.
  • zanebien

    Developer

    Posted:
    Posted:

    Hello Zane, will the website especially the forum view improve on iPad and iPhone because the formatting seems broken and left side is empty a waste of space, right side text is blocked and almost impossible to read wothout constantly zooming around

    Actually the website also lacks support for windows phones... I have no way to navigate on the site when using my Lumia

    I currently have to travel a lot by train and I always try to read the forums on my phone.
    Please optimize the forums better for smartphones!
    Not only does it display bad (as mentioned a lot before), but it also drains the battery very fast while it heats up like a hotplate. :(

    A major UI update to the forums will occur sometime Friday. The update will address numerous forum display and usability issues on tablets & phones.
  • zanebien

    Developer

    Posted:
    Posted:

    Hi Zane

    Fist of all I wanna say, this is really a awesome webpage. I love its style (I really mean it, I am also a web developer).

    So my question is:
    Could you add support for gravatar to normalize the profile pictures? Gravatar has become really popular recently. Even Battlelog (EA, BF3) supports gravatar. Another advantage is that the pictures won't lay on your server, so you can reduce the amount of space needed for them on your servers + the traffic will also be outsourced to gravatar and therefor reduce the server payload of your webserver(s).

    Greetings
    Ronon_Dex

    Yeah, we'll look into Gravatar support when spec'ing the final long-term forum.
This discussion has been closed.