• 0

How Can I Improve My Landing Page Design?

Asked by gohpep,

 Share Followers 0
Go to solution Solved by Ambroos,

Question

18 answers to this question

Recommended Posts

  • 0
Ambroos
  • Solution
Posted

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
Posted

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
  • Author
Posted

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
Posted

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
  • Author
Posted

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
Posted

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

Link to post
Share on other sites
  • 0
gohpep
  • Author
Posted

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
Posted

I would also hyphenate "story-driven". 

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

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
Posted

FloppyBerd link is dead

Link to post
Share on other sites
  • 0
primexx
Posted

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
  • Member
Posted

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
  • Veteran
Posted

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
Posted

I love that background scrolling effect

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

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
  • Author
Posted

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
  • Author
Posted

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
Posted

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
This topic is now closed to further replies.
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • Pay What You Want for this Learn to Web Design Bundle
      By News Staff
      Pay What You Want for this Learn to Web Design Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Learn to Web Design Bundle. Break into the lucrative world of professional web design with up to 75 hours of content.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      Design a Website From Scratch: HTML, CSS, Responsive Design
      Create Responsive Websites Using the Foundational Blocks of Web Design

      and unlock the following courses with a minimum of the average price:

      Learn Photoshop, Web Design & Profitable Freelancing 2017
      Discover the Photoshop Workflow & Establish a Lucrative Freelancing Career

      Adobe Photoshop CC: Your Complete Beginner's Guide
      The World's Most Popular Photo Editing Software Taught to You From A to Z

      Responsive Web Design: Made Easy
      Learn the Basics of HTML5 & CSS3 & Start Designing Dynamic Websites

      The Complete Bootstrap Masterclass Course: Build 4 Projects
      Discover the Scalability of Bootstrap by Building 4 Real, Responsive Projects

      jQuery UI Ultimate: Design Amazing Interfaces Using jQuery UI
      Implement A Wide Range of Interactivity Into Websites & Make Your Resume Stand Out

      UI Design in Photoshop: Start Designing Web & Mobile Apps
      Optimize Adobe Photoshop for Web & Mobile Design

      Building Websites: Learn Bootstrap for Rapid Web Development
      Enhance Your Development Workflow by Learning this Efficient Scaling Framework

      Web Design: Make a Single Page Website Carousel Controls
      Build a Completely Dynamic Webpage as the First Step Towards Web Design Mastery

      What's the benefit?
      The bundle represents an overall retail value of $1,048. But you can Pay What You Want for the unlocked courses (as little as $1). Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Learn to Web Design Bundle
      See other Pay What You Want deals. This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      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.

    • This Master Learn to Code 2021 Certification Bundle is only $34.99
      By News Staff
      This Master Learn to Code 2021 Certification Bundle is only $34.99
      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 98% off this Master Learn to Code 2021 Certification Bundle. Kickstart your lucrative coding career with 119 hours of content on HTML, Data Science, different programming languages and more!



      This deal consists of the following courses:

      2021 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications C++ Programming for Beginners
      Master C++ & Create Programs, Games, Development Libraries, and More Introduction to Python 3 Training
      Familiarize Yourself with One of the Best Languages for Programming The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages Python for Everyone
      Learn the Basic Syntax of How Python Language Works Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More Learn jQuery for Beginners Web Development
      Quick & Easy Guide to Working with jQuery The Ultimate HTML Developer
      Learn HTML/HTML5 & Put Your Skills Into Practice by Creating an Entire Web Page Beginners R Programming: Data Science and Machine Learning
      Learn to Code in C# and Make Projects in R Data Analytics, Management & More! Apache Spark with Scala - Hands On with Big Data
      Dive Right In with 20+ Hands-On Examples of Analyzing Large Data Sets with Apache Spark The Python Mega Course: Build 10 Real World Applications
      Explore the Power of Python By Actually Building Apps With Python Java Foundations
      Enhance Your Skills for Mobile Development with Java Good to know
      Length of time users can access this course: lifetime Certification of completion included Updates included Experience level required: beginner 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 Master Learn to Code 2021 Certification Bundle normally costs* $2,594, but you can pick it up for just $34.99 for a limited time - that represents a saving of $2,559.01 (98%) 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?
      That's OK, there are other free eBooks on offer you can check out here.



      Home Gym Giveaway | Bitcoin (BTC) Investment Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • Pay What You Want for this Full Stack Web Development Bundle
      By News Staff
      Pay What You Want for this Full Stack Web Development Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for this Full Stack Web Development Bundle. The world's best developers are Full Stack developers. Here's 122+ hours of instruction to help you join them.



      How does it work?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Projects in HTML5
      Build 10 Products in HTML5 & JavaScript Or bid the average price to also get the following items:

      The Full Stack Web Development Course
      Handle Every Facet of An App's Development, Ascend to the Top of the Developer Mountain Projects In ReactJS: The Complete React Learning Course
      Dive Into One of Today's Most In-Demand Front End Development Tools Projects in JavaScript & JQuery
      Gain Practical Experience in JavaScript & jQuery By Completing 10 Projects ReactJS and Flux: Learn By Building 10 Projects
      Learning These Facebook-Created Development Tools Will Greatly Accelerate Your Workflow Projects in MongoDB: Learn MongoDB Building 10 Projects
      Explore the World's Most Popular Cross-Platform NoSQL Database Projects Using PHP Frameworks
      Build 10 Unique Projects to Get a Complete Grasp On Multiple PHP Frameworks Learn NodeJS by Building 10 Projects
      Use This Popular Runtime Environment to Craft Lightweight, Highly Scalable Apps Here's the deal:
      The bundle represents an overall retail value of $476 But you can Pay What You Want for the unlocked items (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for this Full Stack Web Development Bundle
      See other Pay What You Want deals. This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here.



      Home Gym Giveaway | Bitcoin (BTC) Investment Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • Pay What You Want for the 20-Course app Programming Bundle
      By News Staff
      Pay What You Want for the 20-Course app Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for The 20-Course Programming Bundle
      See other Pay What You Want deals. 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?
      That's OK, there are other deals on offer you can check out here.



      Home Gym Giveaway | Bitcoin (BTC) Investment Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      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.

    • Try out freeCodeCamp if you want to get into programming
      By zikalify
      Try out freeCodeCamp if you want to get into programming
      by Paul Hill



      Whether you’ve seen some of the latest robot or AI Sci-Fi films or you’re simply thinking about a change of career and want to learn to code, freeCodeCamp is an excellent resource to begin your journey into the world of programming, it's available to everyone around the world and at no cost.

      freeCodeCamp, which is a little over six years old, boasts more than 40,000 graduates who have gone on to get jobs at big tech firms including Microsoft, Apple, Google, Amazon, and Spotify. It offers a variety of courses which you work through where you'll learn all the relevant information before completing several projects which demonstrate you’ve learned the content - upon completion of the projects, you get a certificate for the course which appears on your public profile.

      This approach to teaching programming is great because you end up with five projects per course which can be shown off to prospective employers, who will most likely want to know what you’ve worked on. The courses that are available at the time of writing include:

      Responsive Web Design JavaScript Algorithms and Data Structures Front End Development Libraries Data Visualization APIs and Microservices Quality Assurance Scientific Computing with Python Data Analysis with Python Information Security Machine Learning with Python It’s recommended that you work through the material in order but nobody is stopping you from jumping to other sections first. In addition to the courses, there’s also a section called Coding Interview Prep which contains hundreds of coding challenges that “test your knowledge of algorithms, data structures, and mathematics” as well as additional projects which you can add to your portfolio.

      To help you along your coding journey, freeCodeCamp features a very active forum where you can ask questions if you get stuck on any of the tasks or just want to ask about any coding concepts. Once you are thinking about searching for jobs that utilise your new skills, the Career Advice section of the forums can provide you with invaluable information about landing a job.

      A few other niceties about the service include that content is available in English, Spanish, and Chinese, there are regular blog posts related to programming from contributors and they’ve created a radio player that loops music “designed for coding” 24/7.

      To begin learning, you do not need to create an account but making one is highly recommended so that you can save your progress, earn certificates, and have a public profile page to show off. To learn more about the service, reading the FAQs section is highly recommended.