Mobile first to me is mos logical because simply, it's easier to add
then to take away !
Christopher
MiB <mailto:digital.disc...@gmail.com>
Friday, November 07, 2014 8:28 AM
The main reason as I see it, is that mobile first methodology forces
you to take a hard look at your content and prioritize it after what
the users actually need to see first, second and so on. All fluff has
to go for mobile. And if it’s fluff why should it stay there for
browsers?
When you do this, you typically will realize that content, its
structure and presentation is a design problem. Depending on your
clients it may also involve teaching your them about their content.
It baffles me how little some commercial operations actually know
about what content their users actually are looking for and when they
need it.
Of course, content structure is very much tightly connected to markup,
which I find many designers take far too lightly as it influences
presentation, where CSS comes in. So far I’ve broken my wows when
doing mobile first by using javascript solutions affecting layout and
structure. But I have no users on mobile that have javascript
inactivated (about 5% on desktop).
Anyway, from a CSS design standpoint I too find it more fruitful to do
a good mobile design and iteratively build on that when targeting
larger displays.
______________________________________________________________________
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/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 06, 2014 6:38 PM
Why do you recommend building mobile first ?
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 images.
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.
Christopher
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
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 06, 2014 12:48 AM
Swapping will require more page requests from the server. The other
solution mentioned requires by default a 5K image if you go by the
highest screen possible, just so you can scale down appropriately
without blurred images.
I suppose gone are the days I could find an image at 800x600 do photo
magic to the image in Photoshop then merge it with the design.
Christopher
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/
______________________________________________________________________
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/
