Building attractive sliders for websites

Discussion in 'HTML & Website Design' started by irj, Mar 23, 2015.

  1. #1
    Hi,

    I am looking to build another website, and I was wondering what is the best way to create an attractive slider that fits with theme of my site. I would like to take pictures with my camera and make them look like they belong on the slider.

    Here is theme I willl be using
    http://demo.theme-junkie.com/?theme=fireup

    P.S. I am not looking for somebody from India or Banglesdesh to send me a message saying they can design my website for me. I am looking for actual information on how to do this myself.

    Thanks,
     
    irj, Mar 23, 2015 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    You learn the basics and increase your skill level as challenges arise. At some point you will gain enough skill to realize that off the shelf themes are virtually all crap no matter how much they con you into paying for them.

    You will find this a good place to learn the skills you need:
    https://developer.mozilla.org/en-US/docs/Web
     
    COBOLdinosaur, Mar 23, 2015 IP
  3. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #3
    In addition to developing your own from scratch you have the option of also looking over the ones listed here. The list was compiled by foundation.zurb.com. The one recommended by foundation.zurb is " slick carousel ". Foundation.zurb.com recommends " slick carousel " becuase it has discontinued their platform called " orbit ".

    I have used the foundation.zurb.com platform that is called " orbit " and have experience working with it. It is pretty good.

    Review your options 1 ) making one from scratch if none of the can ones work for you, 2 ) use one out of the can.

    Good luck,

    Braulio
     
    braulio, Mar 23, 2015 IP
  4. irj

    irj Active Member

    Messages:
    161
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    98
    #4
    Let me rephrase my question. How do I make pictures look nice in sliders?
     
    irj, Mar 24, 2015 IP
  5. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #5
    We use the rule of thirds for pics that we use in our websites for customers. I even use it when i take pictures on my canon and iphone.

    This is an excellent video tutorial that I just took on " composition ". We plan to use the concepts explained in the video tutorial on upcoming projects.

    I certainly hope we got it right now.
     
    braulio, Mar 24, 2015 IP
  6. irj

    irj Active Member

    Messages:
    161
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    98
    #6
    Wow that video is extremely helpful.

    THanks
     
    irj, Mar 24, 2015 IP
  7. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #7
    Yes !!! Glad I could help.

    I am the analytical type but i am trying to develop my creative, graphical design skills. I subscribe to Shawn's youtube channel and he has helped my right side of brain ( i think it is right brain ) a lot.

    Good luck,

    Braulio
     
    braulio, Mar 24, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Generally speaking, a bit of advice.... DON'T. Just... DON'T

    It's not bad enough how much of a pain in the backside that garbage is when you try to make the site responsive or the painfully stupid bloated scripttardery, it's also space-wasting "gee ain't it neat" garbage that either pushes the ACTUAL content people land on a website for below the fold, or is used to outright hide a lack of actual content of value on a site.

    Sure, it's pretty... but how does it help a user do what it is they came to your page to do?

    Like a lot of things people crap onto websites to make them less useful than they were on dialup two decades ago, do yourself and people visiting your sites a favor, axe that nonsense and put actual content of value on the page instead of artsy-fartsy scripted bull.

    Sorry, but every time I land on a page with that garbage now, the first question I usually have is "great, now where the **** is what I'm actually looking for?"
     
    deathshadow, Mar 24, 2015 IP
  9. minionnz

    minionnz Greenhorn

    Messages:
    17
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    20
    #9
    I agree with deathshadow here - sliders are not a good idea. There are a huge number of articles around that prove that they kill your conversion rates and usability - http://www.nngroup.com/articles/auto-forwarding/ for a good overview of why.

    You'll notice that they are being used less often now than they were a couple of years ago - there is a good reason for this. I'd suggest you go back to the actual problem you are trying to solve and see if you can come up with another idea
     
    minionnz, Mar 25, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Usability being the larger concern, specifically how disastrously they can be trying to make a site responsive... though it's funny, one of the most common defenses used for them is "it's where our conversions come from" - when of course it is, if that's where your call to actions are. The thing is, how many people are failing to turn into conversions and bouncing if they don't see that call of action if the one relevant to why they came to the site in the first place isn't showing just that moment? A static CTA, or multiple static calls even as small sidebar items will usually have the same if not better conversions if they are easily digested, easily scanned, and contain actual CONTENT instead of some vague text you can barely read thanks to the artsy fartsy slow loading image underneath or the goofy distracting animation.

    The laugh being they are a stunning example by what I mean on how the past two to three years it's like web development is sliding back into the worst of 1997 pre-STRICT practices and ways of thinking -- and companies are screwing themselves as a result.
     
    deathshadow, Mar 25, 2015 IP
  11. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #11
    Yes usability is a concern and the site being mobile friendly. However, Google has some great tools to confirm that your site is mobile friendly ( responsive ) and user friendly ( mobile usability ). Google has taken out the emotion of these 2 issues and you can test your site on the links below.
    Remember, the goal is to have the slider but still pass Google's mobile friendly and mobile usability tests. Keep your eye on the goal and be unemotional.

    Here is an article that summarizes all 3 tests and the suggested Google strategy for mobile friendliness. Mobile friendliness and mobile usability in spite of a slider. This article contains a Google video tutorial of their suggested strategy for mobile friendliness.

    1. Google has made it easy to test your website online. Just visit to test your site to see if it is mobile friendly. Here is an article on this step that explains how your website will look on a mobile search.
    2. Test your website at Google Webmaster Tools mobile usability section. This mobile usability is much more extensive then one in step # 1. Here is an article on this the mobile usability test.
    3. Test your website at PageSpeed Insights. PageSpeeds Insight is located in your Google Webmasters account in the Other Resources section. This step, step # 3, is the most challenging.
    Remember, we have to have the slider which is pleasing to some users ( using the composition concepts, rule of thirds ) and also pass all 3 Google mobile friendliness tests above.

    Good luck and keep in mind the goal.

    Braulio
     
    Last edited: Mar 25, 2015
    braulio, Mar 25, 2015 IP