Basically the web is becoming a billboard, if I want to design for 5K
I'd need a 5K image, from there I scale it down, or up because I'll be
designing for mobile first, then I adjust the page and graphics
accordingly for desktop.
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 06, 2014 7:41 PM
That does make sense to build simpler first then go desktop after,
I just may follow this logic !
Not necessarily. Most of the time I can use just three images.
Each image can span more than one breakpoint. My base
(mobile/phone) images usually get me up to my 600px breakpoint,
for example.
Let me understand, you typically keep your images up to 600px in
size regardless if the screen size is 2K or heck even up to 4K ? I
assume you do the 2x / 3x for Retina displays ?
I have used images for 2x displays. I dont worry about it for
photographs. Logos mostly.
see picturefill.js
http://scottjehl.github.io/picturefill/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
<http://medialogic.com>
#663399
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 06, 2014 7:17 PM
Sent from my iPhone
On Nov 6, 2014, at 6:38 PM, Crest Christopher
<crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote:
Why do you recommend building mobile first ?
Aside from being best practice, it is much harder and requires more
code to achieve a mobile layout from a desktop first build because it
requires you to "undo" a great deal of the desktop layout. It is less
code and work to build mobile first as it is a simpler, additive
process. I can tell you from experience that desktop first is a
nightmare.
There is a pro and a con with swapping images, the pro, you can use
bitmap images, the con, you have to have, as I mentioned earlier,
maybe up to six different resolutions for your images. The CSS may
be the easiest to do, the hardest will be managing your image
Not necessarily. Most of the time I can use just three images. Each
image can span more than one breakpoint. My base (mobile/phone) images
usually get me up to my 600px breakpoint, for example.
If you don't go the swap images route as suggested by Tom :) You have
to design all in vector. I ask because, unlike previous web
development experiences, I want to export my image assets perfectly,
focus more on markup and styles and hopefully have an end result that
plays well on most, if not all mobile phones and tablets and last but
not least, desktops / laptops.
See my second reply above. I'll also add that you will be hard pressed
to get perfection in a web page compared to a psd.
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many
mobile device browsers will download images within other mqs. There is
an easy way to stop this in most cases.
For example, my base mobile styles (because you build pages
mobile-first, right?) have a bg img. I'll use that img until I hit a
breakpoint of 37em at which point I'll swap to a larger img. As is,
most browsers will download both imgs needlessly. You can easily stop
this by wrapping the base style img in an mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but
will look later.
HTH
Sent from my iPhone
Karl DeSaulniers <mailto:k...@designdrumm.com>
Thursday, November 06, 2014 12:29 AM
+1
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Norman Fournier <mailto:nor...@normanfournier.com>
Thursday, November 06, 2014 12:24 AM
Hello,
No, the idea is to swap out higher resolution images for the higher
resolution screens so that no visitor ever has to see distorted,
pixellated images.
Norman
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
