My first attempt at a RWD site was for a simple one-page site for an NFT project. It didn’t use media queries, but many lines similar to: max(value, calc(vw*x)) for margins, padding, font-size, etc.
I also was dependent on Javascript. If the screen was <400px I might have a header bar anchored to the top with a profile pic left, title center, hamburger menu right, content underneath. If the resolution was larger socials appeared in one spot, if larger, in the footer. If the screen was over … 600px, I lost the top header bar; title became the first line in the main content area; hamburger popup menu now a permanent fixture as left navbar, PFP floated left in the content area.
Being new, is this good or bad? I only hear people speak of flex boxes and grids. Not rearranging layouts with JS. Since the layout and content is essentially within JS code, any attempt at SEO for naught?
2
Answers
Using max() and calc() can work for simple layouts, but can become difficult to maintain for more complex layouts. Flexbox and Grid is more effective and efficient for creating responsive layouts. When it comes to SEO, it’s important to ensure that your content is accessible to search engines by including it in the HTML of your page.
Javascript is great for making pages dynamic and obviously improving some UX things, but you should know where and when to use it.
You should definitely use CSS and media query for responsiveness on your page. There are a lot of frameworks or libraries that make the css writing process a lot less painful (I use Tailwindcss and I think is a good one).
And as for SEO, if you create a page based entirely on javascript, you will find a lot of difficulties in this area. You should read about server-side rendering, which may help you to improve this.
Today we have a lot of tools that can help you with this, if you use React you have Nextjs, if you use Vue you have Nuxjs and so on.