• 0

How Can I Improve My Landing Page Design?


Go to solution Solved by Ambroos,

Question

18 answers to this question

Recommended Posts

  • 0
Ambroos

Hm. It's a bit unclear what it's about. Some sort of introduction and more structure would be nice. Now it just seems like random links. There's no context.

 

(Also, fixed backgrounds with scrollable transparent content on top of it are a performance nightmare, even more if you replace them with animations like you do.)

Link to post
Share on other sites
  • 0
primexx

Hm. It's a bit unclear what it's about. Some sort of introduction and more structure would be nice. Now it just seems like random links. There's no context.

 

(Also, fixed backgrounds with scrollable transparent content on top of it are a performance nightmare, even more if you replace them with animations like you do.)

 

agree. I looked at it for a while trying to figure out what exactly I was looking at, before actually reading the text. You want to have an obvious place for someone to start reading, and also that they can tell what type of thing it is right on first glance.

 

the performance thing I've noticed before, but it worked okay on the computer I'm using right now. It could still be a problem for mobile devices, I'm not sure.

Link to post
Share on other sites
  • 0
gohpep

It's meant to be a project list, and I felt it looked cluttered too. Any suggestions on how to present the list of projects and give an intro about the company? I was thinking about having a jumbotron, and then having media objects with paragraphs and titles with a data filter for categories

Link to post
Share on other sites
  • 0
Ambroos

It's a big difference in performance. Chrome dev tools (behind F12 on Windows) have a great way to test performance in Timeline > Frames. I have a pretty good dualcore laptop and with the website as-is had difficulty reaching 30FPS while scrolling. Disabled the opacity and had no issues hitting 60FPS.

Link to post
Share on other sites
  • 0
gohpep

Ok. I'll change the site to your recommendations. Thanks for your help. If you don't mind, could you review the site again once it's changed?

Link to post
Share on other sites
  • 0
francescob

What about some runway lights? Those are perfect for landing pages!

Link to post
Share on other sites
  • 0
gohpep

I know landing pages are dumb but people used to go on this site expecting a different thing, so I had to make a project list to show one of the projects that the site used to be dedicated to.

Link to post
Share on other sites
  • 0
Shiranui

I would also hyphenate "story-driven". 

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip

Hm. It's a bit unclear what it's about. Some sort of introduction and more structure would be nice. Now it just seems like random links. There's no context.

 

(Also, fixed backgrounds with scrollable transparent content on top of it are a performance nightmare, even more if you replace them with animations like you do.)

Hmm don't see the background anymore but was it fixed with background: fixed? or with some messy js you see everywhere these days?

And I wonder if transparant with background: rgba(....); and with opacity would make a performance difference :P

 

Edit: opacity is faster.

Link to post
Share on other sites
  • 0
DrJohnSmitherson

FloppyBerd link is dead

Link to post
Share on other sites
  • 0
primexx

wow it's so much nicer with the changes you've made.

 

 

Hmm don't see the background anymore but was it fixed with background: fixed? or with some messy js you see everywhere these days?

And I wonder if transparant with background: rgba(....); and with opacity would make a performance difference tongue.png

 

Edit: opacity is faster.

 

well something will have to keep re-rendering the transparency

Link to post
Share on other sites
  • 0
MikeChipshop

Guess i'm not seeing what others were, all i'm seeing is a white page with reams of text, so i can;t really comment.

Link to post
Share on other sites
  • 0
Seahorsepip

Guess i'm not seeing what others were, all i'm seeing is a white page with reams of text, so i can;t really comment.

Yeah had the same thing just click the about link on that site.
Link to post
Share on other sites
  • 0
nyolc8

I love that background scrolling effect

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip

I don't know how you did the background scolling but it feels somehow sluggish as if there's unnecessary code behind it :/

I'll look into coding of the site I guess ^^

 

Edit: might have found the issue, background-position uses half pixels on every scroll :s

Link to post
Share on other sites
  • 0
gohpep

Ok, I'll fix that.

I don't know how you did the background scolling but it feels somehow sluggish as if there's unnecessary code behind it :/

I'll look into coding of the site I guess ^^

 

Edit: might have found the issue, background-position uses half pixels on every scroll :s

Link to post
Share on other sites
  • 0
gohpep

Yes, it's not done yet, should I put a coming soon tag on it?

FloppyBerd link is dead

 

I updated the page based on what people told me, and I felt like I should just recode it.

Guess i'm not seeing what others were, all i'm seeing is a white page with reams of text, so i can;t really comment.

 

So, the first page is good?

Yeah had the same thing just click the about link on that site.

Link to post
Share on other sites
  • 0
DrJohnSmitherson

Yes, it's not done yet, should I put a coming soon tag on it?

 

I updated the page based on what people told me, and I felt like I should just recode it.

 

So, the first page is good?

 

I would definitely put a coming soon. It just makes it seem like your page is broken

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 94% off the cost of this Essential PHP Coding Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time, you can save 94% off this Essential PHP Coding Bundle. Get started in web development by learning the fundamentals of PHP coding and practicing object-oriented programming.



      This bundle consists of the following courses:

      Fundamentals of PHP Training Course
      Learn the Basic Programming Concepts in the Most Popularly Used Server-Side Programming Language PHP Development with the Laravel Framework Training Course
      Develop Homepages, Create Accounts & Activate Emails Using the Open-Source Laravel PHP Framework PHP Object Oriented Programming: Build a Login System Training Course
      Create an R/L System Using PHP & OOP Together Python Object Oriented Programming Fundamentals Training Course
      Create Advanced & Easily Maintainable Python Applications with Object-Oriented Programming Good to know
      Length of time users can access this course: 1 Year Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For specifications and instructor info please click here.

      Here's the deal:
      This Essential PHP Coding Bundle normally costs* $516, but it can be yours for just $29.99 for a limited time, that's a saving of $486.01 (94%).

      >> Get this deal, or learn more about it here <<
      See all Online Courses on offer. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.


      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

      running costs.

    • By Usman Khan Lodhi
      YouTube Music's Explore tab now lets users see top charts from around the world
      by Usman Khan Lodhi



      YouTube Music, soon set to be Google's only streaming service, has added a plethora of new features this year, including the addition of an Explore tab for improved music discovery. Earlier this week, a Reddit user reported that the firm was also testing high-level filters for the Home feed of recommendations.

      Now, YouTube Music has added global top charts to the Explore tab, which lets users find the most popular music from 57 popular countries across the world. The feature is present between "New releases" and "Mood & genres" at the top of the Explore page. Users can select their location via a dropdown menu, and see the following five categories:

      This lets YouTube Music "share with you the most popular songs from around the world, no matter where you're located." The feature has been rolled out globally today on Android, iOS, and on the web.

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By cbz6109
      I have a below blog on WordPress
      Core Voila
       
      When I post an article and open the site on any browser it doesn't show new changes until explicit refresh. On refresh it show latest changes. any idea or clue will be appreciated.
       
      Thanks in advance 👍