Responsive web design

Responsive web design
0

#1

so im on my third project (build a wikipedia viewer) and so far i just realized that my past two projects look really crappy on a cellphone. Is making the web projects responsive on phones a priority right now? if so can you point me to the right direction in learning how to properly make them responsive?

i dont think FCC went over that, i know bootstrap is supposed to make them responsive and i include the
viewport content on everything I do

and try to make it as responsive as i can but somehow i manage to mess it up when trying to view on cellphone

what do you guys think? are you making your projects on a mobile first basis?


#2

Hi @Alexaxel98 and thanks for posting in the Free Code Camp Forum! Do you have a link to your project? I assume that you are using codepen.io to build it ?

this will allow other campers to check out what code you have currently typed and will allow them to better assist you in diagnosing problems and pointing out tips!

Thanks and happy copding :slight_smile:


#3

http://s.codepen.io/Alexaxel98/debug/RRNpXv (weather web app)

http://codepen.io/Alexaxel98/full/RaXGqP/ (quote web app)

feel free to give feed back while youre at it :smile:


#4

I’ve designed most of my projects from a mobile-first perspective, but some I didn’t. I think it’s great to try, and the more you lean on Bootstrap/Foundation/et al. the easier it is to do. My portfolio page took the longest of any of my projects because I wanted to make it look good on all displays. I think I spent a month with it (not full time), and I’m still not entirely happy with the results.

I would never say you shouldn’t work on making your UI responsive, but keep in mind design is not the focus of freeCodeCamp. Also remember that just because you submit an assignment as “done”, doesn’t mean it’s untouchable. I think refactoring old code is a great way to grow. Feel free to move on from a functionally complete project and go back when you want to make it look better, tweak the inner workings, or use a library you didn’t know about before!


#5

awesome advice! i thought everyone else was focusing on their projects being primarily responsive but you’re right! thanks for taking the time to reply!


#6

@Alexaxel98 as @PortableStick mentioned, FCC is not focused on design, it’s more about coding. However, you may find a lot of awesome design tips asking for review on gitter or in other FCC related places.

I always start thinking mobile first.
Why? The main reason is that if you have your sketch, prototype, wireframe, etc fitting mobile, you should start with the most important stuff. On larger screens you can simply add more, reorganize stuff, or simply make stuff appropriately bigger and with more free space around.
When somebody starts desktop first, it seems harder to reduce the number of items. This approach is also great to train UX and product management skills. Design a product (whether it’s an app or a simple website) from the smallest display possible. It puts a lot of constraints, which is sometimes harder than simply code desktop first.

Designing mobile first, keep in mind horizontal and vertical display differences. Sometimes what makes sense vertically gets cut horizontally and a small change in design may make it work better.

What’s more, it’s not just mobile. It’s mobile first, touch first, and user first. Not only mobile devices have touch sensors.

Despite all above, sometimes the projects are to be redesigned. Don’t treat projects as finished stuff, iteration is the king and good product is never done. Be open and give a chance yourself to get constructive feedback from others. It makes us grow. If I don’t have time to introduce changes today, I will keep it on my to do list for the future and come back later. Loving own designs and code too much may be an obstacle to code and design better.


#7

Responsive web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. offering the same support to a variety of devices for a single website, content, design and performance are necessary across all devices to ensure usability and satisfaction

Meaning: build a website that support (mobiles, tablets, ipads, laptops and pcs)

To start developing responsive websites you need to know three things

Fluid and flexible layouts
Flexible images
Css3 media queries

to know more :http://www.ammanu.edu.jo/Learn/Learn3.html