The title says it all.
So if this happened to you what did you do?:
-
Used Bootstrap?
-
Studied the entire Flexbox manual?
-
Learned a native app framework (Reat Native or Ionic or NativeScript or other)?
-
Decided to learn crochet?
I just use Bootstrap for all of my layout, but Iām still in the early stages of FCC so aside from media queries I donāt know the other alternatives for responsive design (except for crochet. Love crochet.)
I find itās easiest to design a wireframe and do the responsive layout in Bootstrap first. Then I add the functionality to the project. This helps me avoid phone-view shock.
cheers,
Ali
1 Like
Oh yeah, I should add most web design processes use the concept of āmobile firstā. So you get the project design working on a mobile layout first then adjust it for tablet and computer screens. This can help.
2 Likes
@Aldek, I think Iād be a terrible crocheter - my OCPD tendencies would hinder my artistry.
For some reason Iāve been avoiding Bootstrap (other than doing the intro FCC challenges). I am averse to it because as much as I appreciate its power and usefulness, I wanted to learn CSS properly first. Bootstrap looks too easy - and itās also over-used (too many websites looking the same). My opinion.
I started learning Flexbox a few months ago but put it aside so I only know the basics. There are just so many things to learn. Iāve been focusing a lot on JavaScript so my JS skills are starting to surpass my CSS skills. Iām also diving deeper into HTML5.
Iām very aware of āmobile firstā but itās always good to be reminded of it. Iām going to have to put it higher on my priority list.
Cheers
1 Like
I use Bootstrap only to use the grid. Rest of the RWD work I do by css.
4 Likes
Yep. I agree with devguru. Just use Bootstrap for layout then you can use custom CSS for the ālook and feelā. This means your site wonāt look identical to every other site and gives you a lot of freedom for the visual design. Using the 12-column grid you have a lot of freedom in layout.
I agree that it is very useful to learn how to do all of this with CSS first. If you still want to avoid Bootstrap for now just follow these steps:
- Wireframe ALL of the layouts for each device size first. This allows you to see where elements need to move to give you the layout you want in each device size.
- Use the CSS box model and create your layout for smartphones first.
- Then use media queries for each of the breakpoints you need to resize and rearrange things for larger devices.
It is a LOT more time consuming doing it this way. Learning how to do it is useful, though, because sometimes you may want to make a change in a site between official Bootstrap breakpoint. It gives you a lot more control over the design.
Bootstrap looks too easy because it is easy. This is why front-end frameworks are used extensively in industry. If you are going to learn to do responsive design just with CSS Iād recommend doing it just as a learning step and eventually move to Bootstrap to save you time.
4 Likes
Do you run the Web browser on your computer in a window? Resizing it to a narrow window will help catch a situation like that really early. 
You donāt need Bootstrap for mobile compatibility, just use media queries.
Thatās a good plan @Aldek! Thank you for this detailed suggestion - much appreciated!
I use Chrome @astv99 and I do use dev tools but it doesnāt compare to looking at it on my phone. My initial post was slightly exaggerated in that I already knew my project wasnāt mobile friendly but it turned out worse than expected.
Iām having fun in the process so itās all good.
I tend to design desktop screen first, while checking on smaller screens and making adjustments as necessary using media queries.
Also, I turn off/hide certain divs (unimportant stuff/eye-candy, etc) on the mobile screen so only the important sections appear on the mobile device. (This is where Bootstrapās hidden and visible classes come in very handy).
I think itās still important checking on the actual device as there are differences between checking the site on a smaller desktop browser window vs. the actual mobile browser. Some things just behave differently (usually embedded videos), parallax, mouse-over effects (or lack of it).
** my setup, here checking the portfolio site of one fCC user. I have another 3rd monitor to the right (off-screen)
3 Likes
Thatās a very nice setup @owel! I remember us having a discussion about this kind of setup a while ago but back then you showed me a concept pic. You did it!
Iām glad itās not just me who thinks that the device view in dev tools doesnāt accurately represent devices (other than screen sizes).
Thanks. The iPhone and iPad I already own. The rest are eBay finds, so not really expensive to get this setup. I think this is a good representation of iOS, Android and Windows devices.
Win8 Dell Tablet - $50 on eBay
Motorola Android phone - $20 eBay
Amazon Fire 7 tablet - $50 @ Amazon, or $10/month
B&N Nook Color - $20 eBay (not pictured)
Focus on the positives. You got something great done in a month.
A learning project can realistically only have a few goals, what were yours when you started the project? Did you meet them? Donāt beat yourself up over a goal that wasnāt part of the project, just add it to the goals for the next one!
1 Like
Now this is coming from someone who hasnāt touched Bootstrap yet (Iāve dabbled a bit with Foundation but thatās it), but Iāve shifted all my coding to chrome because of the device tool bar in developer tools. Iāve yet to have any major display issues when checking projects on my phone.
You can check out this site too: http://www.responsinator.com/?url=about:blank itās my go to for further mobile testing.
You can either enter a url at the top or, just make it a bookmark on your browserās toolbar. What you can do is load up your webpage and then click the bookmark and it will load up your page in each one of those mobile display frames. They are frames though, so if you make any changes to the code, you have to right click on whatever device your testing for and have it reload that frame. Or can just relaunch the entire responsinator page, itās up to you.
As Owel indicated, nothing beats actually having devices for testing of course, but I find both of those good options that havenāt lead me astray yet.
Iām glad youāre learning the backbone of responsive design first as to me Bootstrap or any other framework is something to just speed up your production. But truly understanding what goes into making a site responsive will save you a ton of frustration and reworking down the line.
1 Like
Thank you @craigrpears. Youāre right I should focus on the positives. it was the Random Quotes project. My goal was to do it differently from the example.
My accomplished goals were the following:
-
Draw my own quote bubble image using an svg editor
-
Center it in the middle of the page
-
import a series of quotes in json format from an external source using AJAX (non jQuery)
-
pick a random quote from the json object
-
have it fade in in the center of my quote bubble image (jQuery)
-
have it fade out after 8 seconds (using setInterval) and then replaced with a new random quote
-
have a button to clear the interval and pick a new random quote (stop the quotes rotation)
-
have a second button to resume the rotation of quotes
-
have a third button to tweet the current quote
-
have an alert popup if the quote is greater than one-hundred-forty characters saying that the quote cannot be tweeted
-
pick an interesting color palette for the background, quote bubble and buttons
I am reworking it to be responsive.
Thanks @dlyons for your input. I will check out the link you provided.
I like doing things the hard way first so I appreciate your feedback about me not using Bootstrap.
I will learn it eventually but I want to be able to work without it.
Cheers
1 Like