AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
(There are 2560 by 1600 pixels in a 13" MacBook Retina.) This increased pixel density allows for images to be rendered sharper and clearer, assuming that there are sufficient pixels in the image to fill them, of course. The retina display is a term coined by Apple to describe one of its screens that enjoys a far higher pixel density than a regular screen, achieved by ramming many more, smaller sized pixels into a display. Not sure if you believe me? I have some examples.Īh, yes, retina displays. If an image is intended for print, that is a whole different ball game, but on a computer screen you can use 72, 240, or 300 pixels per inch. Let's clear up one misconception immediately: it doesn't matter how many blinking pixels per inch (ppi) or dots per inch (dpi) your image has if it is going to be displayed on the web. No image means no story, and having to chase them is a bit of a bore.īut heavens-above, joining the billions of images floating about on this interconnected web of servers and wires and fibre and routers is a great deal of confusion regarding just how big a photo needs to be. It's most certainly a peeve of mine when PR people send me press releases without any accompanying appropriate imagery. Given that we're a photography-related site, running a story without at least one image is almost unthinkable for us. It concluded that tweets containing images receive 18% more clicks than those without, and a few other tasty image-related nuggets besides. Buffer, the team that allows you to stack up your social media posts for timed release, analysed the power of images on Twitter. If you were to stumble upon one, you might well think it a remnant from 1999. A website that doesn't make use of any kind of imagery, whether that's photography, illustration, or diagrams, is a very rare thing indeed. Here’s an example where I wanted to align the heading of a specific block center on mobile only.Images: they are the currency of Intergoogles. This is how I use mobile queries 95% of the time.Ĭhange the alignment of text using the text-align property. Here are some ideas:Ĭhange padding and margins between elements and links to make it easier for mobile users to read text and click links on small screens. There are lots of ways you can use media queries to edit your mobile site. And it took less than five minutes to setup. The two-image Gallery with the single image underneath it only shows up on smartphone screens. The three-image Gallery only shows up on desktop and tablet screens. The result is that the three images look like a cohesive unit. In the third snippet, I adjust the top margin of the image block so it’s the same as the margin between the two Gallery Block images. In the second snippet, I identify the two-image Gallery Block and the image block underneath it and tell them to hide on desktop and tablet screens. In the first snippet, I identify the three-image Gallery Block by its block ID and tell it to hide on mobile screens. Squarespace avenue smaller images in gallery stack code#With that out of the way, here’s the basic code we’ll be using: I make finer adjustments if necessary but 90% of my edits use these breakpoints. That said, I typically find that two mobile breakpoints cover most of my bases: 640px for smartphones and 1024px for tablets. All you can do it test your site on as many different screens as possible and adjust your CSS accordingly. Mobile devices come in many different sizes. The truth is that there are no standard mobile breakpoints, at least not anymore. A mobile breakpoint is the width (in pixels) at which the website changes to fit smaller screen sizes. Ready? Let’s get started… The Basics of CSS Media Queriesīefore I give you the code you’ll need to make your first mobile edit, let’s talk about breakpoints. In this post, I’ll give you the CSS you need to make changes to Squarespace on mobile along with ideas to get you thinking about how mobile edits can make your site more user-friendly for visitors on the go. Whenever I design a website for a client, I look at their website at smartphone and tablet width and make adjustments to make sure their site looks perfect on every device. Just because it fits doesn’t mean it looks amazing though. That means your full-width website will automatically adjust to fit any screen size. One of the reasons I love Squarespace (and prefer it over other platforms like SHOWIT and Wix) is that it’s mobile-responsive.
0 Comments
Read More
Leave a Reply. |