New design for LetsSingIt!

›Forum›browse›News›New design for LetsSingIt!

Follow 23

Add topic

Ray | 14-05-2015 14:10

I bet you had to look twice or maybe you're still figuring out what is going on, LetsSingIt has a new design!

The "old" layout was 8 years old and in internet land, this is more than a lifetime. It was built back in 2007-2008 when Facebook was still unknown, Twitter did not exist yet, Nokia ruled the cell phone market and cell phones could only be used to call, .... ok, and to play Snake.

Mobile

How different is that today, "phones" is not the right word anymore, it's "mobile devices" since they come in all sizes and options and can do a zillion things more than playing Snake. But they have all one thing in common, you can use them to access the internet. The number of mobile users in the world is still growing extremely fast. So it's more important than ever before to have a mobile friendly website, which means that the website is also perfectly viewable on the smaller screens of the mobile devices. Today, 60% of LetsSingIt's visitors use a mobile device to access our site, and that's even with the old layout that didn't scale well on mobile devices. So time for a mobile friendly website!

What is new

Curious to what's new? It's too much too mention it all, so here are the highlights.

Responsive
This new LetsSingIt layout is now mobile friendly, the site optimizes it's presentation based on the device used to access LetsSingIt. This so called "responsive" design, makes LetsSingIt easy to access no matter how large or small you device is. You're one of these 40% desktop viewers? ... then grab your phone ...eh, "mobile device" for a demonstration!

Faster loading
The latest techniques on board to serve pages light and ultra-fast.

More info with less clicking
With the use of the large menu and "load more" buttons, more information is loaded in a split second without having to leave the page.

New comment system
Adding pictures, topics and comments is now done and a new form. Use the popped-out (or "detached") version for extra options, or use the small "submit-on-enter" form for quick comments. Want to use Facebook to comment? Also possible now, Facebook has been integrated with LetsSingIt.

Profile picture
Artist profile pictures are now supersized and can be edited by moderators now. Members can now also add their profile picture.

Song/album info
I got this question many times, where to put extra song or album information, because there is no field for that. Well, now there is. This option is currently only available for moderators (at the song-edit form).

Minor things that make you LSI life easier
- preview option at sending messages
- quick filter on long songs and albums pages of artists
- likes count added to hall-of-fame
- active topics can also be viewed by last comments
- everybody can edit their comments up to 15 minutes after saving

Bug Report

Found something that is not working in the way it should? Please let me know in the Support section of the forum.

Comments, tips or suggestions about the new layout, let me know!

Enjoy!
Ray

* offtopic :
Thanks to my wife Aisha for not only helping building this new layout, but also for the support on this biggest project in LetsSingIt history. This project has been quite a rollercoaster, but the result is there!

«1 2 3 4 5 6 »

76 to 100 of 130 comments

page 4 of 6

TheAnnoyance | 15-05-2015 11:05

New layout looks good, Ray.

Especially the new mobile version, much easier to navigate and not have to zoom in all the time.

indiechick_ | 15-05-2015 11:14

James! HI!

also, cool layout.

FireWaterBurn6 | 15-05-2015 13:12

It's probably been discussed several times but how do I hit enter on mobile to start a new paragraph instead of submit a message?

JDolla | 15-05-2015 13:14

You don't. Design flaw.

Captain_Keeta | 15-05-2015 13:15

Curt, you can edit the post and you can hit the return button to get another line. Hope that helps!

Joeyy | 15-05-2015 13:48

Yeah, doesn't work on mobile, but I think Ray said he was looking into fixing it.

Ray | 15-05-2015 14:08

There is no fix for that. I think touch devices can't "listen" to two areas on the same time. So keeping the SHIFT pressed, will block touch input on other areas. Correct me if I'm wrong

So for touch devices it's either not using enters or use the advanced form.

Olivia_Ka | 15-05-2015 15:49

So I guess that with this new layout, fanpages and news would be back soon - I really think artist mods don't have enough work by treating only songs and albums. The less sections we are... Are there still more action points?

That's why... I really wonder whether LSI is still a music site and not only a lyrics site.

Goodbye.

saina | 15-05-2015 16:07

Query: Can we like a picture of a member? And if yes, then how do we do that?

Joeyy | 15-05-2015 16:10

Yeah... There appears to be a thumbs up button, but clicking it just brings up the picture.

saina | 15-05-2015 16:12

Exactly. That's what brought the question into my mind?

PinkFloyd | 15-05-2015 17:05

404 error when trying to add new artists through "Contribute", not submitting through review though.

I didn't like it at first, but I actually now like the simple "enter" posting. If you have more to say you can use the pop out box.

Joeyy | 15-05-2015 17:17

Sorry if this has already been mentioned. I've noticed that occasionally when I post, the immediate post will appear in the wrong place. For example, I just posted here. As you can see, Saina's post is the last post above mine. But when I first entered the post, the site showed it on the previous page below the last post on that page.

It's not a big deal, but it's confusing when it happens.

Ray | 15-05-2015 17:19

Bugs in the Support category please

Then I won't miss them and I give updates on the fix status.

PracticePractic | 15-05-2015 17:20

Other sites have been using it a long time Sierra. Quick reply with "Return to Post" option speeds up communication, leading to smoother flow of thoughts. I had to get used to the LSI method of doing things, its something that is 8 years old, as I learned today from Ray's post on the new design.

Joeyy | 15-05-2015 17:21

