OrganizedFellow Posted November 29, 2012 Share Posted November 29, 2012 Hiya gang! [waves and slaps some High Fives to those nearest to me] My current client wants to go responsive on his website. I built it earlier this year using Foundation 2.x. Now that v.3 is responsive, I thought I might give it a much needed upgrade. While going through my files I noticed that I didn't use much of the framework. Only the grid, the modal (Reveal) and the slideshow thingee (Orbit). So I was thinking ... hhhmmm ... instead of upgrading Foundation 2 to 3 ... I'd really like to give 320andup a shot. And since it doesn't use any grids, I may use the the gridpak generator, or just take what I need from Foundation. I've grown quite fond of their layout (div.row>div.columns). OR It just may be easier to use Skeleton for the grid (I don't really like having to use 'alpha & omega'). FlexiSlider or BlueBerry for the slideshow. Reveal is available stand-alone, but I really want to minimize my dependence on too much javascript. I've seen several nice HTML5/CSS3 based modals around. 1 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted November 29, 2012 Author Share Posted November 29, 2012 This is my first ever responsive build. I've done plenty of fluid and fixed. I've read TONS about best practices. How to do. What do to. etc. But I'd like to discuss with you how do YOU start something like this. Perhaps I can learn something new today. Anyone use 320andup? What is your preferred method for designing mobile first? Link to comment Share on other sites More sharing options...
ryan Posted November 30, 2012 Share Posted November 30, 2012 Wasn't Foundation v2 also responsive? I've not checked out 320andup yet, but am going to take a closer look today. And this gridpak generator looks pretty awesome. great links. I think mobile-first sounds like a great slogan but not a great strategy. It's easy to identify sites that have taken that strategy because the non-mobile version of the site often seems like… an enlarged mobile site. I've not done a lot of mobile stuff yet, but with what I've done, I prefer to focus on both at the same time. Otherwise it seems like sacrifices are being made to one or the other. The full-size design is still what I ultimately have to sell to the clients. There's fewer variables on the mobile side in terms of design and that part [so far] seems a lot simpler to account for (and easier to get approved too). So I guess I think the picture should be bigger than just mobile first. Sorry, maybe I'm a bit off topic, but just remembering an overabundance of mobile first hype at an AEA event last year. 2 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted November 30, 2012 Author Share Posted November 30, 2012 We were looking at our Google Analytics, etc. and found that almost 70% of the traffic are mobile devices. A huge number are 320px wide and less. Which really surprises me with the boom of Android and iPhone visitors - since many are larger than 320px now. Instead of working with too many mediaqueries, I'll just focus on the full width and the 320px< one. Off topic talk is great, it helps to spur new ideas. I actually decided to skip the GridPak and use semantic.gs. I figure I can't go wrong with a percentage based solution. I also skipped the 320andup approach, as it offered lots of baseline and reset styles. Maybe just a simple normalize.css + semantic.gs UGH, I hate being so undecisive, lol Link to comment Share on other sites More sharing options...
ryan Posted December 2, 2012 Share Posted December 2, 2012 70% is a seriously large quantity of mobile traffic. I agree, if that's what your analytics tell you then mobile first all the way. Most of the sites I work with have mobile traffic at a similar level to IE6 traffic. Which is to say, not much. But the trends are always increasing (unlike IE6). Link to comment Share on other sites More sharing options...
diogo Posted December 2, 2012 Share Posted December 2, 2012 Here's a great example of mobile first http://aneventapart.com/ I love how it looks in my android phone! 3 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted December 3, 2012 Author Share Posted December 3, 2012 Here's a great example of mobile first http://aneventapart.com/ I love how it looks in my android phone! That looks awesome. I have yet to learn a good way to hide content based on size. I don't want mobile devices to download full size gallery photos, now doubling download content. Learning as I go Link to comment Share on other sites More sharing options...
Pete Posted December 3, 2012 Share Posted December 3, 2012 diogo - I love opening that one in my browser then resizing it smaller. They've got a lovely effect when it has to switch between the larger images and the mobile ones - it seems to load a little loading icon then brings up the smaller images. I'm going to snoop around the source code Probably the nicest looking example I've seen of responsive design. Link to comment Share on other sites More sharing options...
diogo Posted December 3, 2012 Share Posted December 3, 2012 First time i saw it was on my android, and it looked great! I went immediately to the computer to see how it would look like there. Link to comment Share on other sites More sharing options...
jacmaes Posted December 5, 2012 Share Posted December 5, 2012 According to the developers, they're using breakpoints.js to load in additional content dynamically depending on screen size: https://mobile.twitter.com/murtaugh/status/275643312877207552 http://xoxco.com/projects/code/breakpoints/ It does look great and loads fast. It's responsive in every way. 1 Link to comment Share on other sites More sharing options...
Recommended Posts