Hot answers tagged

18

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


12

I have just run a test and the only difference appears to be on mobile browsers. I created a 990 x 900px image of the Twitter icon (that icon seems far too detailed a design for good scaling, so good for this test). I saved this as SVG, JPG, GIF, Transparent GIF (just the bird shape, no background colour, instead adding this with CSS), PNG, transparent ...


8

Mobile first is best practice -- it's not law, and if you understand why you should be using it, and why you don't want to use it on a particular project, that's fine. It's worth noting that mobile first affects the design/UX and the build itself, and as this is a graphic design forum, I'm a bit perplexed as to why you think a mobile first design will ...


7

(Note: please read the OP's own answer before this one, since my answer is a comment on the OP's investigation) This is a known issue of Android Chrome. On some of their builds they disabled anti aliasing causing the vector shapes to be rendered with crisp edges. The reason for this was to reduce the overload created by anti aliasing calculations. Due to ...


5

Traditionally, screen resolution has been 72dpi, though newer high-res monitors like Apple's Retina displays can go up to 400dpi. That said, when saving images for the web, image resolution doesn't really matter. Most people will export at 72dpi, but the most important thing to do is to export at the pixel dimensions at which the image will be displayed. ...


3

The origin of "mobile first" The idea of "mobile first" in regards to Responsive Design comes from a time when the browsers for mobile devices were a lot less capable than what you would find on a desktop device. Many of them did not support media queries at all, so the idea of building up a fancy desktop design and then sticking in styles using media ...


2

There is a very important distinction between vector images and bitmap images. Vector images, if we simplify a bit, are rendered by the client while bitmap images are being rendered by you. This means that the application your sending the image to has more say into how it behaves. The end result is that you have following downsides: It takes more ...


2

(Not enough points to comment on Richard B's answer directly yet.) To answer your question Richard B, We often see this effect on elements needing anti-aliasing on lower-powered hardware. This even happens on rounded-cornered DOM elements, when anti-aliasing is reduced or removed from those environments. At our company, we have some cases where we use ...


2

What to include? The Minimum <!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) --> <link rel="shortcut icon" href="/favicon.ico"> <!-- Modern browsers (196x196 should cover all modern browsers) --> <link rel="icon" type="image/png" href="/favicon.png"> <!-- iOS & other mobile devices (ideally 180x180, at least ...


2

Use CSS to not display these divs below a particular break point. (I use 400px in the example below, but you can set that to whatever you want.) @media screen and (max-width: 25rem) { /* 400 px */ .top, .left, .right, .bottom { display: none; } }


2

First, there is no such thing as Illustrator document's ppi. It just treats pixels as physical units, such that 1 inch = 72 pixel. Second, Raster Effects has no effect on how big Illustrator makes an image pasting it in a document. So, if you create a document with dimensions 1920x1080 pixels, and paste an 144 ppi image of the same dimensions, it ends up ...


2

I tested your website www.cosmosdesign.co.nz on different screen sizes and its's working fine on all screens. Regarding your question for mobile first design I would like to say that your designing approach must consider your target audience along with many other factors like images, content, etc. If your target audience will be using this website mostly on ...


2

This type of layout is called a split layout, for the simple reason that there obvious splits in it, often in the vertical direction. Google has some pretty good results when searching using this term. The above image comes from a Codrops article/template on split layouts. The movement on the page you linked does not use parallax scrolling. Parallax ...


1

There is no one optimal contrast. Readability depends on a combination of contrast, font size, line height, font used, and audience's preference. Pulling from this great answer by Multicon on choosing colors for web design type: While a designer's eye should always be a part of the final equation when making design decisions, there is room to maneuver ...



Only top voted, non community-wiki answers of a minimum length are eligible