Sorry. Do you want a new thread for every bug?

PinkFloyd | 15-05-2015 17:30

I notice your problem too, Joey. I also notice the times can be wrong. When I post, the post above mine may say 16 seconds ago, then I refresh and it wil say like 2 minutes or whatever.

Ray | 15-05-2015 17:30

Yep, new thread for every bug. I see often people mentioning everywhere that something is not working. But somehow this info doesn't reach me. I'm on top of the new Support category. When creating a new thread for every bug I can ask for more info if I need it and report about the fix status. I hope that would make my bug-fix life easier

And of course, bugs will be fixed sooner.

Joeyy | 15-05-2015 17:32

Yeah, I noticed that too, but then I thought I might be imagining it because of my terrible time perception. :S

OK, new thread being made.

Not sure if we should include the time bug there or not?

feb2002 | 17-05-2015 12:48

Nothing really works on the Nokia Lumia, any updates or guides?

CarlJ | 17-05-2015 13:35

Looks good so far Ray. Nice job...

joed662 | 17-05-2015 14:08

Any way to email lyrics??

robdog2008 | 17-05-2015 17:23

definitely going to take some time getting used to this new layout on webpage, but i do agree faster load times

feb2002 | 17-05-2015 21:40

Does anyone else have a problem with Windows phone on the new update

Joeyy | 18-05-2015 02:41

What kind of problems are you having?

guest

POP OUT SAVE

$form.$set(f,{a:'ajax_comment_manage',pop:'in',content_type:'forumtopic',parent_id:'564405',follow:0},{noaskonclose:1});

//--------------------------------------------------------------------------------------------------
//  On save
//--------------------------------------------------------------------------------------------------

$events.$addFunction('click',1545420973,true,function(){
      //--------------------------------------------------------------------------------------------
      //  Find form element
      //--------------------------------------------------------------------------------------------
          var f=arguments[0].$t.closest('form');
      //--------------------------------------------------------------------------------------------
      //  Callback
      //--------------------------------------------------------------------------------------------
          var $callback = function(f,$c,$json) {
            if ($json.hasOwnProperty('mode') && $json.mode == 'popin') { // Error occured - popin version
              f.parent().html($json.body);
            }
            else {
              var $formrow = $('#id_1545492900').closest('div[data-form]'); // Find the wrapper of the form (div that holds the form)
              //------------------------------------------------------------------------------------
              //  Remove lightbox for popout or reset popin form
              //------------------------------------------------------------------------------------
                 if ($json.pop == 'out') {
                   lightbox_remove();
                 }
                 else {
                   $formrow.find('[data-b]').find('span').show().last().hide();
                   f.find('textarea[name=comment]').prop('disabled',false).val('');
                   f.find('input[name=vote]').val('');
                   f.find('.errors').remove(); // remove error box if present
                 }
              //------------------------------------------------------------------------------------
              //  Insert on bottom
              //------------------------------------------------------------------------------------
                  if ($json.content_type == 'forumtopic')
                    $('html, body') // html and body both needed for cross browser compatibility
                      .animate({ scrollTop:$formrow.last().offset().top - 200 }, 500)
                      .promise() // the promise-done deals with preventing a double call for browser that support both html and body
                      .done(function(){ 
                        $formrow.last().before($json.comment).prev().rowslide({effect:'open'});
                      });
              //------------------------------------------------------------------------------------
              //  Insert on top
              //------------------------------------------------------------------------------------
                  else $formrow.first().after($json.comment).next().rowslide({effect:'open'});
              }

return;
          };
      //--------------------------------------------------------------------------------------------
      //  Parse request
      //--------------------------------------------------------------------------------------------
          $http.$req({m:'POST',d:1,q:f.serialize(),b:$.proxy($callback,null,f)});
      //--------------------------------------------------------------------------------------------
      //  "After-click" styling
      //--------------------------------------------------------------------------------------------
          if (f.find('input[name=pop]').val() == 'in') {
            arguments[0].$t.parent().children().hide().last().show();
            f.find('textarea[name=comment]').prop('disabled',true); // do after $http.$req because serialize ignores disabled fields
          }
          else {
            lightbox_remove({keepdim:1});
            lightbox_prepare({});
          }

});
//--------------------------------------------------------------------------------------------------
//  Detach function (pop-out button and poll vote button) - prepare for "detach" submit
//--------------------------------------------------------------------------------------------------
    $events.$addFunction('click',1519156756,true,function(){
      var f = arguments[0].$t.closest('form');
      f.find('input[name=reload]').val(1);
      f.find('input[name=pop]').val('out');
      //if (arguments[0].$t.is('[data-vote]')) f.find('input[name=vote]').val(arguments[0].$t.attr('data-vote'));
      f.find('.errors').remove();
    });
    $events.$addFunction('click',1545858987,true,function(){ // Poll-vote button
      var f = $('#id_1545492900');
      f.find('input[name=vote]').val(arguments[0].$t.attr('data-vote'));
      $('#id_1545858923').trigger('click');
    });
//--------------------------------------------------------------------------------------------------
//  Reset popin form
//--------------------------------------------------------------------------------------------------
    $events.$addFunction('click',1545413833,true,function(){
      var f = arguments[0].$t.closest('form');
      f.find('input[name=reload]').val(0);
      f.find('input[name=pop]').val('in');
      f.find('input[name=vote]').val('');
      f.find('textarea[name=comment]').val('');
    });

«1 2 3 4 5 6 »