Sadly, I have to ask for help after years and years - Mobile Web Site Design and Development forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Sadly, I have to ask for help after years and years

Responsive Design

Terabytes

3:24 pm on May 4, 2016 (gmt 0)

10+ Year Member

Hey!

I'm not actually looking for a handout, just possibly spun around and pointed in a direction...
After years of non-responsive design, I have to jump in finally with both feet and teach the old dog new tricks.. (me)

The question involves containers, and dividers, and classes... then.... a blank stare usually....

I totally understand the concept, a container with several dividers (or classes) making up the layout for a page. However, I'm not actually sure how to build another divider that will be placed under my previous divider... (things get weird when I start adding dividers, it must be something in the CSS I think)

Sounds too simple correct? It probably is... I'm not sure what I'm missing, and after some research, I'm pretty sure that I have no clue what the syntax might be, so, I'm not sure what I'm looking for...I've spent considerable time viewing other websites code, but everyone has a "better" idea and I can't actually compare apples to oranges in order to move forward with this...

If anyone can point me to a super simple example for this, (or just give me the syntax I'm looking for so I can search myself) I would be forever grateful...
(please don't' send me to w3schools, there's just too much info out there and I'm having an issue trying to sort it all out)

Can you direct me somewhere?
Thanks in advance for your help!

BeeDeeDubbleU

4:00 pm on May 4, 2016 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I feel your pain. At 67 years of age I am starting to struggle with all the new technology so I am in much the same boat as yourself. There is definitely a market for a template that can be adapted to create a basic responsive website.and in the process allow the user to gain a wider understanding of the various techniques being used for responsive websites.

In my experience there are too many templates, which are unnecessarily complex. I see them advertised with "40 pages", "40 skins", "10 contact forms", etc. when all I need is a basic template from which I can create any other pages that are required by myself. Because of all the options with these templates it would take a wizard to strip out the redundant code that would be left after using them for a simple website.

What I can tell you (and I think I am OK with posting this) is that I did find one excellent template, which I have used successfully on two or three websites now. I can't post a link but if you Google "simple responsive template" you'll find it near the top of the results. It comes from a Romanian company called Pro Web design but the site is in perfect English.

Note that you will still have a bit of work to do in understanding this but it is probably as good as it gets at present. The site also includes a tutorial of sorts. Let em know how you get on.

Terabytes

4:16 pm on May 4, 2016 (gmt 0)

10+ Year Member

You are Awesome Bee!
At a quick look, it looks like this will help a bunch

Thank you mam!
I'll let you know it goes after some study...

Tera

Andy Langton

4:31 pm on May 4, 2016 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

'Responsive design' I take to mean using media queries to adapt to different screen sizes. Put another way, code like this:

/* Smartphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
...
}
/* Tablets */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
...
}

How exactly you code the page is slightly different. However, it sounds like you're aiming for a "grid" system. You could try looking at how many of the responsive "boilerplates" do it. Skeleton is a fairly simple and open source one, for instance. The main CSS that does the responsive stuff is here: [github.com...]

You might be re-inventing the wheel, incidentally if you code this from scratch. It depends on how much you want to understand and customise vs. getting the job done.

not2easy

5:44 pm on May 4, 2016 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

There are a few free simple basic html5 templates out there, my favorite came from Sitepoint, but I recommend a little learning about the differences between html5/css3 and older html/css before diving in because there have been a lot of changes over the past few years. The w3.org people have both html tutorials and css3 learning resources at [w3.org...] no matter what level you are at.

(edited out comment related to split new thread at [webmasterworld.com...] )

[edited by: not2easy at 4:31 pm (utc) on May 5, 2016]

Terabytes

5:52 pm on May 4, 2016 (gmt 0)

10+ Year Member

OK! so far, life is good, and I'm slowly "getting it" and constructing my first "responsive" site...
(with emphasis on SLOWLY)

(Special thanks to BBD for the leg up on this)

I've got so much to learn, and truly feel like I'm back 15 years ago at the beginning again..
(I owe so much to this forum and it's member help over the years)

thank you so much to everyone that replied
Tera

Marshall

6:20 pm on May 4, 2016 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You may want to look into bootstrap. It is fairly simple and they have good help files.

Terabytes

9:35 pm on May 4, 2016 (gmt 0)

10+ Year Member

Thanks Marshall, I did actually look at bootstrap at the beginning of my journey...and it was somewhat daunting at that point, I may still check it out again, perhaps I can pick up some additional knowledge from it now...

Just wanted to let everyone know, it's starting to click and I almost have one entire website converted over to responsive!
(not actually a large site, about 10 pages or so...but I'm totally rockin' it at the moment)

Still lots to learn...
thanks again!

not2easy

4:29 pm on May 5, 2016 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

The separate discussion on the pros and cons of using Grid layouts went to its own Thread here: [webmasterworld.com...]

Swanny007

8:57 pm on May 6, 2016 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Here's what I based one of my designs off, easy peasy. [purecss.io...] - templates provided by Yahoo for free.

Starting with an existing template and then tweaking it to work for you is what I recommend.