Design to work in both desktop and mobile browsers?

Hello, everyone,

I was recently approached to design and develop a website for a Not For Profit organisation.

I’m really not much of a designer, so that aspect of it is intimidating, to me.

What are the “must do” and “must NOT do” in order to get a smoothly scalable site that will work in both desktop browsers and mobile browsers?

V/r,

:slight_smile:

That is a very open ended question.
To better answer it, it would be good to know what approach you intent to take.
will you be using a cms. And or a framework like bootstrap or foundation, or static and from scratch?
D

Wolf, I assume you don’t handle HTML and CSS all too often? Are you asking about the code behind this? Or just in general how the site should be designed (e.g. photoshop mockup) and you are asking how to do this mockup while allowing the design to appropriately scale in different browsers (an acceptable scale)

If you aren’t familiar iwth HTML and CSS all that often, I would 100% use a framework. The size of the framework depends on your needs. I wouldn’t trust doing this work on your own if you aren’t that great with HTML and CSS. It will just cause more headaches.

Definitely from scratch. The only things I want to use are HTML5, CSS3, and jQuery. I will be building a custom CMS (also from scratch) with secure login, for the owner of the site.

Basically, I want to design/develop something that will look the same regardless of platform - a desktop user viewing in FireFox or IE, a tablet user in Chrome, or a 'droid/iOS user using whatever browser they have installed (so that when they rotate, it scales to the width of their device.)

V/r,

:slight_smile:

@RyanReese, I have about 15 years of experience working just a LITTLE bit in HTML and CSS. I’ve spent most of my dev time with backend programming. Most of the projects that I work on, someone else designs the look/feel of a site and puts it into a template. This will be all me, no designer, so, yeah, I’m a little intimidated by that aspect of it. I can adjust CSS and HTML as necessary, but I’ve never built from scratch the look/layout of a site, before.

I am asking about the code, yes. No frameworks, no MVC. Totally from scratch. Ideally, the navigation will be in a header that slides down if the user scrolls down, same for footer, only the content will scroll, if there is enough to warrant it, and the scrollbar will be coded to always show, even if there isn’t enough content for scrolling (I hate it when one page has enough to scroll, but another page doesn’t, and the content shifts to the left or right, depending, between page loads.)

I know it’s a tall order. I appreciate all suggestions.

V/r,

:slight_smile:

well, get cracking.
It’ll be easier for us to help once we are able to see what you are planning on doing.
You layout, look and feel normally should depend on what the clients wants and or needs. If you have free hand, it can be more fun for you but also more work.
I’d say start putting down some ideas, you can use gimp, photoshop, pen & paper then share if you wish feedback.
keep an open mind and look up the best responsive sites out there.
But i think at this time you gotta jump in create something and then we can respond.

ps am betting that once you get started you’ll find out you wont have much to be intimidated about.
d

1 Like

If you don’t know the basics like HTML or CSS, etc, that’s going to be extremely hard for you to do. Why not use a pre-existing CMS like Wordpress (etc) so you don’t have to reinvent the wheel? I’d probably start with finding a responsive template that someone else has built and study on how it works. Mess with that until you have an idea of what you are doing and then possibly build your own template… ?

1 Like

HTML I know, mostly; CSS I’m lacking (very basic, no advanced stuff, at all).

And I typically dislike turnkey solutions (like pre-packaged CMS - I especially hate things like Joomla, Drupal, etc.)

Although, I do like your suggestion of finding a responsive template and reverse-engineering it just to learn how it ticks! Do you know of any?

Thank you,

:slight_smile:

Just google “Free responsive website templates” or some such. There are TONS available out there.

1 Like

http://foundation.zurb.com/templates.html

I use Foundation at work.

Although really wolfshade the concept of responsive d esign is simple. For frameworks, they code for mobile and that cascades up to work for bigger displays (percentage widths etc). Frameworks allow you to (through classes) target different displays (small-12 medium-8 = 100% in mobile, and tablet view would be 75%).

I code for desktop and hten for the little changes I need in mobile (reordering the display or whatever) I just use a media query and do that. Responsive design is just a big scary word. It’s a joke.

1 Like

You might find this SitePoint book useful:

There are also a number of articles about RWD, including these:

http://www.sitepoint.com/web-foundations/what-is-responsive-web-design/

http://www.sitepoint.com/responsive-design-vs-m-sites/

http://www.sitepoint.com/12-essential-responsive-design-tools/

But as Ryan says, it’s not nearly as scary as it sounds once you start to get into it.

2 Likes

If I was in your position (and I sort of am - I’m good with HTML/CSS but haven’t done much responsive stuff), then I’d start with a simple responsive framework that doesn’t make too many design or layout decisions on your behalf. In other words, avoid behemoths like ZURB’s Foundation or Twitter’s Bootstrap unless you want to use them as the building blocks of your frontend. An example of a simple non-prescriptive framework is James Dinsdale’s ([@molovo][1]) [Melody][2] framework - I used it recently to chuck up a three-page site for my wedding.

From there you could strip out the bits you don’t want to get a design that suits your needs, or study the code as inspiration and start from scratch as you planned. A lot of people, including experienced frontend devs, have created their own frameworks to use as a base for all their projects, so this seems like a good route to take.
[1]: https://twitter.com/molovo
[2]: http://melodycss.co/

2 Likes

I’m not sure if my comments will help or not. As of now, I’m still not bought into making a “Responsive” Web. In your case, I would use “Responsive” design because it’s probably the easiest to do. Single source to handle mobile and desktop.

However, I’m still pondering the question of… “What’s wrong with having multiple Views? One for desktop, One for mobile” Most web application uses what’s called MVC (Model/View/Contrller) to make an web application. It was built to have multiple “views”. For now, I’m sticking with multiple view but check out Bootstrap UI to do your layout design.

Must one use a “framework” to build a responsive site?

I loathe using other people’s code…

Of course not. There are hundreds of thousands of sites out there that are responsive (probably in the millions) that don’tu se frameworks.

I don’t use frameworks just because I don’t need that bloated mess. I’m not alone.

Understand the principle behind it, and you have everything you need. Responsive design is some overrated term. It’s a joke. It’s not complex by any means. Just make sure you take care of different screen sizes. Nothing scary.

Glad to hear!

Does SitePoint have any books on learning to program your own response site without using a bloated framework?

And how about online training on this topic from SitePoint?

Good to know.

1 Like

Can’t personally vouch for these particular books but Sitepoint does a good job with their books. Also gave a link as to more in depth reasoning’s behind what makes Responsive design the go-to method (the more learning the merrier.)

https://learnable.com/courses/responsive-web-design-key-concepts-2759
http://www.codefundamentals.com/blog/why-do-responsive-design
https://learnable.com/books/jump-start-responsive-web-design/online/index

2 Likes

You seem to have missed reading post #12

1 Like

Oh, right, sorry I missed that.