• 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

    • Save 49% off WYSIWYG Web Builder v16
      By News Staff
      Save 49% off WYSIWYG Web Builder v16
      by Steven Parker

      Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where you can save 49% off WYSIWYG Web Builder v16. The ultimate toolbox for creating amazing websites with easy to use drag and drop interface for both beginner and professional developers.



      WYSIWYG Web Builder is an all-in-one software solution that can be used to create complete web sites. What-You-See-Is-What-You-Get means that all page elements will be displayed in the same position as in the designer. Unlike fluid (dynamic) layouts, objects depend on the position and size of the objects surrounding them. WYSIWYG Web Builder generates HTML, HTML5, or XHTML tags while you point and click on desired functions. Just drag and drop objects to the page, position them 'anywhere' you want, and when you're finished, publish it to your web server (using the built-in Publish tool). The software gives you full control over the content and layout of your web pages.

      No HTML knowledge needed! Drag and drop of the HTML objects: Text, Lines, Images, Marquees & Tables. Site Management. Easily add, edit, clone & structure your web pages from a single file Customizable menus, toolbars, keyboard accelerators, dockable windows, tabs, autohide windows Powerful Form tools with built-in PHP form processor Password protect your pages with the Login Tools/User Management Option to add custom HTML for each object (Before Tag, Inside Tag, After Tag) YouTube, Java, Flash, HTML 5 Audio/Video Quicktime & other Plug-In support Publish your entire we site, a single page or a group of pages (to local drive or a web/ftp server) Easy Photo Gallery creation Image maps Rollover images Navigation bar, Slide menu, Mega Menu & many other navigation tools. Ready-to-use Javascripts Template support; already more than 200 templates available! Slide Shows Support for third-party add-ons, using the Extension Builder tool Import existing HTML pages! Hyperlink Style Sheet, to customize the colors/formatting of hyperlinks CSS3 animations & transitions. Built-in Content Management System Tools) jQuery UI Widgets: TAbs. Accodrion, Date Picker, Dialog, & more Shapes, TextArt & other drawing components Events & Timers Advanced layer possibilities (floating layers, sticky layers, docking layer, anchored layers, etc) & much more! What's New

      Morphing Shape Pixabay Integration Snap Scroll Motion Effects & Entrance Animations Cards Social Login Editable Content CMS Improvements WebP Image And much more! Check out the full list of all new features here Good to know
      Length of access: Lifetime This plan is only available to new users Device per license: 3

      Updates included

      Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and license info, click here.

      Here's the deal:
      WYSIWYG Web Builder v16 normally costs $59, but you can pick it up for just $29.99 for a limited time - that represents a saving of $29.01 (49% off).

      >> Get this deal now, or learn more about it <<
      See all discounted Apps + Software on offer. This is a time-limited deal.
      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:



      Home Gym Giveaway | Ultimate Gaming Giveaway (feat. PlayStation 5 & Xbox Series X) 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 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.

    • Save almost $4K off this 2021 Premium Learn to Code Certification Bundle
      By News Staff
      Save almost $4K off this 2021 Premium Learn to Code Certification 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 98% off this Premium Learn to Code 2021 Certification Bundle. Amp up your programming skill set with 270+ hours of content on the leading coding languages — taught by top-rated instructors Ft. Rob Percival, Nick Walter, and more!.



      This deal consists of the following courses:

      JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages SwiftUI Apps for All Apple Platforms
      Learn the True Magic of SwiftUI & Make Apps and Widgets for iPhone, Mac, iPad, Apple Watch, and AppleTV The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples The Complete Web Developer Course 2.0
      Learn By Doing: Build 25 Websites & Mobile Apps Alongside Top-Rated Online Coding Instructor, Rob Percival! SwiftUI: The Complete Developer Course
      Learn Everything You Need to Know About the SwiftUI Framework & Leverage All of Its Great New Technologies 2020 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications Learn Python for Data Analysis & Visualization
      Gear Yourself with Necessary Skills for Expert-Proven Data Science Techniques Raspberry Pi Essentials & Extras
      Broaden Your Raspberry Pi's Horizons with This 1-Hour Crash Course PHP & MySQL: Certification Course for Beginners
      Learn to Build Database-Driven Web Applications Using PHP & MySQL Bootstrap & jQuery: Certification Course for Beginners
      Create Fully Animated, Interactive, Mobile Responsive Web Pages Using Bootstrap & jQuery Library HTML, CSS, & JavaScript: Certification Course for Beginners
      A Comprehensive Guide for Beginners Interested in Learning HTML, CSS, & JavaScript to Build Interactive Web Pages Java Foundations
      Master the General Purpose & Object-Oriented Language of Java to Enhance Your Skills for Mobile Development Making APIs with Django & Python
      Use the REST Framework to Quickly Make APIs for Your Django Projects Making Websites with Python & Django 3: The Ultimate Beginner's Guide
      Boot Up the Django 3 Web Framework Written In Python & Develop Websites Fast JavaScript Master Class
      A Comprehensive Course Just About Every Fact on JavaScript You Could Ever Hope to Know Python for Everyone
      Learn the Basic Syntax of How Python Language Works How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job The Python Mega Course: Build 10 Real World Applications
      A Complete Practical Python Course for Beginners & Intermediates! Master Python 3 by Building Actual Python Apps ROS2 For Beginners
      Master the Key ROS Concepts to Create Powerful & Scalable Robot Applications The Complete Web Developer Course: Build 20 Websites
      Learn the Fundamentals of HTML, CSS & JavaScript by Building 20 Real-World Websites Machine Learning for Absolute Beginners
      Learn to Build Machine Learning Models Using Spreadsheet Data Java Interview Questions: Data Structures & Algorithms
      The Best Java Interview Guide with the Most Common Beginner Questions Asked by FANG Companies

      The Ultimate Amazon Honeycode Guide: Build 7 Apps
      Build Apps to Automate Data Entry: Make Inventory Management Apps & More Easy Business Projects

      Learn Flutter & Dart: Complete App Development Projects
      Build Apps in Flutter, Google's Cross-Platform Framework & Code with Its Dart Programming Language

      Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More

      C++ Programming for Beginners
      Master C++, An In-Demand, High-End Language Used for Programs, Games, Development Libraries, & More

      The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      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 For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Premium Learn to Code 2021 Certification Bundle normally costs* $4,056, but you can pick it up for just $59.99 for a limited time - that represents a saving of $3,996.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?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $0.99 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial 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.

    • Planner on the web now lets users add image backgrounds to each plan
      By Abhay V
      Planner on the web now lets users add image backgrounds to each plan
      by Abhay Venkatesh

      Microsoft today announced that it is rolling out a new feature for Planner on the web that lets users add custom background to plans. The firm says that the feature provides a way for users to “visualize [their] work in a fun and flexible way” and allows for easier differentiation between the boards for those with access to multiple plans.

      The feature, located under Plan settings, provides users with image suggestions based on the name of the plan. The company adds that the capability is powered by the same ‘Designer’ feature available on PowerPoint and automatically surfaces “unique high-quality background images” depending on the plan. For example, a Coffee Store plan will contain suggestions of coffee beans or a coffee scene.

      To access Suggested Backgrounds, users must click on the ellipsis (…) menu at the top and head to ‘Plan settings’. Currently, there appears to be no way for users to upload their own images, and it is not clear if that ability will be added later. Additionally, suggested backgrounds are currently only available for the web version of Planner. The firm has not provided any information on whether the feature will roll out to other clients.

      It will also be interesting to see if the Redmond firm introduces a similar feature for Tasks in Teams, considering that that experience too is similar to that of Planner.

    • Save 98% off this 2021 Premium Learn to Code Certification Bundle
      By News Staff
      Save 98% off this 2021 Premium Learn to Code Certification 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 98% off this Premium Learn to Code 2021 Certification Bundle. Amp up your programming skill set with 270+ hours of content on the leading coding languages — taught by top-rated instructors Ft. Rob Percival, Nick Walter, and more!.



      This deal consists of the following courses:

      JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages SwiftUI Apps for All Apple Platforms
      Learn the True Magic of SwiftUI & Make Apps and Widgets for iPhone, Mac, iPad, Apple Watch, and AppleTV The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples The Complete Web Developer Course 2.0
      Learn By Doing: Build 25 Websites & Mobile Apps Alongside Top-Rated Online Coding Instructor, Rob Percival! SwiftUI: The Complete Developer Course
      Learn Everything You Need to Know About the SwiftUI Framework & Leverage All of Its Great New Technologies 2020 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications Learn Python for Data Analysis & Visualization
      Gear Yourself with Necessary Skills for Expert-Proven Data Science Techniques Raspberry Pi Essentials & Extras
      Broaden Your Raspberry Pi's Horizons with This 1-Hour Crash Course PHP & MySQL: Certification Course for Beginners
      Learn to Build Database-Driven Web Applications Using PHP & MySQL Bootstrap & jQuery: Certification Course for Beginners
      Create Fully Animated, Interactive, Mobile Responsive Web Pages Using Bootstrap & jQuery Library HTML, CSS, & JavaScript: Certification Course for Beginners
      A Comprehensive Guide for Beginners Interested in Learning HTML, CSS, & JavaScript to Build Interactive Web Pages Java Foundations
      Master the General Purpose & Object-Oriented Language of Java to Enhance Your Skills for Mobile Development Making APIs with Django & Python
      Use the REST Framework to Quickly Make APIs for Your Django Projects Making Websites with Python & Django 3: The Ultimate Beginner's Guide
      Boot Up the Django 3 Web Framework Written In Python & Develop Websites Fast JavaScript Master Class
      A Comprehensive Course Just About Every Fact on JavaScript You Could Ever Hope to Know Python for Everyone
      Learn the Basic Syntax of How Python Language Works How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job The Python Mega Course: Build 10 Real World Applications
      A Complete Practical Python Course for Beginners & Intermediates! Master Python 3 by Building Actual Python Apps ROS2 For Beginners
      Master the Key ROS Concepts to Create Powerful & Scalable Robot Applications The Complete Web Developer Course: Build 20 Websites
      Learn the Fundamentals of HTML, CSS & JavaScript by Building 20 Real-World Websites Machine Learning for Absolute Beginners
      Learn to Build Machine Learning Models Using Spreadsheet Data Java Interview Questions: Data Structures & Algorithms
      The Best Java Interview Guide with the Most Common Beginner Questions Asked by FANG Companies

      The Ultimate Amazon Honeycode Guide: Build 7 Apps
      Build Apps to Automate Data Entry: Make Inventory Management Apps & More Easy Business Projects

      Learn Flutter & Dart: Complete App Development Projects
      Build Apps in Flutter, Google's Cross-Platform Framework & Code with Its Dart Programming Language

      Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More

      C++ Programming for Beginners
      Master C++, An In-Demand, High-End Language Used for Programs, Games, Development Libraries, & More

      The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      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 For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Premium Learn to Code 2021 Certification Bundle normally costs* $4,056, but you can pick it up for just $59.99 for a limited time - that represents a saving of $3,996.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?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $0.99 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial 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.

    • Save 98% off this Ultimate 2021 Web Developer & Designer Super Bundle
      By News Staff
      Save 98% off this Ultimate 2021 Web Developer & Designer Super Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this Ultimate 2021 Web Developer & Designer Super Bundle. 14 new courses and 39 hours of content on JavaScript, HTML5, CSS, and more — master the coding fundamentals and kickstart your career as a web developer.



      This deal consists of the following courses:

      Web Design JavaScript Frontend Code Course
      Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages Website QA for Web Designers
      Work More Efficiently with Your Developer to Make Your Websites Pixel-Perfect HTML 101: A Beginner's Guide to Coding
      Everything You Need to Know About HTML, Basic to Advanced HTML 201: Intermediate level HTML
      Create an HTML Page with a Layout, Add a Title, Navigation, Some Written Content, an Image & A YouTube Video CSS 101: A Beginner's Guide to Beautiful Websites
      Make Your Websites Look & Feel Great by Mastering CSS CSS 201: Intermediate level CSS
      Learn More Advanced CSS & Be Able to Design Any Website in the Future CSS 301: Responsive Web Design
      Create a Page Layout Using Flexbox & Make the Template Responsive Understanding How Websites Work
      A Glimpse Into the Request/Response Lifecycle Web Development Fundamentals
      Tackle Common Myths About Web Development & Common Questions People Have HTML5 Canvas Element: Quick Introduction to Canvas HTML5
      Create Your First Interactive Battle Game with Computer Brain & Dynamic Values, Using HTML and Canvas HTML5 Canvas: Create 5 Games & 5 Projects
      Amazing Effects with JavaScript on the HTML Canvas Element JavaScript: Create 5 Fun Word Games
      Build 5 Amazing Interactive Games Perfect for Kids Using JavaScript JavaScript Math Games: Project for Learning Code from Scratch
      Explore How You Can Create a Fully Dynamic Interactive Math Game How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job! 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 Ultimate 2021 Web Developer & Designer Super Bundle normally costs* $1,896, but you can pick it up for just $34.99 for a limited time - that represents a saving of $1,861.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, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Check out the Neowin Store for our preferred partners.



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial 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.