![]() Have you ever been browsing through a website on your phone and you try to click on a link but accidentally click another link because the two are so close together? Very frustrating. Link spacing is super important for mobile users. They’ll show on desktop screens and then conveniently disappear on mobile. To get around this issue, just add two spacer blocks next to each other. The spacer block can help you add much-needed whitespace to your website…but sometimes it’s too much for mobile screens. If you have vertically stacked card blocks on your site, like this… Card blocks may need to be adjusted for big screens. ![]() Whatever website width you ultimately go for, make sure you check it on some of those larger screens to ensure you don’t have any pixelated images, endlessly long lines of text, etc. That might mean constraining the width of your text block or page section or splitting your text into columns. The web accessibility initiative recommends a maximum line length of 80 characters. One other thing to note is that just because your website is set to a max-width of 1920px doesn’t mean your text should be that wide. Don’t forget to compress images to ensure they load as quickly as possible! The wider your max website width, the bigger your images will have to be to avoid looking pixelated on 4k monitors and other large screens. This also applies to other images on your website. So keeping your site width under the 2000px mark is generally a good rule of thumb if you want it to look great and load fast. But if your images are only 2000px wide, they’ll look pixelated on a 3000px+ widescreen. This is because huge images take a lot longer to load. Keep in mind that the recommended width of banner images is about 2000px. You can set it up to 3000px for ultra-large monitors. ![]() On Squarespace 7.1, go to Design > Spacing to set your max site width. Move the slider all the way to the right to set the max-width at 1920px. On Squarespace 7.0, go to Design > Site Styles to set your max site width. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. It’s best to make your website at least 1920px wide.ġ280px and 1920px are the two standard widths for web design. To take things to the next level, you’ll want to make some additional tweaks, which we’ll talk about next. ![]() It just means that it will be pretty user-friendly on every screen size. That doesn’t mean your website will look great on every screen size right off the bat. And you don’t have to take the time to build a whole separate mobile version of your site ( cough Showit cough.) Unlike some other platforms, which are just mobile-friendly, Squarespace websites intuitively adapt to fit virtually every screen size. This is one of the reasons why I think Squarespace is such a great platform to build a website. A responsive website responds to look great on every screen size-from tiny smartphones to large desktop monitors and everything in-between. That’s mobile-friendly rather than responsive. Responsive web design isn’t just about having a mobile version of your site. In this post, I’ll clue you into 8 key facts you need to know about responsive web design and give you tips on how to build a truly responsive website on Squarespace! Responsive web design is more than just having a mobile version of your site. But what exactly is responsive web design? And how can you make your Squarespace website more responsive? Everyone knows that responsive web design is absolutely essential.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |