SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)

    This Week in CSS—November 11, 2013

    Here are some nice links that we've gathered for you this week:

    Articles

    One of the toughest tasks for web designers is to code HTML emails ... which seem like they are still, frustratingly, stuck in the 1990s while the rest of the web moves on. Nevertheless, it is possible to apply some of the new coolness to emails, such as responsive design (which is increasingly important, given that at least 40% of emails are opened on a mobile device). Here are some pointers for doing just that:

    Media Queries in HTML Email: Cover all your bases
    CampaignMonitor's Guide to Responsive Email Design
    Responsive emails infographic
    How Zurb made its emails responsive
    Responsive HTML Emails: a Different Strategy

    Luke Wroblewski points out a gotcha in designing for screen sizes in Responsive Web Design: Relying Too Much on Screen Size.

    These days, with advances in CSS, it's getting easier to create non-rectangular layouts. Here are two articles on how:

    Creating Non-Rectangular Layouts with CSS Shapes
    Using CSS Shapes to Enhance Visual Storytelling

    You might like to check out some recent experiments with "Responsive Icons" (links courtesy of the Responsive Design weekly newsletter):

    Responsive Icons demo
    Responsive Icons (a responsive article to the above )
    Responsive Icons with SVG

    12 Awesome CSS3 Features That You Can Finally Start Using

    Tips and Tricks

    Craig Buckler looks at some new inheritance features in CSS3 Inheritance Tips and Tricks.

    Check out this cool 3D Opening Type demo, all done with CSS.

    There are many approaches to, and articles on, horizontal and vertical centering with CSS, but it never hurts to have another one, right? In that case, take a look at this "Absolute Centering" method.

    Here's a useful warning about what they are calling "the Double Breakpoint Bug". (Basically, don't use the same values for "min" & "max" media-queries.)

    Inspiration

    Chris Coyier's Responsive Accordion
    Responsive Menu using CSS3 Regions
    Chrome icons created with CSS
    Hexagonal Buttons
    CSS3 pulsating heart

    Peeking into the Crystal Ball

    Here's an interesting (and slightly weird?) glimpse of a possible CSS4 feature: Responding to environmental lighting with CSS Media Queries. What do you think of this? Is it something you think you'll want to use?

    A Spot of Wisdom

    With responsive web design, content is the elephant in the room. Especially if your content is a giant photo of an elephant.

    Source
    Hey you should disable right-click on your website so everyone will hate you.

    Source



    Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue.

    You can also view a list of previous posts here.

  2. #2
    SitePoint Member
    Join Date
    Nov 2013
    Location
    London, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love the way Google created their coloured loading circles Here you can see the tutorial

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by aclifford View Post
    I love the way Google created their coloured loading circles Here you can see the tutorial
    That's pretty clever. Nice link.

  4. #4
    SitePoint Member
    Join Date
    Nov 2013
    Location
    London, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you like it It's really effective

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post

    There are many approaches to, and articles on, horizontal and vertical centering with CSS, but it never hurts to have another one, right? In that case, take a look at this "Absolute Centering" method.
    I've been using that for about 10 years lol and surprised that not many people still know about it.

    I remarked about it (in the comments) a few months ago where the method was missed from this round up of techniques.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I've been using that for about 10 years lol and surprised that not many people still know about it.
    I was pretty sure I'd seen you using that before, but was sure it would be in your cannon, anyway. The link was suggested to me, but it's nice to have the roundup, too. Thanks Paul.

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    @ A Spot of Wisdom
    With responsive web design, content is the elephant in the room.
    Why not throw away the content? Then the whole room is for the design.

    But there is an alternative:
    With responsive web design, design is the elephant in the room.

    Source: the ultimate responsive design
    Back to basic!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Francky View Post
    the ultimate responsive design
    Indeed.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post

    But there is an alternative:

    Back to basic!
    Of course mobiles will still scale that as though it was 960px unless you tell them not to

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Of course mobiles will still scale that as though it was 960px unless you tell them not to
    I was wondering about that a while back, but it seemed that as long as you just give a max-width and not a width, the mobile browser is flexible about it and the content just fills the width of the screen. At least, that's what Francky's example does on the iPhone.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I was wondering about that a while back, but it seemed that as long as you just give a max-width and not a width, the mobile browser is flexible about it and the content just fills the width of the screen. At least, that's what Francky's example does on the iPhone.
    No, I think you'll find it's still scaling

    (without meta tag)
    http://www.pmob.co.uk/temp/mob-widthtest.htm

    (with meta tag)
    http://www.pmob.co.uk/temp/mob-widthtest2.htm

    The text is much smaller in the first example but doesn't look bad on the iphone but in some mobiles it will be scaled very small. (The same happens on the ipad.)

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, thanks for the demo, Paul. That's what I originally thought, but obviously fooled myself with a faulty test.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, thanks for the demo, Paul. That's what I originally thought, but obviously fooled myself with a faulty test.
    I had to look twice as the new mac iphone emulator is now in large size and so it doesn't really notice when text is small. The space at the side of the layout was the give-away

  14. #14
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    When I compare the 2 testpages with Chris Pederick's Developers Toolbar (Resize > View responsive layouts), with the FF menu (Extra > Webdeveloper > Responsive Design View), with mobiletest.me, with iphone4simulator.com, with testiphone.com or with mobiele-website-emulator.nl, I don't see any difference ...

    It seems all these simulators are just shrinking the sizes, without taking account of the viewport meta.

    Walking a street length behind, I don't have an iPod or iPad or other mobile device.


    @Paul O'B ("Of course mobiles will still scale that as though it was 960px unless you tell them not to")
    Where the 960px come from?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    When I compare the 2 testpages with Chris Pederick's Developers Toolbar (Resize > View responsive layouts), with the FF menu (Extra > Webdeveloper > Responsive Design View), with mobiletest.me, with iphone4simulator.com, with testiphone.com or with mobiele-website-emulator.nl, I don't see any difference ...

    It seems all these simulators are just shrinking the sizes, without taking account of the viewport meta.
    Yes all those are just treating the code as though you made your desktop window smaller. They don't emulate real devices.

    If you have a mac you can install the mac emulator which is a part of the complete SDK package for developing apps etc and is 99.9% accurate. Also the Opera mobile emulator (available on a PC) does a pretty good job also. See screenshots attached.

    mobile-pic.png

    Walking a street length behind, I don't have an iPod or iPad or other mobile device.
    No I don't have an iphone either (nor a mobile phone) but luckily my wife has an iphone and an ipad which I borrow for testing (when she's not out)
    @Paul O'B ("Of course mobiles will still scale that as though it was 960px unless you tell them not to")
    Where the 960px come from?
    Well some sources say 960px and some say 980px but you can read about it here.
    Quote Originally Posted by davidcalhoun
    If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page

    More info here.

  16. #16
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Ha, thanks for the links - I definitively have to read more.

    ... the Opera mobile emulator (available on a PC) does a pretty good job also.
    Splendid!
    • Just downloaded the Opera mobile emulator from the Opera site, looks fine!
    • I remember older Opera browsers had a "View small device" option in their menu, but that was gone some versions ago. Didn't know the Opera mobile emulator was the improved successor.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Here's another option for responsive emails: http://designinstruct.com/tool/respo...work-zurb-ink/

    It includes a framework to help you along.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •