You are not logged in.

#1 2015-10-27 19:30:33

Martin
Member
From: Stockholm, Sweden
Registered: 2015-10-01
Posts: 307
Website

Adapting an existing web to small screens (smartphones)?

I have started to work on my web to make it work better when visited with a smartphone rather than a computer. So far all I have done is based on this on-line article.

If you visit my web using a smartphone you will notice my success is somewhat patchy. I would appreciate some expert advice on this but since this is not a commercial thing I am not into things that will call for a lot of change/work.

TIA,

/Martin


"Problems worthy of attack
prove their worth by hitting back."
Piet Hein

Offline

#2 2015-10-27 21:03:23

ohnonot
...again
Registered: 2015-09-29
Posts: 3,584
Website

Re: Adapting an existing web to small screens (smartphones)?

it's a good and important topic, bit it's a little like asking "please explain to me how linux works" or something like that.

what i suggest to you (other than searching the web for responsive design and such) is to look at web pages' source code (right click in the page => View Page Source).
at the top you'll usually find links to .css files.
Here's one that's fairly simple, fully responsive, and completely without java script.

many people also use prefabricated css frameworks, grids and such. you will no doubt stumble upon them in your searches. i think in the long run it's good to use something fairly simple, and just add your personal css in a seperate file.

Offline

#3 2015-10-28 09:30:04

brontosaurusrex
Middle Office
Registered: 2015-09-29
Posts: 1,717

Re: Adapting an existing web to small screens (smartphones)?

Bootstrap certainly does look interesting (been watching some youtube on that lately), and for a personal page should be enough.

As opposed to a more "pro" page where the question (or buzz) is becoming so called "situational awareness" < which will raise a lot of privacy concerns and snuffing around the user as such and should not be in a domain of a 'proud' Linux user, so personally will skip that future/feature.

p.s. Example of situational awareness = What kind of page with what kind of info would we offer to a user that reads our page on toilet and has a slight diarrhea?

Last edited by brontosaurusrex (2015-10-28 09:47:47)

Online

#4 2015-10-28 13:10:52

tknomanzr
BL Die Hard
From: Around the Bend
Registered: 2015-09-29
Posts: 1,029

Re: Adapting an existing web to small screens (smartphones)?

I have used Bootstrap in the past. It does it's job well. Bootstrap has a mobile first philosophy, so you would design for mobile first, then factor in bigger screen setups. It does have a dependency on jquery, so if you don't want/like jquery then you would probably need something else. The jquery just adds additional functionality to certain things such as marquees, so if you don't use them you probably won't need the jquery library.

Bootstrap makes heavy use of the html class attribute, so if you need to customize individual elements, you will either need to add and theme your own class or use the id attribute.

For the best possible customization of themes you will need a less/sass compiler and some understanding of how less variables work in css. Also, if you understand the bootstrap framework well enough, it is possible to strip it down to only the stuff you use, which would lighten it up quite a bit.

They do have decent documentation as well: Twitter Bootstrap

Edit: It looks like they have maybe done away with the jquery dependency and included their own javascript libraries now. Also, it looks like they include support for both less and sass now.

Last edited by tknomanzr (2015-10-28 13:16:35)

Offline

#5 2015-10-28 14:33:05

brontosaurusrex
Middle Office
Registered: 2015-09-29
Posts: 1,717

Re: Adapting an existing web to small screens (smartphones)?

It does have a dependency on jquery

Wouldn't that be: Only if one uses jquery plugins?

Online

#6 2015-10-28 16:05:39

tknomanzr
BL Die Hard
From: Around the Bend
Registered: 2015-09-29
Posts: 1,029

Re: Adapting an existing web to small screens (smartphones)?

Right. It has been awhile since I checked their site and it looks like they did away with the whole jquery thing and implemented their own javascript libraries, which is cool because it kinda sucked having to pull that entire library in for just a few gizmos. Sorry if that wasn't clear. So maybe less a dependency than a recommend big_smile

It also looks like they will be moving the entire framework over to sass come version 4. Fortunately they will continue to support version 3.x so everyone's sites won't break.

Last edited by tknomanzr (2015-10-28 16:07:10)

Offline

#7 2019-02-10 15:36:11

THX1138
Member
Registered: 2019-01-14
Posts: 191

Re: Adapting an existing web to small screens (smartphones)?

I would just make two sites and redirect smaller screens to the second site.
something like screensize<largetabletscreen - redirect to mobile.mysite.com from mysite.com
then use a wordpress installation in cpanel with a mobile screen responsive theme. That's the easiest
mysite.com for screens > mobile size
mobile.mysite.com for screens <a largish tablet

Last edited by THX1138 (2019-02-10 15:40:46)


The telephone is an antiquity - you never know who is calling, there is no image, it is an outmoded product which constantly disrupts work (Ralf Hutter (Kraftwerk)) ps: my wife knows how much I dislike being disrupted at Work - Ralf Hutter hit the nail on the head there

Offline

#8 2019-02-10 16:20:17

glittersloth
...always giving it to you straight
Registered: 2015-09-30
Posts: 731

Re: Adapting an existing web to small screens (smartphones)?

Other posters are far better versed than I in website design/development, so I can't offer anything on that front, but...

Martin wrote:

If you visit my web...

While I have nothing against boats/catamarans, I just want to mention how heartbroken I was when I clicked on "My 1st cat" and didn't get any pictures of kittens. sad

Offline

#9 2019-02-10 21:11:25

Martin
Member
From: Stockholm, Sweden
Registered: 2015-10-01
Posts: 307
Website

Re: Adapting an existing web to small screens (smartphones)?

glittersloth wrote:

Other posters are far better versed than I in website design/development, so I can't offer anything on that front, but...

Martin wrote:

If you visit my web...

While I have nothing against boats/catamarans, I just want to mention how heartbroken I was when I clicked on "My 1st cat" and didn't get any pictures of kittens. sad

Sorry about that :-)
(We had a dog when I was a child.)

If you check my web out on a smartphone you will notice that it works reasonably OK now (this thread is kind of old) thanks to Nikola and the theme I use.

/Martin


"Problems worthy of attack
prove their worth by hitting back."
Piet Hein

Offline

#10 2019-02-10 22:28:58

ohnonot
...again
Registered: 2015-09-29
Posts: 3,584
Website

Re: Adapting an existing web to small screens (smartphones)?

^ nice, you made it!

edit:
i still remember what it looked like before. not bad, don't get me wrong, but not responsive at all.

Last edited by ohnonot (2019-02-10 22:29:41)

Offline

Board footer

Powered by FluxBB